fix(portal): persist projectID to prevent blank screen on refresh

.github/workflows/build.yml

@@ -81,7 +81,7 @@ jobs:
         uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
 
       - name: Frontend checks
         shell: bash
@@ -116,7 +116,7 @@ jobs:
          uses: actions/checkout@v4
        - uses: actions/setup-node@v4
          with:
-           node-version: 16
+           node-version: 20
        - name: Chaoscenter web unit tests
          shell: bash
          run: |

chaoscenter/web/config/webpack.dev.js

@@ -38,29 +38,29 @@ const devConfig = {
       }
     },
     proxy: {
-      '/api': {
-        pathRewrite: { '^/api': '' },
-        target: process.env.CHAOS_MANAGER
-          ? process.env.CHAOS_MANAGER
-          : targetLocalHost
-          ? 'http://localhost:8080'
-          : `${baseUrl}/api`,
-        secure: false,
-        changeOrigin: true,
-        logLevel: 'info'
-      },
-      '/auth': {
-        pathRewrite: { '^/auth': '' },
-        target: process.env.CHAOS_MANAGER
-          ? process.env.CHAOS_MANAGER
-          : targetLocalHost
-          ? 'http://localhost:3000'
-          : `${baseUrl}/auth`,
-        secure: false,
-        changeOrigin: true,
-        logLevel: 'info'
-      }
-    }
+  '/api': {
+    pathRewrite: { '^/api': '' },
+    target: process.env.CHAOS_MANAGER
+      ? process.env.CHAOS_MANAGER
+      : targetLocalHost
+      ? 'http://localhost:8080'
+      : `${baseUrl}/api`,
+    secure: false,
+    changeOrigin: true,
+    logLevel: 'info'
+  },
+  '/auth': {
+    pathRewrite: { '^/auth': '' },
+    target: process.env.CHAOS_MANAGER
+      ? process.env.CHAOS_MANAGER
+      : targetLocalHost
+      ? 'http://localhost:3000'
+      : `${baseUrl}/auth`,
+    secure: false,
+    changeOrigin: true,
+    logLevel: 'info'
+  }
+}
   },
   plugins: [
     new MiniCssExtractPlugin({
@@ -69,7 +69,7 @@ const devConfig = {
       ignoreOrder: true
     }),
     new DefinePlugin({
-      'process.env': '{}', // required for @blueprintjs/core
+      'process.env': '{}', 
       __DEV__: true
     })
   ]

chaoscenter/web/src/components/CopyButton/CopyButton.tsx

@@ -11,7 +11,6 @@ export default function CopyButton({ stringToCopy }: CopyButtonProps): React.Rea
   const { showSuccess, showError } = useToaster();
 
   function fallbackCopyTextToClipboard(text: string): void {
-    // eslint-disable-next-line no-alert
     window.prompt('Copy to clipboard: Ctrl+C, Enter', text);
   }
 
@@ -21,7 +20,7 @@ export default function CopyButton({ stringToCopy }: CopyButtonProps): React.Rea
       return;
     }
     setCopying(true);
-    // eslint-disable-next-line no-console
+
     navigator.clipboard
       .writeText(text)
       .then(() => showSuccess('Copied to clipboard'))
@@ -30,14 +29,28 @@ export default function CopyButton({ stringToCopy }: CopyButtonProps): React.Rea
   }
 
   return copying ? (
-    <Icon size={12} data-testid="success-tick" name="success-tick" />
+    <span style={{ width: 12, height: 12, display: 'inline-flex', alignItems: 'center' }} data-testid="success-tick">
+      <Icon name="success-tick" />
+    </span>
   ) : (
-    <Icon
-      style={{ cursor: 'pointer', color: 'var(--primary-7)' }}
+    <span
+      role="button"
+      tabIndex={0}
+      style={{
+        cursor: 'pointer',
+        color: 'var(--primary-7)',
+        width: 12,
+        height: 12,
+        display: 'inline-flex',
+        alignItems: 'center'
+      }}
       onClick={() => copyTextToClipboard(stringToCopy)}
-      name="duplicate"
-      size={12}
+      onKeyPress={e => {
+        if (e.key === 'Enter' || e.key === ' ') copyTextToClipboard(stringToCopy);
+      }}
       data-testid="copy-button"
-    />
+    >
+      <Icon name="duplicate" />
+    </span>
   );
 }

chaoscenter/web/src/components/LitmusBreadCrumbs/LitmusBreadCrumbs.tsx

@@ -13,14 +13,12 @@
     {
       label: projectName || 'My Project',
       url: '/',
       iconProps: { name: 'chaos-litmuschaos' as any } // cast to 'any' to avoid TS type issue
     },
     ...(rest.links || [])
   ];
 
-  const validLinks = combinedLinks.filter(
-    link => link && typeof link.label === 'string' && link.label.trim() !== ''
-  );
+  const validLinks = combinedLinks.filter(link => link && typeof link.label === 'string' && link.label.trim() !== '');
 
   return <Breadcrumbs {...rest} links={validLinks} />;
 }

chaoscenter/web/src/strings/String.tsx

@@ -45,9 +45,9 @@ export function String(props: StringProps): React.ReactElement | null {
     const text = getString(stringID, vars);
 
     return useRichText ? (
-      <Tag {...(rest as unknown)} dangerouslySetInnerHTML={{ __html: text }} />
+      <Tag {...(rest as any)} dangerouslySetInnerHTML={{ __html: text }} />
     ) : (
-      <Tag {...(rest as unknown)}>{text}</Tag>
+      <Tag {...(rest as any)}>{text}</Tag>
     );
   } catch (e) {
     if (process.env.NODE_ENV !== 'production') {

chaoscenter/web/src/utils/userDetails.ts

@@ -32,6 +32,6 @@ export function setUserDetails({
 }: Partial<Omit<UserDetailsProps, 'accountID' | 'accountRole'>>): void {
   if (accessToken) localStorage.setItem('accessToken', accessToken);
   if (projectRole) localStorage.setItem('projectRole', projectRole);
-  if (projectID) localStorage.setItem('projectID', projectID);
+  if (projectID !== null && projectID !== undefined) localStorage.setItem('projectID', projectID);
   if (isInitialLogin !== undefined) localStorage.setItem('isInitialLogin', `${isInitialLogin}`);
 }

chaoscenter/web/src/views/ChaosHubs/ChaosHubs.module.scss

@@ -46,14 +46,11 @@
 .card {
   min-height: 260px;
   gap: 1rem;
-
 }
 
 .chaosHubCard {
   position: relative;
 
-
-
   .tagsList {
     display: flex;
     align-items: center;

chaoscenter/web/src/views/ExperimentBuilderTemplateSelection/blankCanvasTemplate.ts

@@ -11,10 +11,10 @@ export default function blankCanvasTemplate(
   switch (infrastructureType) {
     case InfrastructureType.KUBERNETES:
       return kubernetesBlankCanvasTemplate(
-        experimentName, 
+        experimentName,
         experiment?.chaosInfrastructure?.namespace,
-        undefined, 
-        experiment?.imageRegistry,
+        undefined,
+        experiment?.imageRegistry
       );
   }
 }

chaoscenter/web/src/views/ExperimentCreationSelectFault/ExperimentCreationListHubs.tsx

@@ -89,6 +89,7 @@ export default function ExperimentCreationListHubsView({
                           chart =>
                             chart.spec.faults.length > 0 && (
                               <Text
+                                key={chart.metadata.name}
                                 className={css.category}
                                 font={{ size: 'normal', weight: 'light' }}
                                 color={Color.GREY_200}

chaoscenter/web/src/views/KubernetesChaosInfrastructureTable/KubernetesChaosInfrastructureTable.tsx

@@ -78,8 +78,6 @@ export function RenderChaosInfrastructureOptions({
             text={`kubectl delete chaosexperiment,chaosengine,chaosresult --all -n ${chaosInfrastructureNamespace}`}
             isCopyButtonEnabled
           />
-
-
         </Container>
         {chaosInfrastructureScope === InfraScope.NAMESPACE && (
           <Layout.Vertical spacing="small">

chaoscenter/web/src/views/StudioOverview/StudioOverview.tsx

@@ -23,8 +23,8 @@ import { ChaosInfrastructureReferenceFieldProps, StudioErrorState, StudioTabs }
 import experimentYamlService from 'services/experiment';
 import KubernetesChaosInfrastructureReferenceFieldController from '@controllers/KubernetesChaosInfrastructureReferenceField';
 import { InfrastructureType } from '@api/entities';
-import { getImageRegistry } from '@api/core/ImageRegistry'; 
-import { getScope } from '@utils'; 
+import { getImageRegistry } from '@api/core/ImageRegistry';
+import { getScope } from '@utils';
 import css from './StudioOverview.module.scss';
 
 interface StudioOverviewViewProps {
@@ -56,17 +56,18 @@ export default function StudioOverviewView({
 
   const scope = getScope();
 
-   // Fetch the image registry data using Apollo's useQuery hook
-   const { data: getImageRegistryData, loading: imageRegistryLoading } = getImageRegistry({
-    projectID: scope.projectID,
+  // Fetch the image registry data using Apollo's useQuery hook
+  const { data: getImageRegistryData, loading: imageRegistryLoading } = getImageRegistry({
+    projectID: scope.projectID
   });
 
-  const imageRegistry = getImageRegistryData?.getImageRegistry?{
-      name: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRegistryName,
-      repo: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRepoName,
-      secret: getImageRegistryData.getImageRegistry.imageRegistryInfo.secretName,
-  }
-  : undefined;
+  const imageRegistry = getImageRegistryData?.getImageRegistry
+    ? {
+        name: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRegistryName,
+        repo: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRepoName,
+        secret: getImageRegistryData.getImageRegistry.imageRegistryInfo.secretName
+      }
+    : undefined;
 
   React.useEffect(() => {
     experimentHandler?.getExperiment(experimentKey).then(experiment => {
@@ -101,8 +102,7 @@ export default function StudioOverviewView({
           })
         })}
         onSubmit={values => {
-
-          values.imageRegistry = imageRegistry
+          values.imageRegistry = imageRegistry;
 
           if (values.chaosInfrastructure.namespace === undefined) {
             delete values.chaosInfrastructure.namespace;
@@ -164,10 +164,10 @@ export default function StudioOverviewView({
                       onClick={openDiscardDialog}
                     />
                     <Button
-                      type="submit" 
-                      intent="primary" 
-                      text={getString('next')} 
-                      rightIcon="chevron-right" 
+                      type="submit"
+                      intent="primary"
+                      text={getString('next')}
+                      rightIcon="chevron-right"
                       disabled={imageRegistryLoading}
                     />
                   </Layout.Horizontal>