HMS-9590: refactor create and edit template worflow

src/features/createAndEditTemplate/defineContent/api/fetchHardcodedRepositories.tsx

@@ -0,0 +1,50 @@
+import { RepositoryListServerResponse } from 'features/createAndEditTemplate/shared/types/types.repository';
+import useErrorNotification from 'Hooks/useErrorNotification';
+import { useQueryClient } from 'react-query';
+import { ContentOrigin, getContentList } from 'services/Content/ContentApi';
+import { CONTENT_LIST_KEY } from 'services/Content/ContentQueries';
+import { FetchHardcodedRepositories } from '../core/ports';
+
+const PAGE = 1;
+const LIMIT = 10;
+const SORTBY = '';
+const CONTENT_ORIGIN = [ContentOrigin.REDHAT];
+
+export const useFetchHardcodedRepositories = () => {
+  const queryClient = useQueryClient();
+  const errorNotifier = useErrorNotification();
+
+  const fetch: FetchHardcodedRepositories = async (filterData) => {
+    const { architecture, osVersion } = filterData;
+    const queryKey = [CONTENT_LIST_KEY, architecture, osVersion];
+
+    const formattedFilterData = {
+      availableForArch: architecture,
+      availableForVersion: osVersion,
+    };
+    const queryFn = () => getContentList(PAGE, LIMIT, formattedFilterData, SORTBY, CONTENT_ORIGIN);
+
+    const options = {
+      staleTime: 20000,
+    };
+
+    try {
+      const data = await queryClient.fetchQuery<RepositoryListServerResponse>(
+        queryKey,
+        queryFn,
+        options,
+      );
+      return data.data;
+    } catch (err) {
+      errorNotifier(
+        'Unable to get repositories list',
+        'An error occurred',
+        err,
+        'content-list-error',
+      );
+      return [];
+    }
+  };
+
+  return fetch;
+};

src/features/createAndEditTemplate/defineContent/core/ports.ts

@@ -0,0 +1,25 @@
+import { FullRepository } from 'features/createAndEditTemplate/shared/types/types.repository';
+import {
+  SystemConfigurationsLists,
+  SelectedSystemConfiguration,
+  SystemConfigurationsResponse,
+} from './types';
+import {
+  AllowedArchitecture,
+  AllowedOSVersion,
+} from 'features/createAndEditTemplate/shared/types/types';
+import { UseQueryResult } from 'react-query';
+
+// input ports
+export type GetRepositoryVersionsLists = () => SystemConfigurationsLists;
+export type SelectArchitecture = (architecture: AllowedArchitecture) => void;
+export type SelectOSVersion = (version: AllowedOSVersion) => void;
+export type ChooseHardcodedUUIDs = (version: SelectedSystemConfiguration) => Promise<void>;
+
+// output ports
+export type FetchSystemConfigurations = () => UseQueryResult<SystemConfigurationsResponse>;
+export type FetchHardcodedRepositories = (
+  version: SelectedSystemConfiguration,
+) => Promise<FullRepository[]>;
+// read from top level store - selectedArchitecture, selectedOSVersion
+// set data in top level store - setArchitecture, setOSVersion, resetTemplateRequestContent

src/features/createAndEditTemplate/defineContent/core/use-cases/chooseHardcodedUUIDs.ts

@@ -0,0 +1,24 @@
+import { useCallback } from 'react';
+
+import { useTemplateRequestApi } from 'features/createAndEditTemplate/workflow/store/TemplateStore';
+import { useFetchHardcodedRepositories } from '../../api/fetchHardcodedRepositories';
+import { lookupUrls } from 'features/createAndEditTemplate/shared/core/lookupUrls';
+import { filterHardcodedUUIDs } from '../domain/filterHardcodedUUIDs';
+import { ChooseHardcodedUUIDs } from '../ports';
+
+export const useChooseHardcodedUUIDs = () => {
+  const fetchHardcodedRepositories = useFetchHardcodedRepositories();
+  const { setHardcodedUUIDs } = useTemplateRequestApi();
+
+  const chooseHardcodedRedhatUUIDs: ChooseHardcodedUUIDs = async (version) => {
+    const repositories = await fetchHardcodedRepositories({
+      architecture: version.architecture,
+      osVersion: version.osVersion,
+    });
+    const hardcodedRedhatRepoUrls = lookupUrls(version);
+    const uuids = filterHardcodedUUIDs(repositories, hardcodedRedhatRepoUrls);
+    setHardcodedUUIDs(uuids);
+  };
+
+  return useCallback(chooseHardcodedRedhatUUIDs, []);
+};

src/features/createAndEditTemplate/defineContent/core/use-cases/initializeSystemsLists.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import { toDomain } from '../../api/versionsListToDomain';
+import { GetRepositoryVersionsLists } from '../ports';
+import { useRepositoryParams } from 'services/Content/ContentQueries';
+
+export const useInitializeSystemsLists: GetRepositoryVersionsLists = () => {
+  const { data } = useRepositoryParams();
+
+  const filteredLists = useMemo(() => toDomain(data), [data]);
+
+  return filteredLists;
+};

src/features/createAndEditTemplate/defineContent/store/DefineContentStore.tsx

@@ -2,131 +2,115 @@ import {
   useTemplateRequestApi,
   useTemplateRequestState,
 } from 'features/createAndEditTemplate/workflow/store/TemplateStore';
-import { createContext, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
-import { ContentOrigin } from 'services/Content/ContentApi';
-import { useContentListQuery, useRepositoryParams } from 'services/Content/ContentQueries';
+import { createContext, ReactNode, useContext, useLayoutEffect, useMemo } from 'react';
 import { useEditTemplateState } from 'features/createAndEditTemplate/editTemplate/store/EditTemplateStore';
-import { lookupUrls } from 'features/createAndEditTemplate/shared/core/lookupUrls';
-import { filterHardcodedUUIDs } from '../core/domain/filterHardcodedUUIDs';
 import {
   AllowedArchitecture,
   AllowedOSVersion,
   Architecture,
   FirstEmpty,
-  HardcodedRepositoryUrls,
   OSVersion,
 } from 'features/createAndEditTemplate/shared/types/types';
-import { toDomain } from '../api/versionsListToDomain';
-
-export type SelectArchitecture = (architecture: AllowedArchitecture) => void;
-export type SelectOSVersion = (version: AllowedOSVersion) => void;
+import { useChooseHardcodedUUIDs } from '../core/use-cases/chooseHardcodedUUIDs';
+import { useInitializeSystemsLists } from '../core/use-cases/initializeSystemsLists';
+import { SelectArchitecture, SelectOSVersion } from '../core/ports';
 
 type DefineContentApiType = {
-  architectures: Architecture[];
-  osVersions: OSVersion[];
-  selectedArchitecture: FirstEmpty<AllowedArchitecture>;
-  selectedOSVersion: FirstEmpty<AllowedOSVersion>;
   onSelectArchitecture: SelectArchitecture;
   onSelectOSVersion: SelectOSVersion;
+};
+
+const initialApi = {
+  onSelectArchitecture: () => {},
+  onSelectOSVersion: () => {},
+};
+
+type DefineContentStateType = {
+  selectedArchitecture: FirstEmpty<AllowedArchitecture>;
+  selectedOSVersion: FirstEmpty<AllowedOSVersion>;
   isArchitectureItemSelected: (item: AllowedArchitecture) => boolean;
   isOSVersionItemSelected: (item: AllowedOSVersion) => boolean;
 };
 
-const initialData = {
-  architectures: [],
-  osVersions: [],
+const initialState = {
   selectedArchitecture: undefined,
   selectedOSVersion: undefined,
-  setVersionOpen: () => {},
-  setArchOpen: () => {},
-  onSelectArchitecture: () => {},
-  onSelectOSVersion: () => {},
   isArchitectureItemSelected: () => false,
   isOSVersionItemSelected: () => false,
 };
 
-const DefineContentApi = createContext<DefineContentApiType>(initialData);
+export type SystemConfigurationsLists = {
+  architectures: Architecture[];
+  osVersions: OSVersion[];
+};
+
+export const initialSystemsLists = {
+  architectures: [],
+  osVersions: [],
+};
+
+const SystemConfigurationsLists = createContext<SystemConfigurationsLists>(initialSystemsLists);
+export const useSystemLists = () => useContext(SystemConfigurationsLists);
+
+const DefineContentApi = createContext<DefineContentApiType>(initialApi);
 export const useDefineContentApi = () => useContext(DefineContentApi);
 
+const DefineContentState = createContext<DefineContentStateType>(initialState);
+export const useDefineContentState = () => useContext(DefineContentState);
+
 type DefineContentStoreType = {
   children: ReactNode;
 };
 
 export const DefineContentStore = ({ children }: DefineContentStoreType) => {
-  const [hardcodedRedhatRepositories, setHardcodeRepositories] = useState<HardcodedRepositoryUrls>([
-    '',
-    '',
-  ]);
-
-  const { setHardcodedUUIDs, setOtherUUIDs, setArchitecture, setOSVersion } =
-    useTemplateRequestApi();
+  const { setArchitecture, setOSVersion, resetTemplateRequestContent } = useTemplateRequestApi();
   const { selectedArchitecture, selectedOSVersion } = useTemplateRequestState();
-
-  const { uuid } = useEditTemplateState();
-
-  // >>>>>>>>
-  // get archs and versions to populate dropdowns
-  const { data: lists } = useRepositoryParams();
-
-  const systemsLists = useMemo(() => toDomain(lists), [lists]);
-  // <<<<<<<<
-
-  const onSelectArchitecture = (type) => {
-    setArchitecture(type);
-  };
-  const onSelectOSVersion = (type) => {
-    setOSVersion(type);
-  };
-
-  const isArchitectureItemSelected = (item) => item === selectedArchitecture;
-  const isOSVersionItemSelected = (item) => item === selectedOSVersion;
-
-  // >>>>>>>>
-  // 2. fetch those hardcoded repositories
-  const { data } = useContentListQuery(
-    1,
-    10,
-    { urls: hardcodedRedhatRepositories },
-    '',
-    [ContentOrigin.REDHAT],
-    !!hardcodedRedhatRepositories.length,
-  );
-
-  // 1. when a user selects arch and os
-  // get urls of harcoded repos
-  useEffect(() => {
-    if (!!selectedArchitecture && !!selectedOSVersion) {
-      const hardcodedUrls = lookupUrls({
+  const { isEditTemplate } = useEditTemplateState();
+
+  const systemsLists = useInitializeSystemsLists();
+  const chooseHardcodedRedhatRepositories = useChooseHardcodedUUIDs();
+
+  const defineContentApi = useMemo(() => {
+    const onSelectArchitecture: SelectArchitecture = (type) => {
+      setArchitecture(type);
+    };
+    const onSelectOSVersion: SelectOSVersion = (type) => {
+      setOSVersion(type);
+    };
+    return { onSelectArchitecture, onSelectOSVersion };
+  }, []);
+
+  const defineContentState = useMemo(() => {
+    const isArchitectureItemSelected = (item) => item === selectedArchitecture;
+    const isOSVersionItemSelected = (item) => item === selectedOSVersion;
+    return {
+      selectedArchitecture,
+      selectedOSVersion,
+      isArchitectureItemSelected,
+      isOSVersionItemSelected,
+    };
+  }, [selectedArchitecture, selectedOSVersion]);
+
+  // automatically retrigger on arch or osversion change
+  useLayoutEffect(() => {
+    const isContentFilled = !!selectedArchitecture && !!selectedOSVersion;
+
+    if (isContentFilled && !isEditTemplate) {
+      resetTemplateRequestContent();
+      chooseHardcodedRedhatRepositories({
         architecture: selectedArchitecture,
         osVersion: selectedOSVersion,
       });
-      if (hardcodedUrls) {
-        setHardcodeRepositories(hardcodedUrls);
-      }
-      if (!uuid) {
-        setOtherUUIDs([]);
-      }
-    }
-  }, [selectedArchitecture, selectedOSVersion, uuid]);
-
-  // 3. filter out hardcoded uuids
-  useEffect(() => {
-    if (data?.data?.length) {
-      const uuids = filterHardcodedUUIDs(data.data, hardcodedRedhatRepositories);
-      setHardcodedUUIDs(uuids);
     }
-  }, [data?.data]);
-  // <<<<<<<<
-
-  const api = {
-    selectedArchitecture,
-    selectedOSVersion,
-    onSelectArchitecture,
-    onSelectOSVersion,
-    isArchitectureItemSelected,
-    isOSVersionItemSelected,
-    ...systemsLists,
-  };
-
-  return <DefineContentApi.Provider value={api}>{children}</DefineContentApi.Provider>;
+  }, [selectedArchitecture, selectedOSVersion, isEditTemplate]);
+
+  return (
+    <SystemConfigurationsLists.Provider value={systemsLists}>
+      <DefineContentApi.Provider value={defineContentApi}>
+        <DefineContentState.Provider value={defineContentState}>
+          {children}
+        </DefineContentState.Provider>
+      </DefineContentApi.Provider>
+    </SystemConfigurationsLists.Provider>
+  );
 };

src/features/createAndEditTemplate/defineContent/ui/DefineContentStep.test.tsx

@@ -1,11 +1,17 @@
 import { render } from '@testing-library/react';
-import { useDefineContentApi } from '../store/DefineContentStore';
+import {
+  useDefineContentApi,
+  useDefineContentState,
+  useSystemLists,
+} from '../store/DefineContentStore';
 import { defaultTemplateItem } from 'testingHelpers';
 import DefineContentStep from './DefineContentStep';
 import { useEditTemplateState } from 'features/createAndEditTemplate/editTemplate/store/EditTemplateStore';
 
 jest.mock('@src/features/createAndEditTemplate/defineContent/store/DefineContentStore', () => ({
   useDefineContentApi: jest.fn(),
+  useSystemLists: jest.fn(),
+  useDefineContentState: jest.fn(),
 }));
 
 jest.mock('@src/features/createAndEditTemplate/editTemplate/store/EditTemplateStore', () => ({
@@ -14,17 +20,23 @@ jest.mock('@src/features/createAndEditTemplate/editTemplate/store/EditTemplateSt
 
 it('expect DefineContentStep to render correctly', () => {
   const mockDefineContentApi = {
+    onSelectArchitecture: () => {},
+    onSelectOSVersion: () => {},
+  };
+  const mockSystemsLists = {
     architectures: [{ descriptor: 'aarch64', displayName: 'aarch64' }],
     osVersions: [{ descriptor: '9', displayName: 'el9' }],
+  };
+  const mockDefineContentState = {
     selectedArchitecture: 'aarch64',
     selectedOSVersion: '9',
-    onSelectArchitecture: () => {},
-    onSelectOSVersion: () => {},
   };
   const mockEditTemplateState = {
     isEditTemplate: false,
   };
   (useDefineContentApi as jest.Mock).mockImplementation(() => mockDefineContentApi);
+  (useSystemLists as jest.Mock).mockImplementation(() => mockSystemsLists);
+  (useDefineContentState as jest.Mock).mockImplementation(() => mockDefineContentState);
   (useEditTemplateState as jest.Mock).mockImplementation(() => mockEditTemplateState);
 
   const { getByText } = render(<DefineContentStep />);
@@ -42,17 +54,23 @@ it('expect DefineContentStep to render correctly', () => {
 
 it('expect DefineContentStep to render with disabled inputs', () => {
   const mockDefineContentApi = {
+    onSelectArchitecture: () => {},
+    onSelectOSVersion: () => {},
+  };
+  const mockSystemsLists = {
     architectures: [{ descriptor: 'aarch64', displayName: 'aarch64' }],
     osVersions: [{ descriptor: '9', displayName: 'el9' }],
+  };
+  const mockDefineContentState = {
     selectedArchitecture: 'aarch64',
     selectedOSVersion: '9',
-    onSelectArchitecture: () => {},
-    onSelectOSVersion: () => {},
   };
   const mockEditTemplateState = {
     isEditTemplate: true,
   };
   (useDefineContentApi as jest.Mock).mockImplementation(() => mockDefineContentApi);
+  (useSystemLists as jest.Mock).mockImplementation(() => mockSystemsLists);
+  (useDefineContentState as jest.Mock).mockImplementation(() => mockDefineContentState);
   (useEditTemplateState as jest.Mock).mockImplementation(() => mockEditTemplateState);
 
   const { getByTestId } = render(<DefineContentStep />);