HMS-9490: create templates with extended support repos

_playwright-tests/Integration/AssignTemplateToSystemUI.spec.ts

@@ -53,11 +53,11 @@ test.describe('Assign Template to System via UI', () => {
 
       const nextButton = page.getByRole('button', { name: 'Next', exact: true });
 
-      page.getByRole('button', { name: 'Create template' }).click();
+      await page.getByRole('button', { name: 'Create template' }).click();
       await page.getByRole('button', { name: 'filter architecture' }).click();
       await page.getByRole('menuitem', { name: 'x86_64' }).click();
       await page.getByRole('button', { name: 'filter OS version' }).click();
-      await page.getByRole('menuitem', { name: 'el9' }).click();
+      await page.getByRole('menuitem', { name: 'RHEL 9' }).click();
       await nextButton.click();
 
       await expect(

_playwright-tests/Integration/AssociatedTemplateCRUD.spec.ts

@@ -40,7 +40,7 @@ test.describe('Associated Template CRUD', () => {
       await page.getByRole('button', { name: 'filter architecture' }).click();
       await page.getByRole('menuitem', { name: 'x86_64' }).click();
       await page.getByRole('button', { name: 'filter OS version' }).click();
-      await page.getByRole('menuitem', { name: 'el9' }).click();
+      await page.getByRole('menuitem', { name: 'RHEL 9' }).click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
 
       await expect(

_playwright-tests/Integration/CanUpdateSystemWithTemplate.spec.ts

@@ -49,7 +49,7 @@ test.describe('Test System With Template', () => {
       await page.getByRole('button', { name: 'filter architecture' }).click();
       await page.getByRole('menuitem', { name: 'x86_64' }).click();
       await page.getByRole('button', { name: 'filter OS version' }).click();
-      await page.getByRole('menuitem', { name: 'el9' }).click();
+      await page.getByRole('menuitem', { name: 'RHEL 9' }).click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
       await expect(
         page.getByRole('heading', { name: 'Additional Red Hat repositories', exact: true }),

_playwright-tests/Integration/InstallUploadRepoContent.spec.ts

@@ -89,7 +89,7 @@ test.describe('Install Upload Repo Content', () => {
       await page.getByRole('button', { name: 'filter architecture' }).click();
       await page.getByRole('menuitem', { name: 'x86_64' }).click();
       await page.getByRole('button', { name: 'filter OS version' }).click();
-      await page.getByRole('menuitem', { name: 'el9' }).click();
+      await page.getByRole('menuitem', { name: 'RHEL 9' }).click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
       await expect(
         page.getByRole('heading', { name: 'Additional Red Hat repositories', exact: true }),

_playwright-tests/Integration/RegisterAndAssignSystemViaAPI.spec.ts

@@ -29,7 +29,7 @@ test.describe('Register and assign template to systems via API', () => {
       await page.getByRole('button', { name: 'filter architecture' }).click();
       await page.getByRole('menuitem', { name: 'x86_64' }).click();
       await page.getByRole('button', { name: 'filter OS version' }).click();
-      await page.getByRole('menuitem', { name: 'el9' }).click();
+      await page.getByRole('menuitem', { name: 'RHEL 9' }).click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
 
       await expect(

_playwright-tests/UI/SnapshotRepo.spec.ts

@@ -165,7 +165,7 @@ test.describe('Snapshot Repositories', () => {
       await page.getByRole('button', { name: 'filter architecture' }).click();
       await page.getByRole('menuitem', { name: 'aarch64' }).click();
       await page.getByRole('button', { name: 'filter OS version' }).click();
-      await page.getByRole('menuitem', { name: 'el9' }).click();
+      await page.getByRole('menuitem', { name: 'RHEL 9' }).click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
       const modalPage = page.getByTestId('add_template_modal');
       const rowRHELRepo = await getRowByNameOrUrl(modalPage, smallRHRepo);

_playwright-tests/UI/TemplateCRUD.spec.ts

@@ -71,7 +71,7 @@ test.describe('Templates CRUD', () => {
       await page.getByRole('button', { name: 'filter architecture' }).click();
       await page.getByRole('menuitem', { name: 'aarch64' }).click();
       await page.getByRole('button', { name: 'filter OS version' }).click();
-      await page.getByRole('menuitem', { name: 'el9' }).click();
+      await page.getByRole('menuitem', { name: 'RHEL 9' }).click();
       await page.getByRole('button', { name: 'Next', exact: true }).click();
       const modalPage = page.getByTestId('add_template_modal');
       const rowRHELRepo = await getRowByNameOrUrl(modalPage, smallRHRepo);

src/Hooks/useDistributionDetails.tsx

@@ -0,0 +1,104 @@
+import { useCallback, useMemo } from 'react';
+import { useRepositoryParams } from 'services/Content/ContentQueries';
+import { toRhelDisplayName } from '../helpers';
+import {
+  getMinorVersionsForCurrentMajor,
+  EXTENDED_SUPPORT_FEATURES,
+} from '../Pages/Templates/TemplatesTable/components/templateHelpers';
+
+export default function useDistributionDetails() {
+  const {
+    isLoading,
+    error,
+    isError,
+    data: {
+      distribution_versions: distVersions,
+      distribution_arches: distArches,
+      distribution_minor_versions: distMinorVersions,
+      extended_release_features: extendedReleaseFeatures,
+    } = {
+      distribution_versions: [],
+      distribution_arches: [],
+      distribution_minor_versions: [],
+      extended_release_features: [],
+    },
+  } = useRepositoryParams();
+
+  const labelToName: Record<string, string> = useMemo(() => {
+    const result = {};
+    distArches.forEach(({ name, label }) => {
+      result[label] = name;
+    });
+    distVersions.forEach(({ name, label }) => {
+      result[label] = name;
+    });
+    return result;
+  }, [distVersions, distArches]);
+
+  const archesDisplay = useCallback(
+    (arch: string = '') => labelToName[arch] || arch,
+    [labelToName],
+  );
+
+  /**
+   * Converts an OS label (e.g., "9") or array of labels to a user-friendly display string (e.g., "RHEL 9" or "RHEL 8, RHEL 9").
+   */
+  const versionDisplay = useCallback(
+    (version?: string | string[]): string => {
+      if (!version) return '';
+      const versions = Array.isArray(version) ? version : [version];
+      const displayNames = versions
+        .map((label) => {
+          if (!Object.keys(labelToName).includes(label)) return undefined;
+          return toRhelDisplayName(labelToName[label]);
+        })
+        .filter(Boolean);
+      return displayNames.join(', ');
+    },
+    [labelToName],
+  );
+
+  const getMinorVersionName = useCallback(
+    (majorVersion?: string, minorVersion?: string) => {
+      const minorVersions = getMinorVersionsForCurrentMajor(majorVersion, distMinorVersions);
+      const name = minorVersions?.find((distribution) => distribution.label === minorVersion)?.name;
+      return name ? toRhelDisplayName(name) : '';
+    },
+    [distMinorVersions],
+  );
+
+  const getStreamName = useCallback(
+    (stream?: string) => {
+      const name = extendedReleaseFeatures.find(({ label }) => label === stream)?.name;
+      return name ? name : '';
+    },
+    [extendedReleaseFeatures],
+  );
+
+  const getStreamAvailability = useCallback(
+    (majorVersion: string) => {
+      const relevantMinors = distMinorVersions.filter(({ major }) => major === majorVersion);
+      return EXTENDED_SUPPORT_FEATURES.map((feature) =>
+        relevantMinors.some(({ feature_names }) => feature_names?.includes(feature)),
+      ) as [boolean, boolean];
+    },
+    [distMinorVersions],
+  );
+
+  const isExtendedSupportAvailable = useMemo(
+    () => !!extendedReleaseFeatures?.length,
+    [extendedReleaseFeatures],
+  );
+
+  return {
+    isLoading,
+    error,
+    isError,
+    archesDisplay,
+    versionDisplay,
+    getStreamName,
+    getMinorVersionName,
+    getStreamAvailability,
+    isExtendedSupportAvailable,
+  };
+}

src/Pages/Repositories/ContentListTable/ContentListTable.tsx

@@ -34,7 +34,7 @@ import {
   Tooltip,
   TooltipPosition,
 } from '@patternfly/react-core';
-import useArchVersion from 'Hooks/useArchVersion';
+import useDistributionDetails from '../../../Hooks/useDistributionDetails';
 import dayjs from 'dayjs';
 import { useSearchParams, useNavigate, Outlet, useOutletContext } from 'react-router-dom';
 import Hide from 'components/Hide/Hide';
@@ -190,7 +190,7 @@ const ContentListTable = () => {
     versionDisplay,
     isError: repositoryParamsIsError,
     error: repositoryParamsError,
-  } = useArchVersion();
+  } = useDistributionDetails();
 
   // Column configuration combining display names and sort attributes
   // Selection is handled by DataView selection system, not individual columns

src/Pages/Repositories/ContentListTable/hooks/useContentListFilters.ts

@@ -9,6 +9,7 @@ import { REPOSITORY_PARAMS_KEY } from '../../../../services/Content/ContentQueri
 import { QueryClient } from 'react-query';
 import useDebounce from '../../../../Hooks/useDebounce';
 import { useDataViewFilters } from '@patternfly/react-data-view';
+import { toRhelDisplayName } from '../../../../helpers';
 
 // Mapping from display names to backend API values
 const StatusDisplayMap = {
@@ -57,7 +58,7 @@ export const useContentListFilters = (queryClient: QueryClient) => {
       distribution_versions.map(
         (nameLabel: NameLabel) =>
           ({
-            label: nameLabel.name,
+            label: toRhelDisplayName(nameLabel.name),
             value: nameLabel.label,
             ['data-ouia-component-id']: `filter_${nameLabel.name}`,
           }) as unknown as DataViewFilterOption,

src/Pages/Repositories/PopularRepositoriesTable/PopularRepositoriesTable.tsx

@@ -49,7 +49,7 @@ import { AddRepo } from './components/AddRepo';
 
 import { DELETE_ROUTE } from 'Routes/constants';
 import { Outlet, useNavigate, useOutletContext } from 'react-router-dom';
-import useArchVersion from 'Hooks/useArchVersion';
+import useDistributionDetails from '../../../Hooks/useDistributionDetails';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 const useStyles = createUseStyles({
@@ -114,7 +114,7 @@ const PopularRepositoriesTable = () => {
     isLoading: repositoryParamsLoading,
     isError: repositoryParamsIsError,
     error: repositoryParamsError,
-  } = useArchVersion();
+  } = useDistributionDetails();
 
   const onDropdownToggle = () => {
     setIsActionOpen((prev) => !prev);

src/Pages/Templates/TemplateDetails/TemplateDetails.test.tsx

@@ -21,18 +21,18 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-jest.mock('Hooks/useArchVersion', () => () => ({
+jest.mock('../../../Hooks/useDistributionDetails', () => () => ({
   isError: false,
   isLoading: false,
   archesDisplay: () => 'x86_64',
-  versionDisplay: () => 'Rhel9',
+  versionDisplay: () => 'RHEL 9',
 }));
 
 it('expect TemplateDetails to render correctly', () => {
   const { queryByText, queryAllByText } = render(<TemplateDetails />);
 
   expect(queryByText('TemplateDetailsTabs')).toBeInTheDocument();
   expect(queryByText('x86_64')).toBeInTheDocument();
-  expect(queryByText('Rhel9')).toBeInTheDocument();
+  expect(queryByText('RHEL 9')).toBeInTheDocument();
   expect(queryAllByText(defaultTemplateItem.name)).toHaveLength(2);
 });

src/Pages/Templates/TemplateDetails/TemplateDetails.tsx

@@ -18,7 +18,7 @@ import { createUseStyles } from 'react-jss';
 import { TEMPLATES_ROUTE } from 'Routes/constants';
 import useRootPath from 'Hooks/useRootPath';
 import { useFetchTemplate } from 'services/Templates/TemplateQueries';
-import useArchVersion from 'Hooks/useArchVersion';
+import useDistributionDetails from '../../../Hooks/useDistributionDetails';
 import DetailItem from './components/DetaiItem';
 import Hide from 'components/Hide/Hide';
 import { formatDateDDMMMYYYY } from 'helpers';
@@ -73,7 +73,7 @@ export default function TemplateDetails() {
     error: repositoryParamsError,
     archesDisplay,
     versionDisplay,
-  } = useArchVersion();
+  } = useDistributionDetails();
 
   // Error is caught in the wrapper component
   if (isError) throw error;
@@ -105,7 +105,7 @@ export default function TemplateDetails() {
               <Title headingLevel='h1'>{data?.name}</Title>
               <LabelGroup className={classes.labelGroup}>
                 <Label isCompact color='blue'>
-                  {data?.version ? versionDisplay([data?.version]) : ''}
+                  {versionDisplay(data?.version)}
                 </Label>
                 <Label isCompact color='blue'>
                   {archesDisplay(data?.arch)}

src/Pages/Templates/TemplatesTable/TemplatesTable.tsx

@@ -37,7 +37,7 @@ import { formatDateDDMMMYYYY, formatDateUTC } from 'helpers';
 import Header from 'components/Header/Header';
 import useRootPath from 'Hooks/useRootPath';
 import { DELETE_ROUTE, TEMPLATES_ROUTE } from 'Routes/constants';
-import useArchVersion from 'Hooks/useArchVersion';
+import useDistributionDetails from '../../../Hooks/useDistributionDetails';
 import { useTemplateList } from 'services/Templates/TemplateQueries';
 import StatusIcon from './components/StatusIcon';
 import { ExclamationTriangleIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
@@ -189,7 +189,7 @@ const TemplatesTable = () => {
     isError: repositoryParamsIsError,
     archesDisplay,
     versionDisplay,
-  } = useArchVersion();
+  } = useDistributionDetails();
 
   const actionTakingPlace = isLoading || isFetching || repositoryParamsLoading;
 
@@ -344,7 +344,7 @@ const TemplatesTable = () => {
                       </Td>
                       <Td>{description}</Td>
                       <Td>{archesDisplay(arch)}</Td>
-                      <Td>{versionDisplay([version])}</Td>
+                      <Td>{versionDisplay(version)}</Td>
                       <Td>
                         <ConditionalTooltip
                           show={!use_latest}