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

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

@@ -1,4 +1,8 @@
+import _ from 'lodash';
+
 import { EditorType } from '@/react/edge/edge-stacks/types';
+import NomadIcon from '@/assets/ico/vendor/nomad.svg?c';
+import { isBE } from '@/react/portainer/feature-flags/feature-flags.service';
 
 import { BoxSelector } from '@@/BoxSelector';
 import { BoxSelectorOption } from '@@/BoxSelector/types';
@@ -12,6 +16,7 @@ interface Props {
   onChange(value: number): void;
   hasDockerEndpoint: boolean;
   hasKubeEndpoint: boolean;
+  hasNomadEndpoint: boolean;
   allowKubeToSelectCompose?: boolean;
 }
 
@@ -20,29 +25,45 @@ export function EdgeStackDeploymentTypeSelector({
   onChange,
   hasDockerEndpoint,
   hasKubeEndpoint,
+  hasNomadEndpoint,
   allowKubeToSelectCompose,
 }: Props) {
-  const deploymentOptions: BoxSelectorOption<number>[] = [
+  const deploymentOptions: BoxSelectorOption<number>[] = _.compact([
     {
       ...compose,
       value: EditorType.Compose,
-      disabled: () => (allowKubeToSelectCompose ? false : hasKubeEndpoint),
+      disabled: () =>
+        allowKubeToSelectCompose
+          ? hasNomadEndpoint
+          : hasNomadEndpoint || hasKubeEndpoint,
       tooltip: () =>
-        hasKubeEndpoint
-          ? 'Cannot use this option with Edge Kubernetes environments'
+        hasNomadEndpoint || hasKubeEndpoint
+          ? 'Cannot use this option with Edge Kubernetes or Edge Nomad environments'
           : '',
     },
     {
       ...kubernetes,
       value: EditorType.Kubernetes,
-      disabled: () => hasDockerEndpoint,
+      disabled: () => hasDockerEndpoint || hasNomadEndpoint,
       tooltip: () =>
-        hasDockerEndpoint
-          ? 'Cannot use this option with Edge Docker environments'
+        hasDockerEndpoint || hasNomadEndpoint
+          ? 'Cannot use this option with Edge Docker or Edge Nomad environments'
           : '',
       iconType: 'logo',
     },
-  ];
+    isBE && {
+      id: 'deployment_nomad',
+      icon: NomadIcon,
+      label: 'Nomad',
+      description: 'Nomad HCL format',
+      value: EditorType.Nomad,
+      disabled: () => hasDockerEndpoint || hasKubeEndpoint,
+      tooltip: () =>
+        hasDockerEndpoint || hasKubeEndpoint
+          ? 'Cannot use this option with Edge Docker or Edge Kubernetes environments'
+          : '',
+    },
+  ]);
 
   return (
     <>

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>
+  );
+}