From 2dfa4a7c454a64d01178cbdfe7e4216778454a81 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Mon, 25 Sep 2023 20:40:26 +0300
Subject: [PATCH] refactor(containers): migrate restart policy tab to react
 [EE-5213] (#10347)

---
 app/docker/react/components/containers.ts     | 11 ++++++++
 .../create/createContainerController.js       | 12 +++++++++
 .../containers/create/createcontainer.html    | 18 +++----------
 .../RestartPolicyTab/RestartPolicyTab.tsx     | 27 +++++++++++++++++++
 .../CreateView/RestartPolicyTab/index.ts      | 13 +++++++++
 .../CreateView/RestartPolicyTab/toRequest.ts  | 19 +++++++++++++
 .../RestartPolicyTab/toViewModel.ts           | 21 +++++++++++++++
 .../CreateView/RestartPolicyTab/types.ts      |  7 +++++
 .../CreateView/RestartPolicyTab/validation.ts |  9 +++++++
 9 files changed, 122 insertions(+), 15 deletions(-)
 create mode 100644 app/react/docker/containers/CreateView/RestartPolicyTab/RestartPolicyTab.tsx
 create mode 100644 app/react/docker/containers/CreateView/RestartPolicyTab/index.ts
 create mode 100644 app/react/docker/containers/CreateView/RestartPolicyTab/toRequest.ts
 create mode 100644 app/react/docker/containers/CreateView/RestartPolicyTab/toViewModel.ts
 create mode 100644 app/react/docker/containers/CreateView/RestartPolicyTab/types.ts
 create mode 100644 app/react/docker/containers/CreateView/RestartPolicyTab/validation.ts

diff --git a/app/docker/react/components/containers.ts b/app/docker/react/components/containers.ts
index d562205ce..e12ea93d8 100644
--- a/app/docker/react/components/containers.ts
+++ b/app/docker/react/components/containers.ts
@@ -34,6 +34,10 @@ import {
   CapabilitiesTab,
   capabilitiesTabUtils,
 } from '@/react/docker/containers/CreateView/CapabilitiesTab';
+import {
+  RestartPolicyTab,
+  restartPolicyTabUtils,
+} from '@/react/docker/containers/CreateView/RestartPolicyTab';
 
 const ngModule = angular
   .module('portainer.docker.react.components.containers', [])
@@ -103,3 +107,10 @@ withFormValidation(
   [],
   capabilitiesTabUtils.validation
 );
+withFormValidation(
+  ngModule,
+  RestartPolicyTab,
+  'dockerCreateContainerRestartPolicyTab',
+  [],
+  restartPolicyTabUtils.validation
+);
diff --git a/app/docker/views/containers/create/createContainerController.js b/app/docker/views/containers/create/createContainerController.js
index d17067cef..4e6b7d617 100644
--- a/app/docker/views/containers/create/createContainerController.js
+++ b/app/docker/views/containers/create/createContainerController.js
@@ -17,6 +17,7 @@ import './createcontainer.css';
 import { envVarsTabUtils } from '@/react/docker/containers/CreateView/EnvVarsTab';
 import { getContainers } from '@/react/docker/containers/queries/containers';
 import { resourcesTabUtils } from '@/react/docker/containers/CreateView/ResourcesTab';
+import { restartPolicyTabUtils } from '@/react/docker/containers/CreateView/RestartPolicyTab';
 
 angular.module('portainer.docker').controller('CreateContainerController', [
   '$q',
@@ -86,12 +87,14 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       AccessControlData: new AccessControlFormData(),
       NodeName: null,
       RegistryModel: new PorImageRegistryModel(),
+
       commands: commandsTabUtils.getDefaultViewModel(),
       envVars: envVarsTabUtils.getDefaultViewModel(),
       volumes: volumesTabUtils.getDefaultViewModel(),
       network: networkTabUtils.getDefaultViewModel(),
       resources: resourcesTabUtils.getDefaultViewModel(),
       capabilities: capabilitiesTabUtils.getDefaultViewModel(),
+      restartPolicy: restartPolicyTabUtils.getDefaultViewModel(),
     };
 
     $scope.state = {
@@ -146,6 +149,12 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       });
     };
 
+    $scope.onRestartPolicyChange = function (restartPolicy) {
+      return $scope.$evalAsync(() => {
+        $scope.formValues.restartPolicy = restartPolicy;
+      });
+    };
+
     function onAlwaysPullChange(checked) {
       return $scope.$evalAsync(() => {
         $scope.formValues.alwaysPull = checked;
@@ -315,6 +324,7 @@ angular.module('portainer.docker').controller('CreateContainerController', [
       config = networkTabUtils.toRequest(config, $scope.formValues.network, $scope.fromContainer.Id);
       config = resourcesTabUtils.toRequest(config, $scope.formValues.resources);
       config = capabilitiesTabUtils.toRequest(config, $scope.formValues.capabilities);
+      config = restartPolicyTabUtils.toRequest(config, $scope.formValues.restartPolicy);
 
       prepareImageConfig(config);
       preparePortBindings(config);
@@ -372,6 +382,8 @@ angular.module('portainer.docker').controller('CreateContainerController', [
           $scope.formValues.resources = resourcesTabUtils.toViewModel(d);
           $scope.formValues.capabilities = capabilitiesTabUtils.toViewModel(d);
 
+          $scope.formValues.restartPolicy = restartPolicyTabUtils.toViewModel(d);
+
           loadFromContainerPortBindings(d);
           loadFromContainerLabels(d);
           loadFromContainerImageConfig(d);
diff --git a/app/docker/views/containers/create/createcontainer.html b/app/docker/views/containers/create/createcontainer.html
index 5cbe87427..821c3f3f6 100644
--- a/app/docker/views/containers/create/createcontainer.html
+++ b/app/docker/views/containers/create/createcontainer.html
@@ -264,23 +264,11 @@
               ></docker-create-container-env-vars-tab>
             </div>
             <!-- !tab-env -->
-            <!-- tab-restart-policy -->
+
             <div class="tab-pane" id="restart-policy">
-              <form class="form-horizontal" style="margin-top: 15px">
-                <div class="form-group">
-                  <div class="col-sm-12">
-                    <label class="control-label text-left"> Restart policy </label>
-                    <div class="btn-group btn-group-sm" style="margin-left: 20px">
-                      <label class="btn btn-light" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'no'"> Never </label>
-                      <label class="btn btn-light" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'always'"> Always </label>
-                      <label class="btn btn-light" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'on-failure'"> On failure </label>
-                      <label class="btn btn-light" ng-model="config.HostConfig.RestartPolicy.Name" uib-btn-radio="'unless-stopped'"> Unless stopped </label>
-                    </div>
-                  </div>
-                </div>
-              </form>
+              <docker-create-container-restart-policy-tab values="formValues.restartPolicy" on-change="(onRestartPolicyChange)"></docker-create-container-restart-policy-tab>
             </div>
-            <!-- !tab-restart-policy -->
+
             <!-- tab-runtime-resources -->
             <div class="tab-pane" id="runtime-resources">
               <docker-create-container-resources-tab
diff --git a/app/react/docker/containers/CreateView/RestartPolicyTab/RestartPolicyTab.tsx b/app/react/docker/containers/CreateView/RestartPolicyTab/RestartPolicyTab.tsx
new file mode 100644
index 000000000..b4dae33f8
--- /dev/null
+++ b/app/react/docker/containers/CreateView/RestartPolicyTab/RestartPolicyTab.tsx
@@ -0,0 +1,27 @@
+import { ButtonSelector } from '@@/form-components/ButtonSelector/ButtonSelector';
+import { FormControl } from '@@/form-components/FormControl';
+
+import { RestartPolicy } from './types';
+
+export function RestartPolicyTab({
+  values,
+  onChange,
+}: {
+  values: RestartPolicy;
+  onChange: (values: RestartPolicy) => void;
+}) {
+  return (
+    <FormControl label="Restart Policy">
+      <ButtonSelector
+        options={[
+          { label: 'Never', value: RestartPolicy.No },
+          { label: 'Always', value: RestartPolicy.Always },
+          { label: 'On failure', value: RestartPolicy.OnFailure },
+          { label: 'Unless stopped', value: RestartPolicy.UnlessStopped },
+        ]}
+        value={values}
+        onChange={onChange}
+      />
+    </FormControl>
+  );
+}
diff --git a/app/react/docker/containers/CreateView/RestartPolicyTab/index.ts b/app/react/docker/containers/CreateView/RestartPolicyTab/index.ts
new file mode 100644
index 000000000..fbe7004c2
--- /dev/null
+++ b/app/react/docker/containers/CreateView/RestartPolicyTab/index.ts
@@ -0,0 +1,13 @@
+import { validation } from './validation';
+import { toViewModel, getDefaultViewModel } from './toViewModel';
+import { toRequest } from './toRequest';
+
+export { RestartPolicyTab } from './RestartPolicyTab';
+export { RestartPolicy } from './types';
+
+export const restartPolicyTabUtils = {
+  toViewModel,
+  toRequest,
+  validation,
+  getDefaultViewModel,
+};
diff --git a/app/react/docker/containers/CreateView/RestartPolicyTab/toRequest.ts b/app/react/docker/containers/CreateView/RestartPolicyTab/toRequest.ts
new file mode 100644
index 000000000..3afad034f
--- /dev/null
+++ b/app/react/docker/containers/CreateView/RestartPolicyTab/toRequest.ts
@@ -0,0 +1,19 @@
+import { CreateContainerRequest } from '../types';
+
+import { RestartPolicy } from './types';
+
+export function toRequest(
+  config: CreateContainerRequest,
+  value: RestartPolicy
+): CreateContainerRequest {
+  return {
+    ...config,
+    HostConfig: {
+      ...config.HostConfig,
+      RestartPolicy: {
+        ...config.HostConfig.RestartPolicy,
+        Name: value,
+      },
+    },
+  };
+}
diff --git a/app/react/docker/containers/CreateView/RestartPolicyTab/toViewModel.ts b/app/react/docker/containers/CreateView/RestartPolicyTab/toViewModel.ts
new file mode 100644
index 000000000..884e34509
--- /dev/null
+++ b/app/react/docker/containers/CreateView/RestartPolicyTab/toViewModel.ts
@@ -0,0 +1,21 @@
+import { ContainerJSON } from '../../queries/container';
+
+import { RestartPolicy } from './types';
+
+export function toViewModel(config: ContainerJSON): RestartPolicy {
+  switch (config.HostConfig?.RestartPolicy?.Name) {
+    case 'always':
+      return RestartPolicy.Always;
+    case 'on-failure':
+      return RestartPolicy.OnFailure;
+    case 'unless-stopped':
+      return RestartPolicy.UnlessStopped;
+    case 'no':
+    default:
+      return RestartPolicy.No;
+  }
+}
+
+export function getDefaultViewModel(): RestartPolicy {
+  return RestartPolicy.No;
+}
diff --git a/app/react/docker/containers/CreateView/RestartPolicyTab/types.ts b/app/react/docker/containers/CreateView/RestartPolicyTab/types.ts
new file mode 100644
index 000000000..d919ee35d
--- /dev/null
+++ b/app/react/docker/containers/CreateView/RestartPolicyTab/types.ts
@@ -0,0 +1,7 @@
+// Enum version of RestartPolicy
+export enum RestartPolicy {
+  No = 'no',
+  Always = 'always',
+  OnFailure = 'on-failure',
+  UnlessStopped = 'unless-stopped',
+}
diff --git a/app/react/docker/containers/CreateView/RestartPolicyTab/validation.ts b/app/react/docker/containers/CreateView/RestartPolicyTab/validation.ts
new file mode 100644
index 000000000..e3b275e29
--- /dev/null
+++ b/app/react/docker/containers/CreateView/RestartPolicyTab/validation.ts
@@ -0,0 +1,9 @@
+import { mixed, SchemaOf } from 'yup';
+
+import { RestartPolicy } from './types';
+
+export function validation(): SchemaOf<RestartPolicy> {
+  return mixed<RestartPolicy>()
+    .oneOf(Object.values(RestartPolicy))
+    .default(RestartPolicy.No) as SchemaOf<RestartPolicy>;
+}