Add print button (#3133)

* add print button Signed-off-by: Jess Frazelle <github@jessfraz.com> * cleanup Signed-off-by: Jess Frazelle <github@jessfraz.com> * generate more types Signed-off-by: Jess Frazelle <github@jessfraz.com> * add a github action to generate machine api-types Signed-off-by: Jess Frazelle <github@jessfraz.com> * fix Signed-off-by: Jess Frazelle <github@jessfraz.com> * New machine-api types * actually print on the real machine Signed-off-by: Jess Frazelle <github@jessfraz.com> * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * add more Signed-off-by: Jess Frazelle <github@jessfraz.com> * New machine-api types * get the current machine Signed-off-by: Jess Frazelle <github@jessfraz.com> * New machine-api types * know when error Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * fmt Signed-off-by: Jess Frazelle <github@jessfraz.com> * add fmt Signed-off-by: Jess Frazelle <github@jessfraz.com> * New machine-api types * empty * empty * update machine api Signed-off-by: Jess Frazelle <github@jessfraz.com> * New machine-api types * empty * New machine-api types * emptuy * no circular deps Signed-off-by: Jess Frazelle <github@jessfraz.com> * New machine-api types * remove recursive dep Signed-off-by: Jess Frazelle <github@jessfraz.com> --------- Signed-off-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Jess Frazelle <jessfraz@users.noreply.github.com>
2024-08-04 00:51:30 -04:00
parent 54a9a50969
commit baf7d3dd9d
29 changed files with 1615 additions and 47 deletions
--- a/src/components/NetworkMachineIndicator.tsx
+++ b/src/components/NetworkMachineIndicator.tsx
@ -0,0 +1,62 @@
+import { Popover } from '@headlessui/react'
+import Tooltip from './Tooltip'
+import { machineManager } from 'lib/machineManager'
+import { isTauri } from 'lib/isTauri'
+import { CustomIcon } from './CustomIcon'
+
+export const NetworkMachineIndicator = ({
+  className,
+}: {
+  className?: string
+}) => {
+  const machineCount = Object.keys(machineManager.machines).length
+  return isTauri() ? (
+    <Popover className="relative">
+      <Popover.Button
+        className={
+          'flex items-center p-0 border-none bg-transparent dark:bg-transparent relative ' +
+          (className || '')
+        }
+        data-testid="network-machine-toggle"
+      >
+        <CustomIcon name="printer3d" className="w-5 h-5" />
+        {machineCount > 0 && (
+          <p aria-hidden className="flex items-center justify-center text-xs">
+            {machineCount}
+          </p>
+        )}
+        <Tooltip position="top-right" wrapperClassName="ui-open:hidden">
+          Network machines ({machineCount})
+        </Tooltip>
+      </Popover.Button>
+      <Popover.Panel
+        className="absolute right-0 left-auto bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm"
+        data-testid="network-popover"
+      >
+        <div className="flex items-center justify-between p-2 rounded-t-sm bg-chalkboard-20 dark:bg-chalkboard-80">
+          <h2 className="text-sm font-sans font-normal">Network machines</h2>
+          <p
+            data-testid="network"
+            className="font-bold text-xs uppercase px-2 py-1 rounded-sm"
+          >
+            {machineCount}
+          </p>
+        </div>
+        {machineCount > 0 && (
+          <ul className="divide-y divide-chalkboard-20 dark:divide-chalkboard-80">
+            {Object.entries(machineManager.machines).map(
+              ([hostname, machine]) => (
+                <li key={hostname} className={'px-2 py-4 gap-1 last:mb-0 '}>
+                  <p className="">{machine.model || machine.manufacturer}</p>
+                  <p className="text-chalkboard-60 dark:text-chalkboard-50 text-xs">
+                    Hostname {hostname}
+                  </p>
+                </li>
+              )
+            )}
+          </ul>
+        )}
+      </Popover.Panel>
+    </Popover>
+  ) : null
+}