Add useImageRegistry hook and integrate in controllers

Introduced a new useImageRegistry hook to centralize image registry data fetching and fallback logic. Updated ChaosStudioClone, ChaosStudioEdit, and StudioOverview components to use this hook, replacing direct queries and improving code reuse..

Signed-off-by: Harshit Panchbhai <[email protected]>

Author: harshit12339

chaoscenter/web/src/controllers/ChaosStudioClone/ChaosStudioClone.tsx

@@ -8,7 +8,7 @@ import { listExperiment, runChaosExperiment, saveChaosExperiment } from '@api/co
 import experimentYamlService from '@services/experiment';
 import { InfrastructureType } from '@api/entities';
 import Loader from '@components/Loader';
-import { useSearchParams, useUpdateSearchParams } from '@hooks';
+import { useSearchParams, useUpdateSearchParams, useImageRegistry } from '@hooks';
 import { ExperimentManifest, StudioMode } from '@models';
 
 export default function ChaosStudioCloneController(): React.ReactElement {
@@ -17,6 +17,7 @@ export default function ChaosStudioCloneController(): React.ReactElement {
   const searchParams = useSearchParams();
   const updateSearchParams = useUpdateSearchParams();
   const hasUnsavedChangesInURL = searchParams.get('unsavedChanges') === 'true';
+  const { imageRegistry } = useImageRegistry();
 
   // <!-- counting state since we have 2 async functions and need to flip state when both of said functions have resolved their promises -->
   const [showStudio, setShowStudio] = React.useState<number>(0);
@@ -56,7 +57,8 @@ export default function ChaosStudioCloneController(): React.ReactElement {
             id: experimentData?.infra?.infraID,
             namespace: experimentData.infra?.infraNamespace,
             environmentID: experimentData.infra?.environmentID
-          }
+          },
+          imageRegistry: imageRegistry
         })
         .then(() => setShowStudio(oldState => oldState + 1));
       const parsedManifest = parse(experimentData.experimentManifest) as ExperimentManifest;
@@ -66,7 +68,7 @@ export default function ChaosStudioCloneController(): React.ReactElement {
         .then(() => setShowStudio(oldState => oldState + 1));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [experimentData, experimentID, hasUnsavedChangesInURL]);
+  }, [experimentData, experimentID, hasUnsavedChangesInURL, imageRegistry]);
 
   const [saveChaosExperimentMutation, { loading: saveChaosExperimentLoading }] = saveChaosExperiment({
     onError: error => showError(error.message)

chaoscenter/web/src/controllers/ChaosStudioEdit/ChaosStudioEdit.tsx

@@ -8,7 +8,7 @@ import { listExperiment, runChaosExperiment, saveChaosExperiment } from '@api/co
 import experimentYamlService from '@services/experiment';
 import { ExperimentType, InfrastructureType, RecentExperimentRun } from '@api/entities';
 import Loader from '@components/Loader';
-import { useSearchParams, useUpdateSearchParams } from '@hooks';
+import { useSearchParams, useUpdateSearchParams, useImageRegistry } from '@hooks';
 import RightSideBarV2 from '@components/RightSideBarV2';
 import { StudioMode } from '@models';
 import { cronEnabled } from 'utils';
@@ -20,6 +20,7 @@ export default function ChaosStudioEditController(): React.ReactElement {
   const updateSearchParams = useUpdateSearchParams();
   const hasUnsavedChangesInURL = searchParams.get('unsavedChanges') === 'true';
   const experimentType = searchParams.get('experimentType');
+  const { imageRegistry } = useImageRegistry();
 
   // <!-- counting state since we have 2 async functions and need to flip state when both of said functions have resolved their promises -->
   const [showStudio, setShowStudio] = React.useState<number>(0);
@@ -61,7 +62,8 @@ export default function ChaosStudioEditController(): React.ReactElement {
             id: experimentData?.infra?.infraID,
             namespace: experimentData.infra?.infraNamespace,
             environmentID: experimentData?.infra?.environmentID
-          }
+          },
+          imageRegistry: imageRegistry
         })
         .then(() => setShowStudio(oldState => oldState + 1));
       experimentHandler
@@ -75,7 +77,7 @@ export default function ChaosStudioEditController(): React.ReactElement {
       setIsCronEnabled(validateCron);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [experimentData, experimentID, hasUnsavedChangesInURL]);
+  }, [experimentData, experimentID, hasUnsavedChangesInURL, imageRegistry]);
 
   const [saveChaosExperimentMutation, { loading: saveChaosExperimentLoading }] = saveChaosExperiment({
     onError: error => showError(error.message),

chaoscenter/web/src/hooks/index.ts

@@ -10,3 +10,4 @@ export * from './useTrackedRef';
 export * from './useDocumentTitle';
 export * from './useDeepCompareEffect';
 export * from './useProjectFilters';
+export * from './useImageRegistry';

chaoscenter/web/src/hooks/useImageRegistry.ts

@@ -0,0 +1,28 @@
+import { getImageRegistry } from '@api/core/ImageRegistry';
+import { getScope } from '@utils';
+import type { ImageRegistry } from '@db';
+
+// Default image registry configuration
+const DEFAULT_IMAGE_REGISTRY = {
+  name: 'docker.io/litmuschaos',
+  repo: 'litmuschaos',
+  secret: ''
+} as const;
+
+export function useImageRegistry(): { imageRegistry: ImageRegistry | undefined; loading: boolean } {
+  const scope = getScope();
+  
+  // Fetch imageRegistry data
+  const { data: getImageRegistryData, loading } = getImageRegistry({
+    projectID: scope.projectID
+  });
+
+  // Create imageRegistry object with fallback values
+  const imageRegistry = getImageRegistryData?.getImageRegistry ? {
+    name: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRegistryName,
+    repo: getImageRegistryData.getImageRegistry.imageRegistryInfo.imageRepoName,
+    secret: getImageRegistryData.getImageRegistry.imageRegistryInfo.secretName,
+  } : DEFAULT_IMAGE_REGISTRY;
+
+  return { imageRegistry, loading };
+}

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

@@ -17,14 +17,12 @@ import { isEqual } from 'lodash-es';
 import type { ExperimentMetadata } from '@db';
 import { useStrings } from '@strings';
 import FormErrorListener from '@components/FormErrorListener';
-import { useUpdateSearchParams } from '@hooks';
+import { useUpdateSearchParams, useImageRegistry } from '@hooks';
 import NameDescriptionTags from '@components/NameIdDescriptionTags';
 import { ChaosInfrastructureReferenceFieldProps, StudioErrorState, StudioTabs } from '@models';
 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 css from './StudioOverview.module.scss';
 
 interface StudioOverviewViewProps {
@@ -54,19 +52,7 @@ export default function StudioOverviewView({
 
   const [currentExperiment, setCurrentExperiment] = React.useState<ExperimentMetadata | undefined>();
 
-  const scope = getScope();
-
-   // 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, loading: imageRegistryLoading } = useImageRegistry();
 
   React.useEffect(() => {
     experimentHandler?.getExperiment(experimentKey).then(experiment => {