feat: sync template logic with new backend

- Added new "Content versioning" step that allows users to choose
between rolling releases and extended support releases (EUS/E4S)
- Implemented validation logic to conditionally show the versioning step
 based on feature availability and architecture constraints
- Updated template request model to include `extended_release` and
`extended_release_version` fields
- Initialized template request with default extended support values to
prevent undefined state
- Integrated repository parameters API to fetch extended release
features and distribution minor versions

Author: katarinazaprazna

src/Pages/Templates/TemplatesTable/components/AddOrEditTemplate/AddOrEditTemplateContext.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   createContext,
   ReactNode,
   useCallback,
@@ -11,7 +11,7 @@ import { TemplateRequest } from 'services/Templates/TemplateApi';
 import { QueryClient, useQueryClient } from 'react-query';
 import { useContentListQuery, useRepositoryParams } from 'services/Content/ContentQueries';
 import { ContentOrigin, NameLabel, DistributionMinorVersion } from 'services/Content/ContentApi';
-import { hardcodeRedHatReposByArchAndVersion } from '../templateHelpers';
+import { hardcodeRedHatReposByArchAndVersion, hasExtendedSupport } from '../templateHelpers';
 import { useNavigate } from 'react-router-dom';
 import { useFetchTemplate } from 'services/Templates/TemplateQueries';
 import useRootPath from 'Hooks/useRootPath';
@@ -24,30 +24,20 @@ export interface AddOrEditTemplateContextInterface {
   distribution_versions: NameLabel[];
   extended_release_features: NameLabel[];
   distribution_minor_versions: DistributionMinorVersion[];
+  useExtendedSupport: boolean;
+  setUseExtendedSupport: (value: React.SetStateAction<boolean>) => void;
   templateRequest: Partial<TemplateRequest>;
   setTemplateRequest: (value: React.SetStateAction<Partial<TemplateRequest>>) => void;
   selectedRedhatRepos: Set<string>;
   setSelectedRedhatRepos: (uuidSet: Set<string>) => void;
   selectedCustomRepos: Set<string>;
   setSelectedCustomRepos: (uuidSet: Set<string>) => void;
   hardcodedRedhatRepositoryUUIDS: Set<string>;
-  checkIfCurrentStepValid: (index: number) => boolean;
+  hasInvalidSteps: (index: number) => boolean;
   isEdit?: boolean;
   editUUID?: string;
 }
 
-// template will need to have attributes to store update stream and minor version
-// this task is not yet being worked on
-
-/*
-Here I will be:
-- Tracking my FE state so that it can be USED WITHIN the Add/Edit wizard
-- Getting Red Hat repos (based on user subscription - eus 9.6). EPEL & custom aren't affected (no extra logic)
-- Pull the ExtendedRelease & ExtendedReleaseVersion from the repos API (safety)
-- Prepare the request object (data) that I will be sending to our API to create a new template - setTemplateRequest
-
- */
-
 export const AddOrEditTemplateContext = createContext({} as AddOrEditTemplateContextInterface);
 
 export const AddOrEditTemplateContextProvider = ({ children }: { children: ReactNode }) => {
@@ -58,45 +48,55 @@ export const AddOrEditTemplateContextProvider = ({ children }: { children: React
   const rootPath = useRootPath();
 
   if (isError) navigate(rootPath);
-  const [templateRequest, setTemplateRequest] = useState<Partial<TemplateRequest>>({});
+  const [templateRequest, setTemplateRequest] = useState<Partial<TemplateRequest>>({
+    extended_release: '',
+    extended_release_version: '',
+  });
+
+  const [useExtendedSupport, setUseExtendedSupport] = useState(false);
   const [selectedRedhatRepos, setSelectedRedhatRepos] = useState<Set<string>>(new Set());
   const [selectedCustomRepos, setSelectedCustomRepos] = useState<Set<string>>(new Set());
   const [hardcodedRedhatRepositories, setHardcodeRepositories] = useState<string[]>([]);
   const [hardcodedRedhatRepositoryUUIDS, setHardcodeRepositoryUUIDS] = useState<Set<string>>(
     new Set(),
   );
 
-  // /api/content-sources/v1.0/repository_parameters/
-  const hasExtendedSupportSubscription = true; // TODO: Get from the Feature Service or our BE
-  // seems like I'd get it from: "feature_name": "RHEL-E4S-x86_64",
-
-  // Like I mentioned before, would need to pull this information from the repo_params API
-  // distributionMinorVersions - 9.4
-  // extendedReleaseFeatures - ues, e4s, "none" (object - name, label)
+  const {
+    data: {
+      distribution_versions = [],
+      distribution_arches = [],
+      extended_release_features = [],
+      distribution_minor_versions = [],
+    } = {},
+  } = useRepositoryParams();
 
-  const stepsValidArray = useMemo(() => {
+  const stepValidationSequence = useMemo(() => {
     const { arch, date, name, version, use_latest, extended_release, extended_release_version } =
       templateRequest;
 
+    // Valid if: feature is unavailable, unused, or all required fields filled
+    const isVersioningStepValid =
+      !hasExtendedSupport(extended_release_features) ||
+      !useExtendedSupport ||
+      (extended_release && extended_release_version);
+
     return [
-      true,
-      arch && version,
-      // if they selected [] Extended support releases, then:
-      // extended_release & extended_release_version
-      // This data must be present for the step to be valid
-      !!selectedRedhatRepos.size,
-      true,
-      use_latest || isDateValid(date ?? ''),
-      !!name && name.length < 256,
+      true, // [0] No step
+      arch && version, // [1] "Define content" step
+      isVersioningStepValid, // [2] "Content versioning" step
+      !!selectedRedhatRepos.size, // [3] "Red Hat repositories" step
+      true, // [4] "Other repositories" step - optional step
+      use_latest || isDateValid(date ?? ''), // [5] "Setup date" step
+      !!name && name.length < 256, // [6] "Detail" step
     ] as boolean[];
   }, [templateRequest, selectedRedhatRepos.size]);
 
-  const checkIfCurrentStepValid = useCallback(
+  const hasInvalidSteps = useCallback(
     (stepIndex: number) => {
-      const stepsToCheck = stepsValidArray.slice(0, stepIndex + 1);
+      const stepsToCheck = stepValidationSequence.slice(0, stepIndex + 1);
       return !stepsToCheck.every((step) => step);
     },
-    [selectedRedhatRepos.size, stepsValidArray],
+    [selectedRedhatRepos.size, stepValidationSequence],
   );
 
   const queryClient = useQueryClient();
@@ -188,20 +188,6 @@ export const AddOrEditTemplateContextProvider = ({ children }: { children: React
     }));
   }, [templateRequestDependencies]);
 
-  const {
-    data: {
-      distribution_versions,
-      distribution_arches,
-      extended_release_features,
-      distribution_minor_versions,
-    } = {
-      distribution_versions: [],
-      distribution_arches: [],
-      extended_release_features: [],
-      distribution_minor_versions: [],
-    },
-  } = useRepositoryParams();
-
   return (
     <AddOrEditTemplateContext.Provider
       key={uuid}
@@ -218,9 +204,11 @@ export const AddOrEditTemplateContextProvider = ({ children }: { children: React
         selectedCustomRepos,
         setSelectedCustomRepos,
         hardcodedRedhatRepositoryUUIDS,
-        checkIfCurrentStepValid,
+        hasInvalidSteps,
         isEdit: !!uuid,
         editUUID: uuid,
+        useExtendedSupport,
+        setUseExtendedSupport,
       }}
     >
       {children}

src/Pages/Templates/TemplatesTable/components/AddOrEditTemplate/AddOrEditTemplateModal.tsx

@@ -20,7 +20,6 @@ import RedhatRepositoriesStep from './steps/RedhatRepositoriesStep';
 import CustomRepositoriesStep from './steps/CustomRepositoriesStep';
 import { TemplateRequest } from 'services/Templates/TemplateApi';
 
-import DefineContentStep from './steps/DefineContentStep';
 import SetUpDateStep from './steps/SetUpDateStep';
 import DetailStep from './steps/DetailStep';
 import ReviewStep from './steps/ReviewStep';
@@ -31,31 +30,37 @@ import { useEffect, useRef } from 'react';
 import { AddTemplateButton } from './AddTemplateButton';
 import useRootPath from 'Hooks/useRootPath';
 import { TEMPLATES_ROUTE } from 'Routes/constants';
+import DefineContentStep from './steps/DefineContentStep';
+import ExtendedSupportStep from './steps/ExtendedSupportStep';
+import { hasExtendedSupport } from '../templateHelpers';
 
 const useStyles = createUseStyles({
   minHeightForSpinner: {
     minHeight: '60vh',
   },
 });
 
-export interface Props {
-  isDisabled: boolean;
-  addRepo: (snapshot: boolean) => void;
-}
-
 const DEFAULT_STEP_ID = 'define-content';
+const DEFAULT_STEP_INDEX = 2;
 
 const stepIdToIndex: Record<string, number> = {
-  'define-content': 2,
-  'redhat-repositories': 3,
-  'custom-repositories': 4,
-  'set-up-date': 5,
-  detail: 6,
-  review: 7,
+  [DEFAULT_STEP_ID]: DEFAULT_STEP_INDEX,
+  'content-versioning': 3,
+  'redhat-repositories': 4,
+  'custom-repositories': 5,
+  'set-up-date': 6,
+  detail: 7,
+  review: 8,
 };
 
 // Component to sync URL with wizard state (must be inside Wizard)
-const WizardUrlSync = ({ onCancel }: { onCancel: () => void }) => {
+const WizardUrlSync = ({
+  onCancel,
+  usesArmArch,
+}: {
+  onCancel: () => void;
+  usesArmArch: boolean;
+}) => {
   const { goToStepById, activeStep } = useWizardContext();
   const [urlSearchParams] = useSearchParams();
 
@@ -65,13 +70,18 @@ const WizardUrlSync = ({ onCancel }: { onCancel: () => void }) => {
     if (tabParam && tabParam !== activeStep?.id) {
       if (stepIdToIndex[tabParam]) {
         goToStepById(tabParam);
-      } else if (tabParam === 'content') {
+      } else if (tabParam === 'define-content') {
+        // ARM architecture doesn't support extended support releases, so skip the content versioning step
+        if (usesArmArch) {
+          goToStepById('redhat-repositories');
+          return;
+        }
         goToStepById(DEFAULT_STEP_ID);
       } else {
         onCancel();
       }
     }
-  }, [tabParam, activeStep?.id, goToStepById, onCancel]);
+  }, [tabParam, activeStep?.id, goToStepById, onCancel, usesArmArch]);
 
   return null;
 };
@@ -86,15 +96,28 @@ const AddOrEditTemplateBase = () => {
   // Store the original 'from' value on mount (before step navigation changes location.state)
   const fromRef = useRef(location.state?.from);
 
-  const { isEdit, templateRequest, checkIfCurrentStepValid, editUUID } =
-    useAddOrEditTemplateContext();
+  const {
+    isEdit,
+    templateRequest,
+    hasInvalidSteps,
+    editUUID,
+    extended_release_features,
+    distribution_minor_versions,
+  } = useAddOrEditTemplateContext();
+
+  const usesArmArch = templateRequest.arch === 'aarch64';
+
+  const selectedVersionMismatch = distribution_minor_versions.every(
+    (distribution) => distribution.major !== templateRequest.version,
+  );
 
   // useSafeUUIDParam in AddOrEditTemplateContext already validates the UUID
   // If in edit mode and UUID is invalid, it will be an empty string
   if (isEdit && !editUUID) throw new Error('UUID is invalid');
 
   const tabParam = urlSearchParams.get('tab');
-  const initialIndex = tabParam && stepIdToIndex[tabParam] ? stepIdToIndex[tabParam] : 2;
+  const initialIndex =
+    tabParam && stepIdToIndex[tabParam] ? stepIdToIndex[tabParam] : DEFAULT_STEP_INDEX;
 
   useEffect(() => {
     if (!urlSearchParams.get('tab')) {
@@ -149,7 +172,7 @@ const AddOrEditTemplateBase = () => {
         <Wizard
           header={
             <>
-              <WizardUrlSync onCancel={onCancel} />
+              <WizardUrlSync onCancel={onCancel} usesArmArch={usesArmArch} />
               <WizardHeader
                 title={`${isEdit ? 'Edit' : 'Create'} content template`}
                 titleId={`${isEdit ? 'edit' : 'create'}_content_template`}
@@ -176,25 +199,35 @@ const AddOrEditTemplateBase = () => {
                 name='Define content'
                 id='define-content'
                 key='define-content-key'
-                footer={{ ...sharedFooterProps, isNextDisabled: checkIfCurrentStepValid(1) }}
+                footer={{ ...sharedFooterProps, isNextDisabled: hasInvalidSteps(1) }}
               >
                 <DefineContentStep />
               </WizardStep>,
               <WizardStep
-                isDisabled={checkIfCurrentStepValid(1)}
+                key='content-versioning-key'
+                isDisabled={hasInvalidSteps(1) || selectedVersionMismatch || usesArmArch}
+                isHidden={!hasExtendedSupport(extended_release_features)}
+                name='Content versioning'
+                id='content-versioning'
+                footer={{ ...sharedFooterProps, isNextDisabled: hasInvalidSteps(2) }}
+              >
+                <ExtendedSupportStep />
+              </WizardStep>,
+              <WizardStep
+                isDisabled={hasInvalidSteps(2)}
                 name='Red Hat repositories'
                 id='redhat-repositories'
                 key='redhat-repositories-key'
-                footer={{ ...sharedFooterProps, isNextDisabled: checkIfCurrentStepValid(2) }}
+                footer={{ ...sharedFooterProps, isNextDisabled: hasInvalidSteps(3) }}
               >
                 <RedhatRepositoriesStep />
               </WizardStep>,
               <WizardStep
-                isDisabled={checkIfCurrentStepValid(2)}
+                isDisabled={hasInvalidSteps(3)}
                 name='Other repositories'
                 id='custom-repositories'
                 key='custom-repositories-key'
-                footer={{ ...sharedFooterProps, isNextDisabled: checkIfCurrentStepValid(3) }}
+                footer={{ ...sharedFooterProps, isNextDisabled: hasInvalidSteps(4) }}
               >
                 <CustomRepositoriesStep />
               </WizardStep>,
@@ -203,22 +236,22 @@ const AddOrEditTemplateBase = () => {
           <WizardStep
             name='Set up date'
             id='set-up-date'
-            isDisabled={checkIfCurrentStepValid(3)}
-            footer={{ ...sharedFooterProps, isNextDisabled: checkIfCurrentStepValid(4) }}
+            isDisabled={hasInvalidSteps(4)}
+            footer={{ ...sharedFooterProps, isNextDisabled: hasInvalidSteps(5) }}
           >
             <SetUpDateStep />
           </WizardStep>
           {/* <WizardStep name='Systems (optional)' id='systems' /> */}
           <WizardStep
-            isDisabled={checkIfCurrentStepValid(4)}
-            footer={{ ...sharedFooterProps, isNextDisabled: checkIfCurrentStepValid(5) }}
+            isDisabled={hasInvalidSteps(5)}
+            footer={{ ...sharedFooterProps, isNextDisabled: hasInvalidSteps(6) }}
             name='Detail'
             id='detail'
           >
             <DetailStep />
           </WizardStep>
           <WizardStep
-            isDisabled={checkIfCurrentStepValid(5)}
+            isDisabled={hasInvalidSteps(6)}
             name='Review'
             id='review'
             footer={

src/Pages/Templates/TemplatesTable/components/AddOrEditTemplate/steps/ExtendedSupportStep.test.tsx

@@ -0,0 +1,41 @@
+import {
+  defaultTemplateItem,
+  testRepositoryParamsResponse,
+} from '../../../../../../testingHelpers';
+import { useAddOrEditTemplateContext } from '../AddOrEditTemplateContext';
+import ExtendedSupportStep from './ExtendedSupportStep';
+import { render } from '@testing-library/react';
+
+jest.mock('../AddOrEditTemplateContext', () => ({
+  useAddOrEditTemplateContext: jest.fn(),
+}));
+
+const defaultMockContext = {
+  isEdit: false,
+  templateRequest: defaultTemplateItem,
+  setTemplateRequest: () => undefined,
+  distribution_arches: testRepositoryParamsResponse.distribution_arches,
+  distribution_versions: testRepositoryParamsResponse.distribution_versions,
+  extended_release_features: testRepositoryParamsResponse.extended_release_features,
+  distribution_minor_versions: testRepositoryParamsResponse.distribution_minor_versions,
+};
+
+beforeEach(() => {
+  (useAddOrEditTemplateContext as jest.Mock).mockImplementation(() => defaultMockContext);
+});
+
+it('expect ExtendedSupportStep to render correct initial state', () => {
+  const { getByRole, queryByRole } = render(<ExtendedSupportStep />);
+
+  const heading = getByRole('heading', { name: 'Content versioning', level: 1 });
+  expect(heading).toBeInTheDocument();
+
+  const radio = getByRole('radio', { name: 'Latest release' });
+  expect(radio).toBeChecked();
+
+  const updateStreamToggle = queryByRole('button', { name: 'Update stream toggle' });
+  expect(updateStreamToggle).not.toBeInTheDocument();
+
+  const minorVersionToggle = queryByRole('button', { name: 'Minor version toggle' });
+  expect(minorVersionToggle).not.toBeInTheDocument();
+});