From 1bd0f4be77fcdd6c69799ac78429b08e3552b9d0 Mon Sep 17 00:00:00 2001
From: tomholford <tomholford@users.noreply.github.com>
Date: Mon, 21 Nov 2022 16:10:59 -0800
Subject: [PATCH] grid: distinguish app sync from system install

By using `%kiln-install` instead of `%kiln-sync` for System Updates, this ensures that the `%kids` desk is also updated.

Also, address UX feedback: render the entire source ship's patp to avoid ambiguity. (as opposed to truncating a moon's name).
---
 pkg/grid/src/components/ShipName.tsx          |  5 ++-
 .../{SourceSyncer.tsx => SourceSetter.tsx}    | 42 +++++++++++--------
 pkg/grid/src/nav/preferences/AppPrefs.tsx     | 14 ++++---
 .../src/nav/preferences/SystemUpdatePrefs.tsx | 15 +++++--
 pkg/grid/src/state/kiln.ts                    | 19 ++++++++-
 5 files changed, 64 insertions(+), 31 deletions(-)
 rename pkg/grid/src/components/{SourceSyncer.tsx => SourceSetter.tsx} (74%)

diff --git a/pkg/grid/src/components/ShipName.tsx b/pkg/grid/src/components/ShipName.tsx
index 5ada5a372b..4a49706b19 100644
--- a/pkg/grid/src/components/ShipName.tsx
+++ b/pkg/grid/src/components/ShipName.tsx
@@ -3,11 +3,12 @@ import React, { HTMLAttributes } from 'react';
 
 type ShipNameProps = {
   name: string;
+  truncate?: boolean;
 } & HTMLAttributes<HTMLSpanElement>;
 
-export const ShipName = ({ name, ...props }: ShipNameProps) => {
+export const ShipName = ({ name, truncate = true, ...props }: ShipNameProps) => {
   const separator = /([_^-])/;
-  const citedName = cite(name);
+  const citedName = truncate ? cite(name) : name;
 
   if (!citedName) {
     return null;
diff --git a/pkg/grid/src/components/SourceSyncer.tsx b/pkg/grid/src/components/SourceSetter.tsx
similarity index 74%
rename from pkg/grid/src/components/SourceSyncer.tsx
rename to pkg/grid/src/components/SourceSetter.tsx
index 69c63e63c4..b37936f26b 100644
--- a/pkg/grid/src/components/SourceSyncer.tsx
+++ b/pkg/grid/src/components/SourceSetter.tsx
@@ -1,34 +1,39 @@
 import React, { useCallback, useState } from 'react';
 import { useAsyncCall } from '../logic/useAsyncCall';
-import useKilnState from '../state/kiln';
 import { Button } from './Button';
 import { ShipName } from './ShipName';
 import { Spinner } from './Spinner';
 
-interface SourceSyncerProps {
+interface SourceSetterProps {
   appName: string;
+  srcDesk: string;
+  srcShip?: string;
   title: string;
-  syncDesk: string;
-  syncShip?: string;
+  toggleSrc: (desk: string, ship: string) => Promise<void>;
 }
 
-export default function SourceSyncer({ appName, title, syncDesk, syncShip }: SourceSyncerProps) {
-  const [newSyncShip, setNewSyncShip] = useState(syncShip ?? '');
-  const { toggleSync } = useKilnState();
-  const { status: requestStatus, call: setSync } = useAsyncCall(toggleSync);
-  const syncDirty = newSyncShip !== syncShip;
+export default function SourceSetter({
+  appName,
+  srcDesk,
+  srcShip,
+  title,
+  toggleSrc
+}: SourceSetterProps) {
+  const [newSyncShip, setNewSyncShip] = useState(srcShip ?? '');
+  const { status: requestStatus, call: handleSubmit } = useAsyncCall(toggleSrc);
+  const syncDirty = newSyncShip !== srcShip;
 
-  const onUnsync = useCallback(() => {
-    if (!syncShip) {
+  const onUnset = useCallback(() => {
+    if (!srcShip) {
       return;
     }
     if (
       // eslint-disable-next-line no-alert, no-restricted-globals
       confirm(`Are you sure you want to unsync ${appName}? You will no longer receive updates.`)
     ) {
-      toggleSync(syncDesk, syncShip);
+      toggleSrc(srcDesk, srcShip);
     }
-  }, [syncShip, syncDesk, toggleSync]);
+  }, [srcShip, srcDesk]);
 
   const handleSourceChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const { target } = e;
@@ -39,26 +44,27 @@ export default function SourceSyncer({ appName, title, syncDesk, syncShip }: Sou
   const onSubmit = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
-      await setSync(syncDesk, newSyncShip);
+      await handleSubmit(srcDesk, newSyncShip);
     },
-    [syncDesk, newSyncShip, toggleSync]
+    [srcDesk, newSyncShip]
   );
 
   return (
     <>
       <h2 className="h3 mb-7">{title}</h2>
       <div className="space-y-3">
-        {syncShip ? (
+        {srcShip ? (
           <>
             <h3 className="flex items-center h4 mb-2">Automatic Updates</h3>
             <p>Automatically download and apply updates to keep {appName} up to date.</p>
             <div className="flex-1 flex flex-col justify-center space-y-6">
               <p>
-                OTA Source: <ShipName name={syncShip} className="font-semibold font-mono" />
+                OTA Source:{' '}
+                <ShipName name={srcShip} truncate={false} className="font-semibold font-mono" />
               </p>
             </div>
             <div className="flex space-x-2">
-              <Button onClick={onUnsync} variant="destructive">
+              <Button onClick={onUnset} variant="destructive">
                 Unsync Updates for {appName}...
               </Button>
             </div>
diff --git a/pkg/grid/src/nav/preferences/AppPrefs.tsx b/pkg/grid/src/nav/preferences/AppPrefs.tsx
index f86f651f6f..3cc00e1b91 100644
--- a/pkg/grid/src/nav/preferences/AppPrefs.tsx
+++ b/pkg/grid/src/nav/preferences/AppPrefs.tsx
@@ -1,23 +1,25 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+import SourceSetter from '../../components/SourceSetter';
 import { useCharge } from '../../state/docket';
-import { usePike } from '../../state/kiln';
+import useKilnState, { usePike } from '../../state/kiln';
 import { getAppName } from '../../state/util';
-import SourceSyncer from '../../components/SourceSyncer';
 
 export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => {
   const { desk } = match.params;
   const charge = useCharge(desk);
   const appName = getAppName(charge);
   const pike = usePike(desk);
-  const syncShip = pike?.sync?.ship;
+  const srcShip = pike?.sync?.ship;
+  const { toggleSync } = useKilnState();
 
   return (
-    <SourceSyncer
+    <SourceSetter
       appName={appName}
+      toggleSrc={toggleSync}
+      srcDesk={desk}
+      srcShip={srcShip}
       title={`${appName} Settings`}
-      syncDesk={desk}
-      syncShip={syncShip}
     />
   );
 };
diff --git a/pkg/grid/src/nav/preferences/SystemUpdatePrefs.tsx b/pkg/grid/src/nav/preferences/SystemUpdatePrefs.tsx
index 6d7441c2c5..b08bd32dcd 100644
--- a/pkg/grid/src/nav/preferences/SystemUpdatePrefs.tsx
+++ b/pkg/grid/src/nav/preferences/SystemUpdatePrefs.tsx
@@ -1,15 +1,22 @@
 import _ from 'lodash';
 import React from 'react';
-import SourceSyncer from '../../components/SourceSyncer';
-import { usePike } from '../../state/kiln';
+import SourceSetter from '../../components/SourceSetter';
+import useKilnState, { usePike } from '../../state/kiln';
 
 export const SystemUpdatePrefs = () => {
   const desk = 'base';
   const appName = 'your Urbit';
   const pike = usePike(desk);
-  const syncShip = pike?.sync?.ship;
+  const srcShip = pike?.sync?.ship;
+  const { toggleInstall } = useKilnState();
 
   return (
-    <SourceSyncer appName={appName} title="System Updates" syncDesk={desk} syncShip={syncShip} />
+    <SourceSetter
+      appName={appName}
+      toggleSrc={toggleInstall}
+      srcDesk={desk}
+      srcShip={srcShip}
+      title="System Updates"
+    />
   );
 };
diff --git a/pkg/grid/src/state/kiln.ts b/pkg/grid/src/state/kiln.ts
index a4ae9992f5..8d4247a73b 100644
--- a/pkg/grid/src/state/kiln.ts
+++ b/pkg/grid/src/state/kiln.ts
@@ -1,4 +1,13 @@
-import { scryLag, getPikes, Pikes, Pike, kilnUnsync, kilnSync } from '@urbit/api';
+import {
+  scryLag,
+  getPikes,
+  Pikes,
+  Pike,
+  kilnUnsync,
+  kilnSync,
+  kilnUninstall,
+  kilnInstall
+} from '@urbit/api';
 import create from 'zustand';
 import produce from 'immer';
 import { useCallback } from 'react';
@@ -12,6 +21,7 @@ interface KilnState {
   lag: boolean;
   fetchLag: () => Promise<void>;
   fetchPikes: () => Promise<void>;
+  toggleInstall: (desk: string, ship: string) => Promise<void>;
   toggleSync: (desk: string, ship: string) => Promise<void>;
   set: (s: KilnState) => void;
   initializeKiln: () => Promise<void>;
@@ -33,6 +43,13 @@ const useKilnState = create<KilnState>((set, get) => ({
     const lag = await api.scry<boolean>(scryLag);
     set({ lag });
   },
+  toggleInstall: async (desk: string, ship: string) => {
+    const synced = !!get().pikes[desk].sync;
+    await (useMockData
+      ? fakeRequest('')
+      : api.poke(synced ? kilnUninstall(desk) : kilnInstall(ship, desk)));
+    await get().fetchPikes();
+  },
   toggleSync: async (desk: string, ship: string) => {
     const synced = !!get().pikes[desk].sync;
     await (useMockData