feat(edge/stacks): sync EE codechanges [EE-498] (#8580)

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

@@ -0,0 +1,106 @@
+import { useState, useEffect } from 'react';
+
+import { Registry } from '@/react/portainer/registries/types';
+
+import { Select } from '@@/form-components/ReactSelect';
+import { FormControl } from '@@/form-components/FormControl';
+import { Button } from '@@/buttons';
+import { FormError } from '@@/form-components/FormError';
+import { SwitchField } from '@@/form-components/SwitchField';
+import { TextTip } from '@@/Tip/TextTip';
+import { FormSection } from '@@/form-components/FormSection';
+
+interface Props {
+  value?: number;
+  registries: Registry[];
+  onChange: () => void;
+  formInvalid?: boolean;
+  errorMessage?: string;
+  onSelect: (value?: number) => void;
+  isActive?: boolean;
+  clearRegistries: () => void;
+  method?: string;
+}
+
+export function PrivateRegistryFieldset({
+  value,
+  registries,
+  onChange,
+  formInvalid,
+  errorMessage,
+  onSelect,
+  isActive,
+  clearRegistries,
+  method,
+}: Props) {
+  const [checked, setChecked] = useState(isActive || false);
+  const [selected, setSelected] = useState(value);
+
+  const tooltipMessage =
+    'Use this when using a private registry that requires credentials';
+
+  useEffect(() => {
+    if (checked) {
+      onChange();
+    } else {
+      clearRegistries();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [checked]);
+
+  useEffect(() => {
+    setSelected(value);
+  }, [value]);
+
+  function reload() {
+    onChange();
+    setSelected(value);
+  }
+
+  return (
+    <FormSection title="Registry">
+      <div className="form-group">
+        <div className="col-sm-12">
+          <SwitchField
+            checked={checked}
+            onChange={(value) => setChecked(value)}
+            tooltip={tooltipMessage}
+            label="Use Credentials"
+            labelClass="col-sm-3 col-lg-2"
+            disabled={formInvalid}
+          />
+        </div>
+      </div>
+
+      {checked && (
+        <>
+          {method !== 'repository' && (
+            <>
+              <TextTip color="blue">
+                If you make any changes to the image urls in your yaml, please
+                reload or select registry manually
+              </TextTip>
+
+              <Button onClick={reload}>Reload</Button>
+            </>
+          )}
+          {!errorMessage ? (
+            <FormControl label="Registry" inputId="users-selector">
+              <Select
+                value={registries.filter(
+                  (registry) => registry.Id === selected
+                )}
+                options={registries}
+                getOptionLabel={(registry) => registry.Name}
+                getOptionValue={(registry) => registry.Id.toString()}
+                onChange={(value) => onSelect(value?.Id)}
+              />
+            </FormControl>
+          ) : (
+            <FormError>{errorMessage}</FormError>
+          )}
+        </>
+      )}
+    </FormSection>
+  );
+}