EDM-3861: Quick start guide (2/2)

libs/ui-components/src/components/EnrollmentRequest/EnrollmentRequestList.tsx

@@ -28,7 +28,7 @@ const EnrollmentRequestEmptyState = () => {
   return <ResourceListEmptyState icon={MicrochipIcon} titleText={t('No enrollment requests here!')} />;
 };
 
-const getEnrollmentColumns = (t: TFunction) => [
+export const getEnrollmentRequestTableColumns = (t: TFunction) => [
   {
     name: t('Alias'),
   },
@@ -57,7 +57,7 @@ const EnrollmentRequestList = ({ refetchDevices, isStandalone }: EnrollmentReque
   const { remove } = useFetch();
   const [search, setSearch] = React.useState<string>('');
 
-  const enrollmentColumns = React.useMemo(() => getEnrollmentColumns(t), [t]);
+  const enrollmentColumns = React.useMemo(() => getEnrollmentRequestTableColumns(t), [t]);
   const [pendingEnrollments, isLoading, error, refetch, pagination] = usePendingEnrollments(search);
   const itemCount = pendingEnrollments.length;
 

libs/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/steps/RegistrationStep.tsx

@@ -23,7 +23,7 @@ import { BindingType } from '@flightctl/types/imagebuilder';
 import { type ImageBuildFormValues } from '../types';
 import { PUBLIC_KEY_MAX_LENGTH } from '../../../form/validations';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import { useAppContext } from '../../../../hooks/useAppContext';
+import { useProductName } from '../../../../hooks/useProductName';
 import FlightCtlForm from '../../../form/FlightCtlForm';
 import TextField from '../../../form/TextField';
 import UploadField from '../../../form/UploadField';
@@ -43,9 +43,8 @@ export const isRegistrationStepValid = (errors: FormikErrors<ImageBuildFormValue
 
 const RegistrationStep = () => {
   const { t } = useTranslation();
-  const { settings } = useAppContext();
   const { values, setFieldValue } = useFormikContext<ImageBuildFormValues>();
-  const productName = settings.isRHEM ? t('Red Hat Edge Manager') : t('Flight Control');
+  const productName = useProductName();
 
   const isEarlyBindingSelected = values.bindingType === BindingType.BindingTypeEarly;
 

libs/ui-components/src/components/ImageBuilds/CreateImageBuildWizard/steps/ReviewStep.tsx

@@ -20,7 +20,7 @@ import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circl
 
 import { BindingType } from '@flightctl/types/imagebuilder';
 import { useTranslation } from '../../../../hooks/useTranslation';
-import { useAppContext } from '../../../../hooks/useAppContext';
+import { useProductName } from '../../../../hooks/useProductName';
 import { type ImageBuildFormValues, type ImageBuildWizardError } from '../types';
 import { getImageReference } from '../../../../utils/imageBuilds';
 import { getExportFormatLabel } from '../../../../utils/imageBuilds';
@@ -39,9 +39,8 @@ type ReviewStepProps = {
 
 const ReviewStep = ({ error }: ReviewStepProps) => {
   const { t } = useTranslation();
-  const { settings } = useAppContext();
   const { values } = useFormikContext<ImageBuildFormValues>();
-  const productName = settings.isRHEM ? t('Red Hat Edge Manager') : t('Flight Control');
+  const productName = useProductName();
   const { ociRegistries } = useOciRegistriesContext();
 
   const srcImageReference = React.useMemo(

libs/ui-components/src/components/ImageBuilds/ImageBuildDetails/ImageBuildDetailsTab.tsx

@@ -28,7 +28,7 @@ import ImagePromotionStatus from '../../ImagePromotion/ImagePromotionStatus';
 import { getDateDisplay } from '../../../utils/dates';
 import { getExportFormatLabel, getImageReference } from '../../../utils/imageBuilds';
 import { useTranslation } from '../../../hooks/useTranslation';
-import { useAppContext } from '../../../hooks/useAppContext';
+import { useProductName } from '../../../hooks/useProductName';
 import DetailsPageCard from '../../DetailsPage/DetailsPageCard';
 import { CERTIFICATE_VALIDITY_IN_YEARS } from '../../../constants';
 import { type ImageBuildWithExports } from '../../../types/extraTypes';
@@ -203,9 +203,8 @@ const ImagePromotionsCard = ({
 
 const ImageBuildDetailsTab = ({ imageBuild }: { imageBuild: ImageBuildWithExports }) => {
   const { t } = useTranslation();
-  const { settings } = useAppContext();
   const { checkPermissions } = usePermissionsContext();
-  const productName = settings.isRHEM ? t('Red Hat Edge Manager') : t('Flight Control');
+  const productName = useProductName();
   const [canListPromotions, canEditPromotions, canDeletePromotions] = checkPermissions(detailsPermissions);
   const srcRepositoryName = imageBuild.spec.source.repository;
   const dstRepositoryName = imageBuild.spec.destination.repository;

libs/ui-components/src/components/Masthead/CommandLineToolsPage.tsx

@@ -14,7 +14,7 @@ import {
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 import { useTranslation } from '../../hooks/useTranslation';
-import { useAppContext } from '../../hooks/useAppContext';
+import { useProductName } from '../../hooks/useProductName';
 import { type CliArtifactsDisplayResponse, useCliArtifacts } from '../../hooks/useCliArtifacts';
 import { type CliArtifact, CliArtifactTool } from '../../types/extraTypes';
 import { getArtifactDownloadLabel, getArtifactUrl } from '../../utils/cliArtifacts';
@@ -145,10 +145,9 @@ const CommandLineToolsContent = ({
 
 const CommandLineToolsPage = () => {
   const { t } = useTranslation();
-  const { settings } = useAppContext();
   const { loading, loadError, hasArtifactsEnabled, artifactsResponse } = useCliArtifacts();
 
-  const productName = settings.isRHEM ? t('Red Hat Edge Manager') : t('Flight Control');
+  const productName = useProductName();
 
   return (
     <PageSection hasBodyWrapper={false}>

libs/ui-components/src/components/QuickStart/QuickStart.css

@@ -1,7 +1,25 @@
-.fctl-quickstart-card {
+/* Quick start panel on the Overview page */
+.fctl-quickstart-panel {
   margin-bottom: var(--pf-t--global--spacer--xl);
 }
 
-.fctl-quickstart-card__expanded {
+.fctl-quickstart-panel__expanded {
   border-top: 3px solid var(--pf-t--global--color--brand--default, #06c);
 }
+
+/* Individual phase cards in the quick start panel */
+.fctl-quickstart-phase {
+  width: 100%;
+}
+
+.fctl-quickstart-phase.fctl-quickstart-phase--locked {
+  opacity: 65%;
+}
+
+.fctl-quickstart-phase .fctl-quickstart-phase__icon .pf-v6-c-icon__content {
+  --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--brand--default);
+}
+
+.fctl-quickstart-phase.fctl-quickstart-phase--locked .pf-v6-c-icon__content {
+  --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--disabled);
+}