Merge pull request 'feat(ui): simplify machine status' (#5073) from ui/update-machine into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5073

pkgs/clan-app/ui/src/components/MachineStatus/MachineStatus.tsx

@@ -20,6 +20,9 @@ export const MachineStatus = (props: MachineStatusProps) => {
   // we will use css transform in the typography component to capitalize
   const statusText = () => props.status?.replaceAll("_", " ");
 
+  // our implementation of machine status in the backend needs more time to bake, so for now we only display if a
+  // machine is not installed
+
   return (
     <Switch>
       <Match when={!status()}>
@@ -28,9 +31,6 @@ export const MachineStatus = (props: MachineStatusProps) => {
       <Match when={status()}>
         <Badge
           class={cx("machine-status", {
-            online: status() == "online",
-            offline: status() == "offline",
-            "out-of-sync": status() == "out_of_sync",
             "not-installed": status() == "not_installed",
           })}
           textValue={status()}

pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionUpdate.tsx

@@ -0,0 +1,38 @@
+import { createSignal, Show } from "solid-js";
+import { Button } from "@/src/components/Button/Button";
+import { InstallModal } from "@/src/workflows/InstallMachine/InstallMachine";
+import { useMachineName } from "@/src/hooks/clan";
+import { useMachineStateQuery } from "@/src/hooks/queries";
+import styles from "./SidebarSectionInstall.module.css";
+
+export interface SidebarSectionUpdateProps {
+  clanURI: string;
+  machineName: string;
+}
+
+export const SidebarSectionUpdate = (props: SidebarSectionUpdateProps) => {
+  const query = useMachineStateQuery(props.clanURI, props.machineName);
+
+  const [showUpdate, setShowUpdate] = createSignal(false);
+
+  return (
+    <Show when={query.isSuccess && query.data.status !== "not_installed"}>
+      <div class={styles.install}>
+        <Button
+          hierarchy="primary"
+          size="s"
+          onClick={() => setShowUpdate(true)}
+        >
+          Update machine
+        </Button>
+        <Show when={showUpdate()}>
+          <InstallModal
+            open={showUpdate()}
+            machineName={useMachineName()}
+            onClose={() => setShowUpdate(false)}
+          />
+        </Show>
+      </div>
+    </Show>
+  );
+};

pkgs/clan-app/ui/src/routes/Machine/Machine.tsx

@@ -6,11 +6,11 @@ import { SectionGeneral } from "./SectionGeneral";
 import { Machine as MachineModel, useMachineQuery } from "@/src/hooks/queries";
 import { SectionTags } from "@/src/routes/Machine/SectionTags";
 import { callApi } from "@/src/hooks/api";
-import { SidebarMachineStatus } from "@/src/components/Sidebar/SidebarMachineStatus";
 import { SidebarSectionInstall } from "@/src/components/Sidebar/SidebarSectionInstall";
 
 import styles from "./Machine.module.css";
 import { SectionServices } from "@/src/routes/Machine/SectionServices";
+import { SidebarSectionUpdate } from "@/src/components/Sidebar/SidebarSectionUpdate";
 
 export const Machine = (props: RouteSectionProps) => {
   const navigate = useNavigate();
@@ -61,6 +61,10 @@ export const Machine = (props: RouteSectionProps) => {
           clanURI={clanURI}
           machineName={useMachineName()}
         />
+        <SidebarSectionUpdate
+          clanURI={clanURI}
+          machineName={useMachineName()}
+        />
         <SectionGeneral {...sectionProps} />
         <SectionTags {...sectionProps} />
         <SectionServices />
@@ -74,14 +78,17 @@ export const Machine = (props: RouteSectionProps) => {
         <SidebarPane
           title={useMachineName()}
           onClose={onClose}
-          subHeader={
-            <Show when={useMachineName()} keyed>
-              <SidebarMachineStatus
-                clanURI={clanURI}
-                machineName={useMachineName()}
-              />
-            </Show>
-          }
+          // the implementation of remote machine status in the backend needs more time to bake, so for now we remove it and
+          // present the user with the ability to install or update a machines based on `installedAt` in the inventory.json
+          //
+          // subHeader={
+          //   <Show when={useMachineName()} keyed>
+          //     <SidebarMachineStatus
+          //       clanURI={clanURI}
+          //       machineName={useMachineName()}
+          //     />
+          //   </Show>
+          // }
         >
           {Sections()}
         </SidebarPane>