add support for shared EPEL repos

src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx

@@ -23,6 +23,7 @@ import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 
 import { BulkSelect } from './components/BulkSelect';
+import CommunityRepositoryLabel from './components/CommunityRepositoryLabel';
 import Empty from './components/Empty';
 import { Error } from './components/Error';
 import { Loading } from './components/Loading';
@@ -63,6 +64,7 @@ import {
 } from '../../../../store/wizardSlice';
 import { releaseToVersion } from '../../../../Utilities/releaseToVersion';
 import useDebounce from '../../../../Utilities/useDebounce';
+import { useFlag } from '../../../../Utilities/useGetEnvironment';
 
 const Repositories = () => {
   const dispatch = useAppDispatch();
@@ -89,6 +91,14 @@ const Repositories = () => {
   >('toggle-group-all');
   const [isTemplateSelected, setIsTemplateSelected] = useState(false);
 
+  const isSharedEPELEnabled = useFlag('image-builder.shared-epel.enabled');
+
+  const originParam = useMemo(() => {
+    const origins = [ContentOrigin.CUSTOM];
+    if (isSharedEPELEnabled) origins.push(ContentOrigin.COMMUNITY);
+    return origins.join(',');
+  }, [isSharedEPELEnabled]);
+
   const debouncedFilterValue = useDebounce(filterValue);
 
   const { data: repositoryParameters } = useListRepositoryParametersQuery();
@@ -144,7 +154,7 @@ const Repositories = () => {
     {
       availableForArch: arch,
       availableForVersion: version,
-      origin: ContentOrigin.CUSTOM,
+      origin: originParam,
       limit: 999, // O.O Oh dear, if possible this whole call should be removed
       offset: 0,
       uuid: [...initialSelectedState].join(','),
@@ -173,7 +183,7 @@ const Repositories = () => {
       availableForArch: arch,
       availableForVersion: version,
       contentType: 'rpm',
-      origin: ContentOrigin.CUSTOM,
+      origin: originParam,
       limit: perPage,
       offset: perPage * (page - 1),
       search: debouncedFilterValue,
@@ -652,6 +662,22 @@ const Repositories = () => {
                           {name}
                           {origin === ContentOrigin.UPLOAD ? (
                             <UploadRepositoryLabel />
+                          ) : origin === ContentOrigin.COMMUNITY ? (
+                            <>
+                              <CommunityRepositoryLabel />
+                              <br />
+                              <Button
+                                component='a'
+                                target='_blank'
+                                variant='link'
+                                icon={<ExternalLinkAltIcon />}
+                                iconPosition='right'
+                                isInline
+                                href={url}
+                              >
+                                {url}
+                              </Button>
+                            </>
                           ) : (
                             <>
                               <br />

src/Components/CreateImageWizard/steps/Repositories/components/CommunityRepositoryLabel.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Label, Tooltip } from '@patternfly/react-core';
+import { RepositoryIcon } from '@patternfly/react-icons';
+
+import ManageRepositoriesButton from './ManageRepositoriesButton';
+
+const CommunityRepositoryLabel = () => {
+  return (
+    <Tooltip
+      content={
+        <>
+          Community repository: This EPEL repository is shared across
+          organizations.
+          <ManageRepositoriesButton />
+        </>
+      }
+    >
+      <Label
+        variant='outline'
+        isCompact
+        icon={<RepositoryIcon />}
+        style={{ marginLeft: '8px' }}
+      >
+        Community
+      </Label>
+    </Tooltip>
+  );
+};
+
+export default CommunityRepositoryLabel;

src/Components/CreateImageWizard/steps/Review/ReviewStepTables.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Alert,
@@ -8,6 +8,7 @@ import {
   Spinner,
 } from '@patternfly/react-core';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
+import { useFlag } from '@unleash/proxy-client-react';
 
 import { ContentOrigin } from '../../../../constants';
 import {
@@ -33,12 +34,20 @@ type repoPropType = {
 };
 
 const RepoName = ({ repoUuid }: repoPropType) => {
+  const isSharedEPELEnabled = useFlag('image-builder.shared-epel.enabled');
+
+  const originParam = useMemo(() => {
+    const origins = [ContentOrigin.ALL];
+    if (isSharedEPELEnabled) origins.push(ContentOrigin.COMMUNITY);
+    return origins.join(',');
+  }, [isSharedEPELEnabled]);
+
   const { data, isSuccess, isFetching, isError } = useListRepositoriesQuery(
     {
       // @ts-ignore if repoUrl is undefined the query is going to get skipped, so it's safe to ignore the linter here
       uuid: repoUuid ?? '',
       contentType: 'rpm',
-      origin: ContentOrigin.ALL,
+      origin: originParam,
     },
     { skip: !repoUuid },
   );
@@ -135,6 +144,14 @@ export const SnapshotTable = ({
     { refetchOnMountOrArgChange: true, skip: template === '' },
   );
 
+  const isSharedEPELEnabled = useFlag('image-builder.shared-epel.enabled');
+
+  const originParam = useMemo(() => {
+    const origins = [ContentOrigin.REDHAT + ',' + ContentOrigin.CUSTOM];
+    if (isSharedEPELEnabled) origins.push(ContentOrigin.COMMUNITY);
+    return origins.join(',');
+  }, [isSharedEPELEnabled]);
+
   const { data, isSuccess, isLoading, isError } = useListRepositoriesQuery({
     uuid:
       snapshotForDate.length > 0
@@ -142,7 +159,7 @@ export const SnapshotTable = ({
         : template && templateData && templateData.repository_uuids
           ? templateData.repository_uuids.join(',')
           : '',
-    origin: ContentOrigin.REDHAT + ',' + ContentOrigin.CUSTOM, // Make sure to show both redhat and external
+    origin: originParam, // Make sure to show redhat, external, and shared epel (if enabled)
   });
 
   const isAfterSet = new Set(

src/Utilities/useGetEnvironment.ts

@@ -35,6 +35,7 @@ export const useFlagWithEphemDefault = (
 const onPremFlag = (flag: string): boolean => {
   switch (flag) {
     case 'image-builder.templates.enabled':
+    case 'image-builder.shared-epel.enabled':
       return true;
     default:
       return false;

src/constants.ts

@@ -295,6 +295,7 @@ export enum ContentOrigin {
   'REDHAT' = 'red_hat',
   'EXTERNAL' = 'external', // custom only
   'UPLOAD' = 'upload', // custom upload repo
+  'COMMUNITY' = 'community', // shared epel repos
   'CUSTOM' = 'external,upload',
   'ALL' = 'red_hat,external,upload',
 }