Fix install warning display and make it reactive

resources/scripts/api/server/getServer.ts

@@ -39,7 +39,6 @@ export interface Server {
         allocations: number;
         backups: number;
     };
-    isInstalling: boolean;
     isTransferring: boolean;
     variables: ServerEggVariable[];
     allocations: Allocation[];
@@ -62,7 +61,6 @@ export const rawDataToServerObject = ({ attributes: data }: FractalResponseData)
     limits: { ...data.limits },
     eggFeatures: data.egg_features || [],
     featureLimits: { ...data.feature_limits },
-    isInstalling: data.status === 'installing' || data.status === 'install_failed',
     isTransferring: data.is_transferring,
     variables: ((data.relationships?.variables as FractalResponseList | undefined)?.data || []).map(
         rawDataToServerEggVariable

resources/scripts/components/elements/alert/Alert.tsx

@@ -0,0 +1,23 @@
+import { ExclamationIcon } from '@heroicons/react/outline';
+import React from 'react';
+import classNames from 'classnames';
+
+interface AlertProps {
+    type: 'warning';
+    className?: string;
+    children: React.ReactNode;
+}
+
+export default ({ className, children }: AlertProps) => {
+    return (
+        <div
+            className={classNames(
+                'flex items-center border-l-8 border-yellow-500 text-gray-50 bg-yellow-500/25 rounded-md shadow px-4 py-3',
+                className
+            )}
+        >
+            <ExclamationIcon className={'w-6 h-6 text-yellow-500 mr-2'} />
+            {children}
+        </div>
+    );
+};

resources/scripts/components/elements/alert/index.ts

@@ -0,0 +1 @@
+export { default as Alert } from './Alert';

resources/scripts/components/server/console/ServerConsoleContainer.tsx

@@ -1,8 +1,6 @@
 import React, { memo } from 'react';
 import { ServerContext } from '@/state/server';
 import Can from '@/components/elements/Can';
-import ContentContainer from '@/components/elements/ContentContainer';
-import tw from 'twin.macro';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import isEqual from 'react-fast-compare';
 import Spinner from '@/components/elements/Spinner';
@@ -11,18 +9,26 @@ import Console from '@/components/server/console/Console';
 import StatGraphs from '@/components/server/console/StatGraphs';
 import PowerButtons from '@/components/server/console/PowerButtons';
 import ServerDetailsBlock from '@/components/server/console/ServerDetailsBlock';
+import { Alert } from '@/components/elements/alert';
 
 export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
 const ServerConsoleContainer = () => {
     const name = ServerContext.useStoreState((state) => state.server.data!.name);
     const description = ServerContext.useStoreState((state) => state.server.data!.description);
-    const isInstalling = ServerContext.useStoreState((state) => state.server.data!.isInstalling);
+    const isInstalling = ServerContext.useStoreState((state) => state.server.isInstalling);
     const isTransferring = ServerContext.useStoreState((state) => state.server.data!.isTransferring);
     const eggFeatures = ServerContext.useStoreState((state) => state.server.data!.eggFeatures, isEqual);
 
     return (
         <ServerContentBlock title={'Console'} className={'flex flex-col gap-2 sm:gap-4'}>
+            {(isInstalling || isTransferring) && (
+                <Alert type={'warning'}>
+                    {isInstalling
+                        ? 'This server is currently running its installation process and most actions are unavailable.'
+                        : 'This server is currently being transferred to another node and all actions are unavailable.'}
+                </Alert>
+            )}
             <div className={'grid grid-cols-4 gap-4'}>
                 <div className={'hidden sm:block sm:col-span-2 lg:col-span-3 pr-4'}>
                     <h1 className={'font-header text-2xl text-gray-50 leading-relaxed line-clamp-1'}>{name}</h1>
@@ -41,25 +47,6 @@ const ServerConsoleContainer = () => {
                     </Spinner.Suspense>
                 </div>
                 <ServerDetailsBlock className={'col-span-4 lg:col-span-1 order-last lg:order-none'} />
-                {isInstalling ? (
-                    <div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
-                        <ContentContainer>
-                            <p css={tw`text-sm text-yellow-900`}>
-                                This server is currently running its installation process and most actions are
-                                unavailable.
-                            </p>
-                        </ContentContainer>
-                    </div>
-                ) : isTransferring ? (
-                    <div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
-                        <ContentContainer>
-                            <p css={tw`text-sm text-yellow-900`}>
-                                This server is currently being transferred to another node and all actions are
-                                unavailable.
-                            </p>
-                        </ContentContainer>
-                    </div>
-                ) : null}
             </div>
             <div className={'grid grid-cols-1 md:grid-cols-3 gap-2 sm:gap-4'}>
                 <Spinner.Suspense>

resources/scripts/state/server/index.ts

@@ -13,6 +13,8 @@ export type ServerStatus = 'offline' | 'starting' | 'stopping' | 'running' | nul
 interface ServerDataStore {
     data?: Server;
     inConflictState: Computed<ServerDataStore, boolean>;
+    isInstalling: Computed<ServerDataStore, boolean>;
+    isTransferring: Computed<ServerDataStore, boolean>;
     permissions: string[];
 
     getServer: Thunk<ServerDataStore, string, Record<string, unknown>, ServerStore, Promise<void>>;
@@ -32,6 +34,10 @@ const server: ServerDataStore = {
         return state.data.status !== null || state.data.isTransferring;
     }),
 
+    isInstalling: computed((state) => {
+        return state.data?.status === 'installing' || state.data?.status === 'install_failed';
+    }),
+
     getServer: thunk(async (actions, payload) => {
         const [server, permissions] = await getServer(payload);