refactor: LogViewerStatusIndicator

This component has a `isLoading` boolean and otherwise forwards its props to the inner Text component. Allows for easier styling.

src/renderer/features/InstallFlow/InstallFlowLogs.tsx

@@ -1,10 +1,11 @@
 import { useStore } from '@nanostores/react';
+import { startCase } from 'lodash-es';
 import { memo } from 'react';
 
 import {
   $installProcessLogs,
   $installProcessStatus,
-  isActiveInstallProcessStatus,
+  getIsActiveInstallProcessStatus,
 } from '@/renderer/features/InstallFlow/state';
 import { LogViewer } from '@/renderer/features/LogViewer/LogViewer';
 import { LogViewerStatusIndicator } from '@/renderer/features/LogViewer/LogViewerStatusIndicator';
@@ -14,7 +15,9 @@ export const InstallFlowLogs = memo(() => {
   const installProcessStatus = useStore($installProcessStatus);
   return (
     <LogViewer logs={installProcessLogs}>
-      <LogViewerStatusIndicator status={installProcessStatus} getIsActive={isActiveInstallProcessStatus} />
+      <LogViewerStatusIndicator isLoading={getIsActiveInstallProcessStatus(installProcessStatus)}>
+        {startCase(installProcessStatus.type)}
+      </LogViewerStatusIndicator>
     </LogViewer>
   );
 });

src/renderer/features/InstallFlow/InstallFlowStepInstall.tsx

@@ -7,15 +7,15 @@ import { InstallFlowLogs } from '@/renderer/features/InstallFlow/InstallFlowLogs
 import { InstallFlowStepper } from '@/renderer/features/InstallFlow/InstallFlowStepper';
 import {
   $installProcessStatus,
+  getIsActiveInstallProcessStatus,
   installFlowApi,
-  isActiveInstallProcessStatus,
 } from '@/renderer/features/InstallFlow/state';
 
 export const InstallFlowStepInstall = memo(() => {
   const installProcessStatus = useStore($installProcessStatus);
   const isFinished = useStore(installFlowApi.$isFinished);
 
-  const isActive = isActiveInstallProcessStatus(installProcessStatus);
+  const isActive = getIsActiveInstallProcessStatus(installProcessStatus);
 
   return (
     <BodyContainer>

src/renderer/features/InstallFlow/state.ts

@@ -158,7 +158,7 @@ export const $installProcessStatus = atom<WithTimestamp<InstallProcessStatus>>({
 });
 
 $installProcessStatus.subscribe((status, oldStatus) => {
-  if (oldStatus && isActiveInstallProcessStatus(oldStatus) && !isActiveInstallProcessStatus(status)) {
+  if (oldStatus && getIsActiveInstallProcessStatus(oldStatus) && !getIsActiveInstallProcessStatus(status)) {
     $isFinished.set(true);
     // To get chakra to show a checkmark on the last step, the active step must be the step _after_ the last step
     $activeStep.set(steps.length);
@@ -167,7 +167,7 @@ $installProcessStatus.subscribe((status, oldStatus) => {
 
 export const $installProcessLogs = atom<WithTimestamp<LogEntry>[]>([]);
 
-export const isActiveInstallProcessStatus = (status: InstallProcessStatus) => {
+export const getIsActiveInstallProcessStatus = (status: InstallProcessStatus) => {
   switch (status.type) {
     case 'installing':
     case 'canceling':

src/renderer/features/LaunchFlow/LaunchFlowLogViewer.tsx

@@ -24,11 +24,9 @@ export const LaunchFlowLogViewer = memo(() => {
 
   return (
     <LogViewer logs={invokeProcessLogs}>
-      <LogViewerStatusIndicator
-        status={invokeProcessStatus}
-        getIsActive={getIsInvokeProcessActive}
-        getMessage={getMessage}
-      />
+      <LogViewerStatusIndicator isLoading={getIsInvokeProcessActive(invokeProcessStatus)}>
+        {getMessage(invokeProcessStatus)}
+      </LogViewerStatusIndicator>
     </LogViewer>
   );
 });

src/renderer/features/LogViewer/LogViewerStatusIndicator.tsx

@@ -1,14 +1,12 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import type { SystemStyleObject, TextProps } from '@invoke-ai/ui-library';
 import { Box, Text } from '@invoke-ai/ui-library';
 import Linkify from 'linkify-react';
 import type { Opts as LinkifyOpts } from 'linkifyjs';
-import { startCase } from 'lodash-es';
 
 import { _afterEllipsisKeyframes } from '@/renderer/common/EllipsisLoadingText';
-import type { Status } from '@/shared/types';
 
 const sx: SystemStyleObject = {
-  '&[data-active="true"]:after': _afterEllipsisKeyframes,
+  '&[data-loading="true"]:after': _afterEllipsisKeyframes,
   a: {
     fontWeight: 'semibold',
   },
@@ -23,17 +21,11 @@ const linkifyOptions: LinkifyOpts = {
   validate: (value) => /^https?:\/\//.test(value),
 };
 
-type Props<T extends Status<string>> = {
-  status: T;
-  getIsActive: (status: T) => boolean;
-  getMessage?: (status: T) => string;
-};
+type Props = {
+  isLoading: boolean;
+} & TextProps;
 
-export const LogViewerStatusIndicator = <T extends Status<string>>({
-  status,
-  getIsActive,
-  getMessage = (status) => startCase(status.type),
-}: Props<T>) => {
+export const LogViewerStatusIndicator = ({ isLoading, children, ...textProps }: Props) => {
   return (
     <Box
       position="absolute"
@@ -48,8 +40,8 @@ export const LogViewerStatusIndicator = <T extends Status<string>>({
       borderWidth={1}
       shadow="dark-lg"
     >
-      <Text sx={sx} data-active={getIsActive(status)}>
-        <Linkify options={linkifyOptions}>{getMessage(status)}</Linkify>
+      <Text sx={sx} data-loading={isLoading} {...textProps}>
+        <Linkify options={linkifyOptions}>{children}</Linkify>
       </Text>
     </Box>
   );

src/shared/types.ts

@@ -193,7 +193,7 @@ type ErrorStatus = {
 /**
  * A status object that may be either an OK status or an ERROR status.
  */
-export type Status<State extends string> = OkStatus<State> | ErrorStatus;
+type Status<State extends string> = OkStatus<State> | ErrorStatus;
 
 /**
  * The various states the main process can be in.