fix(edge/stacks): show registry field for git [EE-5742] (#9217)

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/GitForm.tsx

@@ -26,6 +26,8 @@ import { useCurrentUser } from '@/react/hooks/useUser';
 import { useCreateGitCredentialMutation } from '@/react/portainer/account/git-credentials/git-credentials.service';
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { EnvironmentType } from '@/react/portainer/environments/types';
+import { Registry } from '@/react/portainer/registries/types';
+import { useRegistries } from '@/react/portainer/registries/queries/useRegistries';
 
 import { LoadingButton } from '@@/buttons';
 import { FormSection } from '@@/form-components/FormSection';
@@ -36,8 +38,12 @@ import { EnvVar } from '@@/form-components/EnvironmentVariablesFieldset/types';
 
 import { useValidateEnvironmentTypes } from '../useEdgeGroupHasType';
 import { atLeastTwo } from '../atLeastTwo';
+import { PrivateRegistryFieldset } from '../../../components/PrivateRegistryFieldset';
 
-import { useUpdateEdgeStackGitMutation } from './useUpdateEdgeStackGitMutation';
+import {
+  UpdateEdgeStackGitPayload,
+  useUpdateEdgeStackGitMutation,
+} from './useUpdateEdgeStackGitMutation';
 
 interface FormValues {
   groupIds: EdgeGroup['Id'][];
@@ -46,6 +52,7 @@ interface FormValues {
   refName: string;
   authentication: GitAuthModel;
   envVars: EnvVar[];
+  privateRegistryId?: Registry['Id'];
 }
 
 export function GitForm({ stack }: { stack: EdgeStack }) {
@@ -117,10 +124,10 @@ export function GitForm({ stack }: { stack: EdgeStack }) {
   }
 
   function getPayload(
-    { authentication, autoUpdate, ...values }: FormValues,
+    { authentication, autoUpdate, privateRegistryId, ...values }: FormValues,
     credentialId: number | undefined,
     updateVersion: boolean
-  ) {
+  ): UpdateEdgeStackGitPayload {
     return {
       updateVersion,
       id: stack.Id,
@@ -129,6 +136,10 @@ export function GitForm({ stack }: { stack: EdgeStack }) {
         RepositoryGitCredentialID: credentialId,
       }),
       autoUpdate: transformAutoUpdateViewModel(autoUpdate, webhookId),
+      registries:
+        typeof privateRegistryId !== 'undefined'
+          ? [privateRegistryId]
+          : undefined,
       ...values,
     };
   }
@@ -173,6 +184,7 @@ function InnerForm({
   onUpdateSettingsClick(): void;
   webhookId: string;
 }) {
+  const registriesQuery = useRegistries();
   const { values, setFieldValue, isValid, handleSubmit, errors, dirty } =
     useFormikContext<FormValues>();
 
@@ -265,6 +277,15 @@ function InnerForm({
         />
       </FormSection>
 
+      <PrivateRegistryFieldset
+        value={values.privateRegistryId}
+        onSelect={(value) => setFieldValue('privateRegistryId', value)}
+        registries={registriesQuery.data ?? []}
+        formInvalid={!isValid}
+        method="repository"
+        errorMessage={errors.privateRegistryId}
+      />
+
       <FormSection title="Actions">
         <LoadingButton
           disabled={dirty || !isValid || isLoading}

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/useUpdateEdgeStackGitMutation.ts

@@ -9,8 +9,9 @@ import {
 import { buildUrl } from '@/react/edge/edge-stacks/queries/buildUrl';
 import { DeploymentType, EdgeStack } from '@/react/edge/edge-stacks/types';
 import { EdgeGroup } from '@/react/edge/edge-groups/types';
+import { Registry } from '@/react/portainer/registries/types';
 
-interface UpdateEdgeStackGitPayload {
+export interface UpdateEdgeStackGitPayload {
   id: EdgeStack['Id'];
   autoUpdate: AutoUpdateResponse | null;
   refName: string;
@@ -18,6 +19,7 @@ interface UpdateEdgeStackGitPayload {
   groupIds: EdgeGroup['Id'][];
   deploymentType: DeploymentType;
   updateVersion: boolean;
+  registries?: Array<Registry['Id']>;
 }
 
 export function useUpdateEdgeStackGitMutation() {

app/react/edge/edge-stacks/components/PrivateRegistryFieldset.tsx

@@ -14,24 +14,24 @@ import { FormSection } from '@@/form-components/FormSection';
 interface Props {
   value?: number;
   registries: Registry[];
-  onChange: () => void;
+  onChange?: () => void;
   formInvalid?: boolean;
   errorMessage?: string;
   onSelect: (value?: number) => void;
   isActive?: boolean;
-  clearRegistries: () => void;
-  method?: string;
+  clearRegistries?: () => void;
+  method?: 'repository' | string;
 }
 
 export function PrivateRegistryFieldset({
   value,
   registries,
-  onChange,
+  onChange = () => {},
   formInvalid,
   errorMessage,
   onSelect,
   isActive,
-  clearRegistries,
+  clearRegistries = () => {},
   method,
 }: Props) {
   const [checked, setChecked] = useState(isActive || false);