settings: refactor system resource panel

tloncorp · Apr 21, 2023 · 4644a41 · 4644a41
1 parent e0fe5a9
commit 4644a41
Show file tree

Hide file tree

Showing 10 changed files with 344 additions and 323 deletions.
diff --git a/ui/src/preferences/ShipPrefs.tsx b/ui/src/preferences/ShipPrefs.tsx
diff --git a/ui/src/preferences/SystemPreferences.tsx b/ui/src/preferences/SystemPreferences.tsx
@@ -39,7 +39,7 @@ import SearchSystemPreferences from './SearchSystemPrefences';
 import { ShortcutPrefs } from './ShortcutPrefs';
 import { AttentionAndPrivacy } from './AttentionAndPrivacy';
 import { Avatar } from '../components/Avatar';
-import { SystemPrefs } from './ShipPrefs';
+import { SystemResourcePrefs } from './system-resources/SystemResourcePrefs';
 
 interface SystemPreferencesSectionProps {
   url: string;
@@ -248,7 +248,10 @@ export const SystemPreferences = (
             <Switch>
               <Route path={`${match.url}/apps/:desk`} component={AppPrefs} />
               <Route path={`${match.url}/help`} component={Help} />
-              <Route path={`${match.url}/system`} component={SystemPrefs} />
+              <Route
+                path={`${match.url}/system`}
+                component={SystemResourcePrefs}
+              />
               <Route
                 path={`${match.url}/interface`}
                 component={InterfacePrefs}

diff --git a/ui/src/preferences/system-resources/IdentityPrefs.tsx b/ui/src/preferences/system-resources/IdentityPrefs.tsx
@@ -0,0 +1,102 @@
+import classNames from 'classnames';
+import React, {
+  ComponentProps,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Avatar } from '../../components/Avatar';
+import { Button } from '../../components/Button';
+import { useAzimuthState } from '../../state/azimuth';
+import clipboardCopy from 'clipboard-copy';
+
+export const IdentityPrefs = () => {
+  const { state, stateLoadStatus, forceUpdate } = useAzimuthState();
+
+  return (
+    <div className="inner-section space-y-8">
+      <h2 className="h4">Identity</h2>
+      <div className="flex flex-row items-center">
+        <Avatar shipName={window.ship} size="default" />
+        <div className="ml-2 flex-grow">
+          <h3 className="mb-1 font-semibold">~{window.ship}</h3>
+          {stateLoadStatus === 'loading' && (
+            <div className="flex flex-row items-center justify-start">
+              <span
+                className={classNames('font-semibold', {
+                  'text-orange-400': state?.stale,
+                  'text-gray-400': !state?.stale,
+                })}
+              >
+                Azimuth block: {state?.block}
+              </span>
+              {state?.stale && (
+                <span className="ml-1 rounded border border-solid border-orange-400 px-1.5 text-xs font-semibold uppercase text-orange-400">
+                  Stale
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+        <div>
+          {state?.block && (
+            <CopyButton
+              type="submit"
+              variant="secondary"
+              className="py-1 px-3 text-sm"
+              label="Copy Info"
+              content={state.block}
+            ></CopyButton>
+          )}
+          {stateLoadStatus === 'success' && state?.stale && (
+            <Button
+              type="submit"
+              className="ml-1 bg-orange-400 py-1 px-3 text-sm"
+              onClick={forceUpdate}
+            >
+              Update
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+type CopyButtonProps = Omit<
+  ComponentProps<typeof Button>,
+  'children' | 'onClick'
+>;
+
+const CopyButton = ({
+  label = 'copy',
+  content,
+  ...buttonProps
+}: {
+  label: string;
+  content: string;
+} & CopyButtonProps) => {
+  const [successMessageActive, setSuccessMesageActive] = useState(false);
+  const copyTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const copy = useCallback(() => {
+    if (copyTimeout.current) clearTimeout(copyTimeout.current);
+    clipboardCopy(content);
+    setSuccessMesageActive(true);
+    copyTimeout.current = setTimeout(() => setSuccessMesageActive(false), 1000);
+  }, []);
+
+  // ensure timeout is cleared when component unmounts
+  useEffect(() => {
+    () => {
+      if (copyTimeout.current) clearTimeout(copyTimeout.current);
+    };
+  }, []);
+
+  return (
+    <Button {...buttonProps} onClick={copy}>
+      {successMessageActive ? 'Copied' : label}
+    </Button>
+  );
+};