@flightctl/ui-components 1.1.0-rc1 → 1.1.0-rc4

package/src/components/ImageBuilds/ImageExportCards.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TFunction } from 'react-i18next';
 import {
   Alert,
   AlertActionCloseButton,
@@ -10,9 +11,14 @@ import {
   CardHeader,
   Content,
   ContentVariants,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
   Flex,
   FlexItem,
   Icon,
+  MenuToggle,
+  MenuToggleElement,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
@@ -20,17 +26,91 @@ import { VirtualMachineIcon } from '@patternfly/react-icons/dist/js/icons/virtua
 import { CloudSecurityIcon } from '@patternfly/react-icons/dist/js/icons/cloud-security-icon';
 import { ServerGroupIcon } from '@patternfly/react-icons/dist/js/icons/server-group-icon';
 import { BuilderImageIcon } from '@patternfly/react-icons/dist/js/icons/builder-image-icon';
+import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 
 import { ExportFormatType, ImageExport, ImageExportConditionReason } from '@flightctl/types/imagebuilder';
 import { getExportFormatDescription, getExportFormatLabel, getImageExportStatusReason } from '../../utils/imageBuilds';
 import { getDateDisplay } from '../../utils/dates';
 import { useTranslation } from '../../hooks/useTranslation';
+import WithTooltip from '../common/WithTooltip';
+import ConfirmImageExportActionModal, {
+  ConfirmImageExportAction,
+} from './ConfirmImageExportModal/ConfirmImageExportModal';
 import { ImageExportStatusDisplay } from './ImageBuildAndExportStatus';
-import { useAppContext } from '../../hooks/useAppContext';
-import { ROUTE } from '../../hooks/useNavigate';
 
 import './ImageExportCards.css';
 
+export type ImageExportAction = 'cancel' | 'delete' | 'viewLogs' | 'download' | 'retry' | 'rebuild' | 'createExport';
+
+const getActionsForStatus = (
+  format: ExportFormatType,
+  exportReason: ImageExportConditionReason | undefined,
+  actionPermissions: ImageExportAction[],
+): ImageExportAction[] => {
+  const actions: ImageExportAction[] = [];
+  switch (exportReason) {
+    case ImageExportConditionReason.ImageExportConditionReasonPending:
+      actions.push('cancel', 'delete');
+      break;
+    case ImageExportConditionReason.ImageExportConditionReasonConverting:
+    case ImageExportConditionReason.ImageExportConditionReasonPushing:
+      actions.push('cancel', 'viewLogs');
+      break;
+    case ImageExportConditionReason.ImageExportConditionReasonCompleted:
+      if (format !== ExportFormatType.ExportFormatTypeQCOW2DiskContainer) {
+        actions.push('download');
+      }
+      actions.push('viewLogs', 'delete', 'rebuild');
+      break;
+    case ImageExportConditionReason.ImageExportConditionReasonFailed:
+    case ImageExportConditionReason.ImageExportConditionReasonCanceled:
+      actions.push('retry', 'viewLogs', 'delete');
+      break;
+    case ImageExportConditionReason.ImageExportConditionReasonCanceling:
+      actions.push('viewLogs');
+      break;
+    default:
+      actions.push('createExport');
+      break;
+  }
+  return actions.filter((action) => actionPermissions.includes(action));
+};
+
+const getErrorTitle = (t: TFunction, action: ImageExportAction) => {
+  switch (action) {
+    case 'createExport':
+      return t("We couldn't export your image");
+    case 'download':
+      return t("We couldn't download your image");
+    case 'cancel':
+      return t("We couldn't cancel your image export");
+    case 'delete':
+      return t("We couldn't delete your image export");
+    default:
+      return t("We couldn't perform the action you requested");
+  }
+};
+
+const getActionTitle = (t: TFunction, action: ImageExportAction, inProgress: boolean) => {
+  switch (action) {
+    case 'cancel':
+      return inProgress ? t('Canceling...') : t('Cancel');
+    case 'delete':
+      return inProgress ? t('Deleting...') : t('Delete');
+    case 'viewLogs':
+      return t('View logs');
+    case 'download':
+      return inProgress ? t('Downloading...') : t('Download');
+    case 'retry':
+      return inProgress ? t('Retrying...') : t('Retry');
+    case 'rebuild':
+      return inProgress ? t('Rebuilding...') : t('Rebuild');
+    case 'createExport':
+      return inProgress ? t('Exporting...') : t('Export image');
+    default:
+      return t('Actions');
+  }
+};
 const iconMap: Record<ExportFormatType, React.ReactElement> = {
   [ExportFormatType.ExportFormatTypeVMDK]: <VirtualMachineIcon />,
   [ExportFormatType.ExportFormatTypeQCOW2]: <CloudSecurityIcon />,
@@ -39,17 +119,14 @@ const iconMap: Record<ExportFormatType, React.ReactElement> = {
 };
 
 export type ImageExportFormatCardProps = {
-  imageBuildId: string;
   imageReference: string | undefined;
   format: ExportFormatType;
-  error?: { message: string; mode: 'export' | 'download' } | null;
   imageExport?: ImageExport;
-  onExportImage: (format: ExportFormatType) => void;
-  onDownload: (format: ExportFormatType) => void;
+  actionPermissions: ImageExportAction[];
+  activeAction: ImageExportAction | undefined;
+  onCardAction: ({ format, action }: { format: ExportFormatType; action: ImageExportAction }) => void;
+  error?: { message: string; action: ImageExportAction } | null;
   onDismissError: VoidFunction;
-  isCreating: boolean;
-  isDownloading?: boolean;
-  isDisabled?: boolean;
 };
 
 type SelectImageBuildExportCardProps = {
@@ -60,11 +137,8 @@ type SelectImageBuildExportCardProps = {
 
 export const SelectImageBuildExportCard = ({ format, isChecked, onToggle }: SelectImageBuildExportCardProps) => {
   const { t } = useTranslation();
-
-  const title = getExportFormatLabel(t, format);
-  const description = getExportFormatDescription(t, format);
-
   const id = `export-format-${format}`;
+
   return (
     <Card id={id} isSelectable isSelected={isChecked} className="fctl-imageexport-card">
       <CardHeader
@@ -81,43 +155,91 @@ export const SelectImageBuildExportCard = ({ format, isChecked, onToggle }: Sele
           </FlexItem>
           <FlexItem>
             <Content>
-              <Content component={ContentVariants.h2}>{title}</Content>
+              <Content component={ContentVariants.h2}>{getExportFormatLabel(t, format)}</Content>
             </Content>
           </FlexItem>
         </Flex>
       </CardHeader>
-      <CardBody>{description}</CardBody>
+      <CardBody>{getExportFormatDescription(t, format)}</CardBody>
     </Card>
   );
 };
 
 export const ViewImageBuildExportCard = ({
-  imageBuildId,
   format,
   imageExport,
   imageReference,
-  onExportImage,
-  onDownload,
-  onDismissError,
-  isCreating = false,
-  isDownloading = false,
-  isDisabled = false,
+  actionPermissions,
+  onCardAction,
+  activeAction,
   error,
+  onDismissError,
 }: ImageExportFormatCardProps) => {
   const { t } = useTranslation();
-  const {
-    router: { useNavigate: useRouterNavigate, appRoutes },
-  } = useAppContext();
-  const routerNavigate = useRouterNavigate();
+  const [actionsDropdownOpen, setActionsDropdownOpen] = React.useState(false);
+  const [pendingConfirmAction, setPendingConfirmAction] = React.useState<ConfirmImageExportAction>();
   const exists = !!imageExport;
-
   const exportReason = exists ? getImageExportStatusReason(imageExport) : undefined;
-  const title = getExportFormatLabel(t, format);
-  const description = getExportFormatDescription(t, format);
 
-  const handleViewLogs = () => {
-    const baseRoute = appRoutes[ROUTE.IMAGE_BUILD_DETAILS];
-    routerNavigate(`${baseRoute}/${imageBuildId}/logs`);
+  const handleCardAction = (action: ImageExportAction) => {
+    if (
+      action === 'cancel' ||
+      action === 'delete' ||
+      (action === 'rebuild' && exportReason === ImageExportConditionReason.ImageExportConditionReasonCompleted)
+    ) {
+      setPendingConfirmAction(action);
+    } else {
+      onCardAction({ format, action });
+    }
+  };
+
+  const handleConfirmAction = (isConfirmed: boolean) => {
+    if (pendingConfirmAction && isConfirmed) {
+      onCardAction({ format, action: pendingConfirmAction });
+    }
+    setPendingConfirmAction(undefined);
+  };
+
+  const { primaryAction, remainingActions } = React.useMemo(() => {
+    const allActions = getActionsForStatus(format, exportReason, actionPermissions);
+    const primaryAction = allActions.length > 0 ? allActions[0] : undefined;
+    const remainingActions = allActions.length > 1 ? allActions.slice(1) : [];
+    return { primaryAction, remainingActions };
+  }, [format, exportReason, actionPermissions]);
+
+  const renderActionButton = (exportAction: ImageExportAction, variant: 'primary' | 'secondary' = 'secondary') => {
+    const isDisabled = activeAction !== undefined;
+    const isLoading = exportAction === activeAction;
+
+    return (
+      <Button
+        variant={variant}
+        onClick={() => handleCardAction(exportAction)}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+      >
+        {getActionTitle(t, exportAction, isLoading)}
+      </Button>
+    );
+  };
+
+  const renderDropdownItem = (exportAction: ImageExportAction) => {
+    const isDisabled = activeAction !== undefined;
+    const isLoading = exportAction === activeAction;
+
+    return (
+      <DropdownItem
+        key={exportAction}
+        onClick={() => {
+          setActionsDropdownOpen(false);
+          handleCardAction(exportAction);
+        }}
+        isDisabled={isDisabled}
+        isLoading={isLoading}
+      >
+        {getActionTitle(t, exportAction, false)}
+      </DropdownItem>
+    );
   };
 
   return (
@@ -147,58 +269,53 @@ export const ViewImageBuildExportCard = ({
             </Flex>
           </FlexItem>
           <FlexItem>
-            <Content>
-              <Content component={ContentVariants.h2}>{title}</Content>
-            </Content>
+            <Flex gap={{ default: 'gapSm' }}>
+              <FlexItem>
+                <Content component={ContentVariants.h2}>{getExportFormatLabel(t, format)}</Content>
+              </FlexItem>
+              {imageExport?.metadata?.name && (
+                <FlexItem>
+                  <WithTooltip showTooltip content={imageExport.metadata.name}>
+                    <InfoCircleIcon />
+                  </WithTooltip>
+                </FlexItem>
+              )}
+            </Flex>
           </FlexItem>
         </Flex>
       </CardHeader>
-      <CardBody>{description}</CardBody>
+      <CardBody>{getExportFormatDescription(t, format)}</CardBody>
       <CardFooter>
         <Stack hasGutter>
           <StackItem>
-            <Flex>
-              {exportReason === ImageExportConditionReason.ImageExportConditionReasonFailed && (
-                <FlexItem>
-                  <Button
-                    variant="primary"
-                    onClick={() => onExportImage(format)}
-                    isDisabled={isDisabled}
-                    isLoading={isCreating}
-                  >
-                    {t('Retry')}
-                  </Button>
-                </FlexItem>
-              )}
-              {exportReason === ImageExportConditionReason.ImageExportConditionReasonCompleted && (
-                <FlexItem>
-                  <Button
-                    variant="secondary"
-                    onClick={() => onDownload(format)}
-                    isDisabled={isDisabled || isDownloading}
-                    isLoading={isDownloading}
-                  >
-                    {isDownloading ? t('Downloading...') : t('Download')}
-                  </Button>
-                </FlexItem>
-              )}
-              <FlexItem>
-                {exists ? (
-                  <Button variant="secondary" onClick={handleViewLogs}>
-                    {t('View logs')}
-                  </Button>
-                ) : (
-                  <Button
-                    variant="secondary"
-                    onClick={() => onExportImage(format)}
-                    isDisabled={isDisabled}
-                    isLoading={isCreating}
-                  >
-                    {t('Export image')}
-                  </Button>
+            {primaryAction && (
+              <Flex>
+                <FlexItem>{renderActionButton(primaryAction)}</FlexItem>
+                {remainingActions.length === 1 && <FlexItem>{renderActionButton(remainingActions[0])}</FlexItem>}
+                {remainingActions.length > 1 && (
+                  <FlexItem>
+                    <Dropdown
+                      isOpen={actionsDropdownOpen}
+                      onSelect={() => setActionsDropdownOpen(false)}
+                      onOpenChange={(isOpen: boolean) => setActionsDropdownOpen(isOpen)}
+                      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                        <MenuToggle
+                          ref={toggleRef}
+                          isExpanded={actionsDropdownOpen}
+                          onClick={() => setActionsDropdownOpen(!actionsDropdownOpen)}
+                          variant="secondary"
+                          isDisabled={activeAction !== undefined}
+                        >
+                          {t('Actions')}
+                        </MenuToggle>
+                      )}
+                    >
+                      <DropdownList>{remainingActions.map((actionKey) => renderDropdownItem(actionKey))}</DropdownList>
+                    </Dropdown>
+                  </FlexItem>
                 )}
-              </FlexItem>
-            </Flex>
+              </Flex>
+            )}
           </StackItem>
           <StackItem>
             <Content component={ContentVariants.small}>
@@ -209,9 +326,7 @@ export const ViewImageBuildExportCard = ({
             <AlertGroup isToast>
               <Alert
                 variant="danger"
-                title={
-                  error.mode === 'export' ? t("We couldn't export your image") : t("We couldn't download your image")
-                }
+                title={getErrorTitle(t, error.action)}
                 actionClose={<AlertActionCloseButton onClose={onDismissError} />}
               >
                 {t('Something went wrong on our end. Please review the error details and try again.')}
@@ -221,6 +336,9 @@ export const ViewImageBuildExportCard = ({
           )}
         </Stack>
       </CardFooter>
+      {pendingConfirmAction && (
+        <ConfirmImageExportActionModal action={pendingConfirmAction} onClose={handleConfirmAction} />
+      )}
     </Card>
   );
 };

package/src/components/Repository/CreateRepository/CreateRepositoryForm.css

@@ -3,5 +3,9 @@
 }
 
 .fctl-create-repo__adv-section--nested {
-    margin-left: 1.5rem;
+  margin-left: 1.5rem;
+}
+
+.fctl-create-repo__rs-checkbox {
+  --pf-v6-c-check__input--TranslateY: 0.75rem;
 }

package/src/components/Repository/CreateRepository/CreateRepositoryForm.tsx

@@ -5,6 +5,8 @@ import {
   Button,
   ButtonVariant,
   Checkbox,
+  Flex,
+  FlexItem,
   FormGroup,
   FormSection,
   Grid,
@@ -46,6 +48,7 @@ import TextField from '../../form/TextField';
 import FlightCtlForm from '../../form/FlightCtlForm';
 import { getDnsSubdomainValidations } from '../../form/validations';
 import { DEMO_REPOSITORY_URL } from '../../../hooks/useAppLinks';
+import WithTooltip from '../../common/WithTooltip';
 import { usePermissionsContext } from '../../common/PermissionsContext';
 import { RESOURCE, VERB } from '../../../types/rbac';
 
@@ -296,10 +299,17 @@ const RepositoryType = ({ isEdit }: { isEdit?: boolean }) => {
   );
 };
 
-export const RepositoryForm = ({ isEdit }: { isEdit?: boolean }) => {
+export const RepositoryForm = ({
+  isEdit,
+  accessModeDisabledReason,
+}: {
+  isEdit?: boolean;
+  accessModeDisabledReason?: string;
+}) => {
   const { t } = useTranslation();
   const { values } = useFormikContext<RepositoryFormValues>();
   const isOciRepo = values.repoType === RepoSpecType.RepoSpecTypeOci;
+  const isAccessModeDisabled = Boolean(accessModeDisabledReason);
 
   return (
     <>
@@ -353,24 +363,28 @@ export const RepositoryForm = ({ isEdit }: { isEdit?: boolean }) => {
             </Split>
           </FormGroup>
           <FormGroup label={t('Access mode')}>
-            <Split hasGutter>
-              <SplitItem>
-                <RadioField
-                  id="oci-access-read"
-                  name="ociConfig.accessMode"
-                  label={t('Read only')}
-                  checkedValue={OciRepoSpec.accessMode.READ}
-                />
-              </SplitItem>
-              <SplitItem>
-                <RadioField
-                  id="oci-access-readwrite"
-                  name="ociConfig.accessMode"
-                  label={t('Read and write')}
-                  checkedValue={OciRepoSpec.accessMode.READ_WRITE}
-                />
-              </SplitItem>
-            </Split>
+            <WithTooltip showTooltip={isAccessModeDisabled} content={accessModeDisabledReason}>
+              <Flex>
+                <FlexItem>
+                  <RadioField
+                    id="oci-access-read"
+                    name="ociConfig.accessMode"
+                    label={t('Read only')}
+                    checkedValue={OciRepoSpec.accessMode.READ}
+                    isDisabled={isAccessModeDisabled}
+                  />
+                </FlexItem>
+                <FlexItem>
+                  <RadioField
+                    id="oci-access-readwrite"
+                    name="ociConfig.accessMode"
+                    label={t('Read and write')}
+                    checkedValue={OciRepoSpec.accessMode.READ_WRITE}
+                    isDisabled={isAccessModeDisabled}
+                  />
+                </FlexItem>
+              </Flex>
+            </WithTooltip>
           </FormGroup>
         </FormSection>
       )}
@@ -380,12 +394,11 @@ export const RepositoryForm = ({ isEdit }: { isEdit?: boolean }) => {
 };
 
 type CreateRepositoryFormContentProps = React.PropsWithChildren &
-  Pick<CreateRepositoryFormProps, 'onClose'> & {
+  Pick<CreateRepositoryFormProps, 'onClose' | 'options'> & {
     isEdit: boolean;
-    isReadOnly: boolean;
   };
 
-const CreateRepositoryFormContent = ({ isEdit, isReadOnly, onClose, children }: CreateRepositoryFormContentProps) => {
+const CreateRepositoryFormContent = ({ isEdit, onClose, options, children }: CreateRepositoryFormContentProps) => {
   const { t } = useTranslation();
   const { values, setFieldValue, isValid, dirty, submitForm, isSubmitting } = useFormikContext<RepositoryFormValues>();
   const isSubmitDisabled = isSubmitting || !dirty || !isValid;
@@ -396,12 +409,20 @@ const CreateRepositoryFormContent = ({ isEdit, isReadOnly, onClose, children }:
   const showResourceSyncs = values.canUseResourceSyncs && values.repoType === RepoSpecType.RepoSpecTypeGit;
   return (
     <FlightCtlForm className="fctl-create-repo">
-      <fieldset disabled={isReadOnly}>
+      <fieldset disabled={options?.isReadOnly ?? false}>
         <Grid hasGutter span={8}>
-          <RepositoryForm isEdit={isEdit} />
+          <RepositoryForm
+            isEdit={isEdit}
+            accessModeDisabledReason={
+              options?.writeAccessOnly
+                ? t('Access mode must be set to read and write for this repository type')
+                : undefined
+            }
+          />
           {showResourceSyncs && canCreateRS && (
             <Checkbox
               id="use-resource-syncs"
+              className="fctl-create-repo__rs-checkbox"
               label={
                 <LabelWithHelperText
                   label={t('Use resource syncs')}
@@ -443,16 +464,17 @@ export type CreateRepositoryFormProps = {
     canUseResourceSyncs?: boolean;
     showRepoTypes?: boolean;
     allowedRepoTypes?: RepoSpecType[];
+    writeAccessOnly?: boolean;
   };
 };
 
-const CreateRepositoryForm: React.FC<CreateRepositoryFormProps> = ({
+const CreateRepositoryForm = ({
   repository,
   resourceSyncs,
   options,
   onClose,
   onSuccess,
-}) => {
+}: CreateRepositoryFormProps) => {
   const [errors, setErrors] = React.useState<string[]>();
   const { patch, remove, post } = useFetch();
   const { t } = useTranslation();
@@ -512,8 +534,9 @@ const CreateRepositoryForm: React.FC<CreateRepositoryFormProps> = ({
             setErrors([getErrorMessage(e)]);
           }
         } else {
+          const repoToCreate = getRepository(values);
           try {
-            const repo = await post<Repository>('repositories', getRepository(values));
+            const repo = await post<Repository>('repositories', repoToCreate);
             if (values.useResourceSyncs) {
               const resourceSyncPromises = values.resourceSyncs.map((rs) =>
                 post<ResourceSync>('resourcesyncs', getResourceSync(values.name, rs)),
@@ -531,9 +554,9 @@ const CreateRepositoryForm: React.FC<CreateRepositoryFormProps> = ({
         }
       }}
     >
-      <CreateRepositoryFormContent isEdit={!!repository} onClose={onClose} isReadOnly={!!options?.isReadOnly}>
+      <CreateRepositoryFormContent isEdit={!!repository} onClose={onClose} options={options}>
         {errors?.length && (
-          <Alert isInline variant="danger" title={t('An error occurred')}>
+          <Alert isInline variant="danger" title={t('Repository could not be saved')}>
             {errors.map((e, index) => (
               <div key={index}>{e}</div>
             ))}

package/src/components/Repository/CreateRepository/utils.ts

@@ -1,6 +1,7 @@
 import * as Yup from 'yup';
 import { TFunction } from 'i18next';
 import {
+  ApiVersion,
   DockerAuth,
   GitRepoSpec,
   HttpConfig,
@@ -16,7 +17,6 @@ import {
 } from '@flightctl/types';
 
 import { RepositoryFormValues, ResourceSyncFormValue } from './types';
-import { API_VERSION } from '../../../constants';
 import { getErrorMessage } from '../../../utils/error';
 import { appendJSONPatch } from '../../../utils/patch';
 import { MAX_TARGET_REVISION_LENGTH, maxLengthString, validKubernetesDnsSubdomain } from '../../form/validations';
@@ -468,6 +468,7 @@ export const getInitValues = ({
     canUseResourceSyncs?: boolean;
     allowedRepoTypes?: RepoSpecType[];
     showRepoTypes?: boolean;
+    writeAccessOnly?: boolean;
   };
 }): RepositoryFormValues => {
   const configAllowsResourceSyncs = options?.canUseResourceSyncs ?? true;
@@ -501,7 +502,7 @@ export const getInitValues = ({
       initValues.ociConfig = {
         registry: '',
         scheme: OciRepoSpec.scheme.HTTPS,
-        accessMode: OciRepoSpec.accessMode.READ,
+        accessMode: options?.writeAccessOnly ? OciRepoSpec.accessMode.READ_WRITE : OciRepoSpec.accessMode.READ,
       };
     }
 
@@ -779,7 +780,7 @@ export const getRepository = (values: Omit<RepositoryFormValues, 'useResourceSyn
     }
 
     return {
-      apiVersion: API_VERSION,
+      apiVersion: ApiVersion.ApiVersionV1beta1,
       kind: 'Repository',
       metadata: {
         name: values.name,
@@ -877,7 +878,7 @@ export const getRepository = (values: Omit<RepositoryFormValues, 'useResourceSyn
   }
 
   return {
-    apiVersion: API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1beta1,
     kind: 'Repository',
     metadata: {
       name: values.name,
@@ -888,7 +889,7 @@ export const getRepository = (values: Omit<RepositoryFormValues, 'useResourceSyn
 
 export const getResourceSync = (repositoryId: string, values: ResourceSyncFormValue): ResourceSync => {
   return {
-    apiVersion: API_VERSION,
+    apiVersion: ApiVersion.ApiVersionV1beta1,
     kind: 'ResourceSync',
     metadata: {
       name: values.name,
@@ -903,6 +904,6 @@ export const getResourceSync = (repositoryId: string, values: ResourceSyncFormVa
 
 export const handlePromises = async (promises: Promise<unknown>[]): Promise<string[]> => {
   const results = await Promise.allSettled(promises);
-  const failedPromises = results.filter((r) => r.status === 'rejected') as PromiseRejectedResult[];
+  const failedPromises = results.filter((r) => r.status === 'rejected');
   return failedPromises.map((fp) => getErrorMessage(fp.reason));
 };

package/src/components/form/RepositorySelect.tsx

@@ -116,6 +116,9 @@ type RepositorySelectProps = {
   canCreateRepo: boolean;
   isReadOnly?: boolean;
   repoRefetch?: VoidFunction;
+  options?: {
+    writeAccessOnly?: boolean;
+  };
   isRequired?: boolean;
   validateRepoSelection?: (repo: Repository) => string | undefined;
 };
@@ -148,6 +151,7 @@ const RepositorySelect = ({
   repoRefetch,
   label,
   helperText,
+  options,
   isRequired,
   validateRepoSelection,
 }: RepositorySelectProps) => {
@@ -214,6 +218,7 @@ const RepositorySelect = ({
           type={repoType}
           onClose={() => setCreateRepoModalOpen(false)}
           onSuccess={handleCreateRepository}
+          options={options}
         />
       )}
     </>