refactor(settings): move hidden containers panel to component

app/portainer/views/settings/components/hidden-containers-panel/hidden-containers-panel.controller.js

@@ -0,0 +1,51 @@
+/* @ngInject */
+export default function HiddenContainersPanelController($async) {
+  this.addFilteredContainerLabel = addFilteredContainerLabel.bind(this);
+  this.removeFilteredContainerLabel = removeFilteredContainerLabel.bind(this);
+  this.$onInit = $onInit.bind(this);
+  this.handleSubmit = handleSubmit.bind(this);
+
+  this.state = {
+    actionInProgress: false,
+  };
+
+  this.formValues = {
+    BlackListedLabels: [],
+    labelName: '',
+    labelValue: '',
+  };
+
+  this.state = {
+    actionInProgress: false,
+  };
+
+  function addFilteredContainerLabel() {
+    const label = {
+      name: this.formValues.labelName,
+      value: this.formValues.labelValue,
+    };
+
+    const filteredSettings = [...this.formValues.BlackListedLabels, label];
+    this.handleSubmit(filteredSettings);
+    this.formValues.labelName = '';
+    this.formValues.labelValue = '';
+  }
+
+  function removeFilteredContainerLabel(index) {
+    const filteredSettings = this.formValues.BlackListedLabels.filter((item, i) => i !== index);
+    this.handleSubmit(filteredSettings);
+  }
+
+  function handleSubmit(labels) {
+    return $async(async () => {
+      this.state.actionInProgress = true;
+      await this.onSubmit({ BlackListedLabels: labels }, 'Hidden container settings updated');
+      this.formValues.BlackListedLabels = labels;
+      this.state.actionInProgress = false;
+    });
+  }
+
+  function $onInit() {
+    this.formValues.BlackListedLabels = this.settings.BlackListedLabels;
+  }
+}

app/portainer/views/settings/components/hidden-containers-panel/hidden-containers-panel.html

@@ -0,0 +1,61 @@
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="box" title-text="Hidden containers"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal" ng-submit="$ctrl.addFilteredContainerLabel()" name="addTagForm">
+          <div class="form-group">
+            <span class="col-sm-12 text-muted small"> You can hide containers with specific labels from Portainer UI. You need to specify the label name and value. </span>
+          </div>
+          <div class="form-group">
+            <label for="header_name" class="col-sm-1 control-label text-left">Name</label>
+            <div class="col-sm-11 col-md-4">
+              <input type="text" required class="form-control" id="header_name" name="label_name" ng-model="$ctrl.formValues.labelName" placeholder="e.g. com.example.foo" />
+            </div>
+            <label for="header_value" class="col-sm-1 control-label text-left">Value</label>
+            <div class="col-sm-11 col-md-4">
+              <input type="text" class="form-control" id="header_value" ng-model="$ctrl.formValues.labelValue" placeholder="e.g. bar" />
+            </div>
+            <div class="col-sm-12 col-md-2">
+              <button type="submit" class="btn btn-primary btn-sm" ng-disabled="$ctrl.state.actionInProgress || !$ctrl.formValues.labelName"
+                ><pr-icon icon="'plus'" class-name="'mr-1'"></pr-icon>Add filter</button
+              >
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="col-sm-12 table-responsive">
+              <table class="table-hover table">
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Value</th>
+                    <th></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr ng-repeat="label in $ctrl.formValues.BlackListedLabels">
+                    <td>{{ label.name }}</td>
+                    <td>{{ label.value }}</td>
+                    <td>
+                      <button type="button" ng-disabled="$ctrl.state.actionInProgress" class="btn btn-danger btn-xs" ng-click="$ctrl.removeFilteredContainerLabel($index)">
+                        <pr-icon icon="'trash-2'" class-name="'mr-1'"></pr-icon>
+                        Remove
+                      </button>
+                    </td>
+                  </tr>
+                  <tr ng-if="$ctrl.formValues.BlackListedLabels.length === 0">
+                    <td colspan="3" class="text-muted text-center">No filter available.</td>
+                  </tr>
+                  <tr ng-if="!$ctrl.formValues.BlackListedLabels">
+                    <td colspan="3" class="text-muted text-center">Loading...</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <!-- !filtered-labels -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/portainer/views/settings/components/hidden-containers-panel/index.js

@@ -0,0 +1,12 @@
+import angular from 'angular';
+
+import controller from './hidden-containers-panel.controller';
+
+angular.module('portainer.app').component('hiddenContainersPanel', {
+  templateUrl: './hidden-containers-panel.html',
+  controller,
+  bindings: {
+    settings: '<',
+    onSubmit: '<',
+  },
+});

app/portainer/views/settings/settings.html

@@ -7,66 +7,7 @@
 <ssl-ca-file-settings></ssl-ca-file-settings>
 <ssl-certificate-settings ng-show="state.showHTTPS"></ssl-certificate-settings>
 
-<!-- hidden containers -->
+<hidden-containers-panel ng-if="settings" settings="settings" on-submit="(updateSettings)"></hidden-containers-panel>
-<div class="row">
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-header icon="box" title-text="Hidden containers"></rd-widget-header>
-      <rd-widget-body>
-        <form class="form-horizontal" ng-submit="addFilteredContainerLabel()" name="addTagForm">
-          <div class="form-group">
-            <span class="col-sm-12 text-muted small"> You can hide containers with specific labels from Portainer UI. You need to specify the label name and value. </span>
-          </div>
-          <div class="form-group">
-            <label for="header_name" class="col-sm-1 control-label text-left">Name</label>
-            <div class="col-sm-11 col-md-4">
-              <input type="text" required class="form-control" id="header_name" name="label_name" ng-model="formValues.labelName" placeholder="e.g. com.example.foo" />
-            </div>
-            <label for="header_value" class="col-sm-1 control-label text-left">Value</label>
-            <div class="col-sm-11 col-md-4">
-              <input type="text" class="form-control" id="header_value" ng-model="formValues.labelValue" placeholder="e.g. bar" />
-            </div>
-            <div class="col-sm-12 col-md-2">
-              <button type="submit" class="btn btn-primary btn-sm" ng-disabled="!formValues.labelName"><pr-icon icon="'plus'" class-name="'mr-1'"></pr-icon>Add filter</button>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-12 table-responsive">
-              <table class="table-hover table">
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Value</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr ng-repeat="label in formValues.BlackListedLabels">
-                    <td>{{ label.name }}</td>
-                    <td>{{ label.value }}</td>
-                    <td>
-                      <button type="button" class="btn btn-danger btn-xs" ng-click="removeFilteredContainerLabel($index)">
-                        <pr-icon icon="'trash-2'" class-name="'mr-1'"></pr-icon>
-                        Remove</button
-                      >
-                    </td>
-                  </tr>
-                  <tr ng-if="formValues.BlackListedLabels.length === 0">
-                    <td colspan="3" class="text-muted text-center">No filter available.</td>
-                  </tr>
-                  <tr ng-if="!formValues.BlackListedLabels">
-                    <td colspan="3" class="text-muted text-center">Loading...</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <!-- !filtered-labels -->
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
 
 <!-- backup -->
 <div class="row">

app/portainer/views/settings/settingsController.js

@@ -30,9 +30,6 @@ angular.module('portainer.app').controller('SettingsController', [
     $scope.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' };
 
     $scope.formValues = {
-      BlackListedLabels: [],
-      labelName: '',
-      labelValue: '',
       passwordProtect: false,
       password: '',
       backupFormType: $scope.BACKUP_FORM_TYPES.FILE,
@@ -49,23 +46,6 @@ angular.module('portainer.app').controller('SettingsController', [
       $scope.state.featureLimited = limited;
     };
 
-    $scope.removeFilteredContainerLabel = function (index) {
-      const filteredSettings = $scope.formValues.BlackListedLabels.filter((_, i) => i !== index);
-      const filteredSettingsPayload = { BlackListedLabels: filteredSettings };
-      updateSettings(filteredSettingsPayload, 'Hidden container settings updated');
-    };
-
-    $scope.addFilteredContainerLabel = function () {
-      var label = {
-        name: $scope.formValues.labelName,
-        value: $scope.formValues.labelValue,
-      };
-
-      const filteredSettings = [...$scope.formValues.BlackListedLabels, label];
-      const filteredSettingsPayload = { BlackListedLabels: filteredSettings };
-      updateSettings(filteredSettingsPayload, 'Hidden container settings updated');
-    };
-
     $scope.downloadBackup = function () {
       const payload = {};
       if ($scope.formValues.passwordProtect) {
@@ -135,12 +115,11 @@ angular.module('portainer.app').controller('SettingsController', [
       // which may override the cloud provider API keys
       settings.CloudApiKeys = undefined;
       return SettingsService.update(settings)
-        .then(function success(response) {
+        .then(function success() {
           Notifications.success('Success', successMessage);
           StateManager.updateLogo(settings.LogoURL);
           StateManager.updateSnapshotInterval(settings.SnapshotInterval);
           StateManager.updateEnableTelemetry(settings.EnableTelemetry);
-          $scope.formValues.BlackListedLabels = response.BlackListedLabels;
         })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to update settings');
@@ -152,11 +131,8 @@ angular.module('portainer.app').controller('SettingsController', [
 
     function initView() {
       SettingsService.settings()
-        .then(function success(data) {
+        .then(function success(settings) {
-          var settings = data;
           $scope.settings = settings;
-
-          $scope.formValues.BlackListedLabels = settings.BlackListedLabels;
         })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to retrieve application settings');