Merge remote-tracking branch 'origin/lf/fix-hardcoding' into philip/hotfix

pkg/grid/src/app.tsx

@@ -49,8 +49,6 @@ const AppRoutes = () => {
     }
   }, [isDarkMode, theme]);
 
-  useEffect(() => {}, []);
-
   useEffect(
     handleError(() => {
       window.name = 'grid';
@@ -77,6 +75,9 @@ const AppRoutes = () => {
   return (
     <Switch>
       <Route path="/perma" component={PermalinkRoutes} />
+      <Route path="/upgrading">
+        <Grid upgrading />
+      </Route>
       <Route path={['/leap/:menu', '/']} component={Grid} />
     </Switch>
   );

pkg/grid/src/nav/Leap.tsx

@@ -227,6 +227,7 @@ export const Leap = React.forwardRef(
       [selection, rawInput, match, matches, selectedMatch]
     );
 
+
     return (
       <div className="relative z-50 w-full">
         <form
@@ -234,6 +235,7 @@ export const Leap = React.forwardRef(
             'flex items-center h-full w-full px-2 rounded-full bg-white default-ring focus-within:ring-2',
             shouldDim && 'opacity-60',
             !navOpen ? 'bg-gray-50' : '',
+            menu === 'upgrading' ? 'bg-orange-500' : '',
             className
           )}
           onSubmit={onSubmit}
@@ -241,28 +243,32 @@ export const Leap = React.forwardRef(
           <label
             htmlFor="leap"
             className={classNames(
-              'inline-block flex-none p-2 h4 text-blue-400',
-              !selection && 'sr-only'
+              'inline-block flex-none p-2 h4 ',
+              menu === 'upgrading' ? 'text-white' : !selection ? 'sr-only' : 'text-blue-400'
             )}
           >
-            {selection || 'Search'}
+            {menu === 'upgrading'
+              ? 'Your Urbit is being updated, this page will update when ready'
+              : selection || 'Search'}
           </label>
-          <input
-            id="leap"
-            type="text"
-            ref={inputRef}
-            placeholder={selection ? '' : 'Search'}
-            className="flex-1 w-full h-full px-2 h4 text-base rounded-full bg-transparent outline-none"
-            value={rawInput}
-            onClick={toggleSearch}
-            onFocus={onFocus}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            autoComplete="off"
-            aria-autocomplete="both"
-            aria-controls={dropdown}
-            aria-activedescendant={selectedMatch?.display || selectedMatch?.value}
-          />
+          {menu !== 'upgrading' ? (
+            <input
+              id="leap"
+              type="text"
+              ref={inputRef}
+              placeholder={selection ? '' : 'Search'}
+              className="flex-1 w-full h-full px-2 h4 text-base rounded-full bg-transparent outline-none"
+              value={rawInput}
+              onClick={toggleSearch}
+              onFocus={onFocus}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              autoComplete="off"
+              aria-autocomplete="both"
+              aria-controls={dropdown}
+              aria-activedescendant={selectedMatch?.display || selectedMatch?.value}
+            />
+          ) : null}
         </form>
         {menu === 'search' && (
           <Link

pkg/grid/src/nav/Nav.tsx

@@ -52,7 +52,8 @@ export type MenuState =
   | 'search'
   | 'notifications'
   | 'help-and-support'
-  | 'system-preferences';
+  | 'system-preferences'
+  | 'upgrading';
 
 interface NavProps {
   menu?: MenuState;
@@ -68,7 +69,7 @@ export const Nav: FunctionComponent<NavProps> = ({ menu }) => {
   const select = useLeapStore((state) => state.select);
 
   const menuState = menu || 'closed';
-  const isOpen = menuState !== 'closed';
+  const isOpen = menuState !== 'upgrading' && menuState !== 'closed';
   const eitherOpen = isOpen || systemMenuOpen;
 
   useEffect(() => {

pkg/grid/src/nav/notifications/SystemNotification.tsx

@@ -11,7 +11,8 @@ import useKilnState, { useVat } from '../../state/kiln';
 
 import { NotificationButton } from './NotificationButton';
 import { disableDefault } from '../../state/util';
-import { Vat } from '../../../../npm/api/dist';
+import { Vat } from '@urbit/api';
+import {useHistory} from 'react-router-dom';
 
 export const RuntimeLagNotification = () => (
   <section
@@ -43,6 +44,7 @@ function vatIsBlocked(newKelvin: number, vat: Vat) {
 
 export const BaseBlockedNotification = () => {
   const base = useVat('base');
+  const { push } = useHistory();
   // TODO: assert weft.name === 'zuse'??
   const newKelvin = base?.arak?.rail?.next?.[0]?.weft?.kelvin || 420;
   const charges = useCharges();
@@ -58,6 +60,7 @@ export const BaseBlockedNotification = () => {
 
   const handleArchiveApps = useCallback(async () => {
     api.poke(kilnBump(true));
+    push('/leap/upgrading');
   }, []);
 
   return (

pkg/grid/src/pages/Grid.tsx

@@ -1,7 +1,7 @@
 import { map, omit } from 'lodash';
 import React, { FunctionComponent } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Route, RouteComponentProps } from 'react-router-dom';
+import { Route, RouteComponentProps, useHistory, useParams } from 'react-router-dom';
 import { ErrorAlert } from '../components/ErrorAlert';
 import { MenuState, Nav } from '../nav/Nav';
 import { useCharges } from '../state/docket';
@@ -10,18 +10,20 @@ import { SuspendApp } from '../tiles/SuspendApp';
 import { Tile } from '../tiles/Tile';
 import { TileInfo } from '../tiles/TileInfo';
 
-type GridProps = RouteComponentProps<{
+interface RouteProps {
   menu?: MenuState;
-}>;
+}
 
-export const Grid: FunctionComponent<GridProps> = ({ match, history }) => {
+export const Grid: FunctionComponent<{}> = () => {
   const charges = useCharges();
+  const { push } = useHistory();
+  const { menu } = useParams<RouteProps>();
   const chargesLoaded = Object.keys(charges).length > 0;
 
   return (
     <div className="flex flex-col">
       <header className="fixed sm:sticky bottom-0 sm:bottom-auto sm:top-0 left-0 z-30 flex justify-center w-full px-4">
-        <Nav menu={match.params.menu} />
+        <Nav menu={menu} />
       </header>
 
       <main className="h-full w-full flex justify-center pt-4 md:pt-16 pb-32 relative z-0">
@@ -30,11 +32,11 @@ export const Grid: FunctionComponent<GridProps> = ({ match, history }) => {
           <div className="grid justify-center grid-cols-2 sm:grid-cols-[repeat(auto-fit,minmax(auto,250px))] gap-4 px-4 md:px-8 w-full max-w-6xl">
             {charges &&
               map(omit(charges, window.desk), (charge, desk) => (
-                <Tile key={desk} charge={charge} desk={desk} />
+                <Tile key={desk} charge={charge} desk={desk} disabled={menu === 'upgrading'} />
               ))}
           </div>
         )}
-        <ErrorBoundary FallbackComponent={ErrorAlert} onReset={() => history.push('/')}>
+        <ErrorBoundary FallbackComponent={ErrorAlert} onReset={() => push('/')}>
           <Route exact path="/app/:desk">
             <TileInfo />
           </Route>

pkg/grid/src/tiles/Tile.tsx

@@ -13,19 +13,20 @@ import { Bullet } from '../components/icons/Bullet';
 type TileProps = {
   charge: ChargeWithDesk;
   desk: string;
+  disabled?: boolean;
 };
 
-export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
+export const Tile: FunctionComponent<TileProps> = ({ charge, desk, disabled = false }) => {
   const addRecentApp = useRecentsStore((state) => state.addRecentApp);
   const { title, image, color, chad, href } = charge;
   const vat = useVat(desk);
   const { lightText, tileColor, menuColor, suspendColor, suspendMenuColor } = useTileColor(color);
-  const loading = 'install' in chad;
-  const suspended = 'suspend' in chad;
+  const loading = !disabled && 'install' in chad;
+  const suspended = disabled || 'suspend' in chad;
   const hung = 'hung' in chad;
-  const active = chadIsRunning(chad);
+  const active = !disabled && chadIsRunning(chad);
   const link = getAppHref(href);
-  const backgroundColor = active ? tileColor || 'purple' : suspendColor;
+  const backgroundColor = suspended ? suspendColor : active ? tileColor || 'purple' : suspendColor;
 
   return (
     <a
@@ -47,14 +48,12 @@ export const Tile: FunctionComponent<TileProps> = ({ charge, desk }) => {
             <>
               {loading && <Spinner className="h-6 w-6 mr-2" />}
               <span className="text-gray-500">
-                {suspended && 'Suspended'}
-                {loading && 'Installing'}
-                {hung && 'Errored'}
+                {suspended ? 'Suspended' : loading ? 'Installing' : hung ? 'Errored' : null }
               </span>
             </>
           )}
         </div>
-        {vat?.arak.rail?.paused && (
+        {vat?.arak.rail?.paused && !disabled && (
           <Bullet className="absolute z-10 top-5 left-5 sm:top-7 sm:left-7 w-4 h-4 text-orange-500 dark:text-black" />
         )}
         <TileMenu