refactor(settings): move app settings to panel

fix(settings): fix app panel

fix(settings/apps): limit features

app/portainer/views/settings/components/application-settings-panel/application-settings-panel.controller.js

@@ -0,0 +1,88 @@
+import { FeatureId } from '@/react/portainer/feature-flags/enums';
+
+/* @ngInject */
+export default function ApplicationSettingsPanelController($scope, $async, StateManager) {
+  this.saveApplicationSettings = saveApplicationSettings.bind(this);
+  this.onChangeCheckInInterval = onChangeCheckInInterval.bind(this);
+  this.onToggleCustomLogo = onToggleCustomLogo.bind(this);
+  this.$onInit = $onInit.bind(this);
+  this.onToggleEnableTelemetry = onToggleEnableTelemetry.bind(this);
+  this.onToggleCustomLoginBanner = onToggleCustomLoginBanner.bind(this);
+  this.onChangeFormValues = onChangeFormValues.bind(this);
+
+  this.customBannerFeatureId = FeatureId.CUSTOM_LOGIN_BANNER;
+
+  this.formValues = {
+    logoURL: '',
+    logoEnabled: false,
+    customLoginBannerEnabled: false,
+    customLoginBanner: '',
+    snapshotInterval: '',
+    enableTelemetry: false,
+    templatesUrl: '',
+    edgeAgentCheckinInterval: '',
+  };
+
+  this.state = {
+    isDemo: false,
+    actionInProgress: false,
+  };
+
+  async function saveApplicationSettings() {
+    $async(async () => {
+      const appSettingsPayload = {
+        SnapshotInterval: this.settings.SnapshotInterval,
+        LogoURL: this.formValues.customLogo ? this.settings.LogoURL : '',
+        EnableTelemetry: this.settings.EnableTelemetry,
+        CustomLoginBanner: this.formValues.customLoginBanner ? this.settings.CustomLoginBanner : '',
+        TemplatesURL: this.settings.TemplatesURL,
+        EdgeAgentCheckinInterval: this.settings.EdgeAgentCheckinInterval,
+      };
+
+      this.state.actionInProgress = true;
+      await this.onSubmit(appSettingsPayload, 'Application settings updated');
+      this.state.actionInProgress = false;
+    });
+  }
+
+  function onToggleCustomLogo(logoEnabled) {
+    this.onChangeFormValues({ logoEnabled });
+  }
+
+  function onChangeCheckInInterval(edgeAgentCheckinInterval) {
+    this.onChangeFormValues({ edgeAgentCheckinInterval });
+  }
+
+  function onToggleEnableTelemetry(enableTelemetry) {
+    this.onChangeFormValues({ enableTelemetry });
+  }
+
+  function onToggleCustomLoginBanner(customLoginBannerEnabled) {
+    this.onChangeFormValues({ customLoginBannerEnabled });
+  }
+
+  function onChangeFormValues(newPartialValues) {
+    $scope.$evalAsync(() => {
+      this.formValues = {
+        ...this.formValues,
+        ...newPartialValues,
+      };
+    });
+  }
+
+  function $onInit() {
+    const state = StateManager.getState();
+    this.state.isDemo = state.application.demoEnvironment.enabled;
+
+    this.formValues = {
+      logoURL: this.settings.LogoURL,
+      logoEnabled: !!this.settings.LogoURL,
+      customLoginBannerEnabled: !!this.settings.CustomLoginBanner,
+      customLoginBanner: this.settings.CustomLoginBanner,
+      snapshotInterval: this.settings.SnapshotInterval,
+      enableTelemetry: this.settings.EnableTelemetry,
+      templatesUrl: this.settings.TemplatesURL,
+      edgeAgentCheckinInterval: this.settings.EdgeAgentCheckinInterval,
+    };
+  }
+}

app/portainer/views/settings/components/application-settings-panel/application-settings-panel.html

@@ -0,0 +1,148 @@
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-header icon="settings" title-text="Application settings"></rd-widget-header>
+      <rd-widget-body>
+        <form class="form-horizontal">
+          <!-- snapshot-interval -->
+          <div class="form-group">
+            <label for="snapshot_interval" class="col-sm-2 control-label text-left">Snapshot interval</label>
+            <div class="col-sm-10">
+              <input type="text" class="form-control" ng-model="$ctrl.formValues.snapshotInterval" id="snapshot_interval" placeholder="e.g. 15m" />
+            </div>
+          </div>
+          <!-- !snapshot-interval -->
+
+          <!-- checkin-interval -->
+          <edge-checkin-interval-field
+            size="'xsmall'"
+            value="$ctrl.formValues.edgeAgentCheckinInterval"
+            label="'Edge agent default poll frequency'"
+            is-default-hidden="true"
+            on-change="($ctrl.onChangeCheckInInterval)"
+          ></edge-checkin-interval-field>
+          <!-- !checkin-interval -->
+
+          <!-- logo -->
+          <div class="form-group">
+            <por-switch-field
+              label="'Use custom logo'"
+              checked="$ctrl.formValues.logoEnabled"
+              name="'toggle_logo'"
+              disabled="$ctrl.state.isDemo"
+              on-change="($ctrl.onToggleCustomLogo)"
+              field-class="'col-sm-12'"
+              label-class="'col-sm-2'"
+            ></por-switch-field>
+            <div class="col-sm-12" ng-if="$ctrl.state.isDemo" style="margin-top: 10px">
+              <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
+            </div>
+          </div>
+
+          <div ng-if="$ctrl.formValues.logoEnabled">
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small"> You can specify the URL to your logo here. For an optimal display, logo dimensions should be 155px by 55px. </span>
+            </div>
+            <div class="form-group">
+              <label for="logo_url" class="col-sm-2 control-label text-left"> URL </label>
+              <div class="col-sm-10">
+                <input type="text" class="form-control" ng-model="$ctrl.formValues.logoUrl" id="logo_url" placeholder="https://mycompany.com/logo.png" />
+              </div>
+            </div>
+          </div>
+          <!-- !logo -->
+
+          <div class="form-group">
+            <por-switch-field
+              label="'Allow the collection of anonymous statistics'"
+              checked="$ctrl.formValues.enableTelemetry"
+              name="'toggle_enableTelemetry'"
+              on-change="($ctrl.onToggleEnableTelemetry)"
+              disabled="$ctrl.state.isDemo"
+              field-class="'col-sm-12'"
+              label-class="'col-sm-2'"
+            ></por-switch-field>
+            <div class="col-sm-12" ng-if="$ctrl.state.isDemo" style="margin-top: 10px">
+              <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
+            </div>
+            <div class="col-sm-12 text-muted small" style="margin-top: 10px">
+              You can find more information about this in our
+              <a href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.
+            </div>
+          </div>
+
+          <!-- login screen banner -->
+          <div class="form-group">
+            <por-switch-field
+              label="'Login screen banner'"
+              checked="$ctrl.formValues.customLoginBannerEnabled"
+              name="'toggle_login_banner'"
+              disabled="$ctrl.state.isDemo"
+              feature-id="$ctrl.customBannerFeatureId"
+              on-change="($ctrl.onToggleCustomLoginBanner)"
+              field-class="'col-sm-12'"
+              label-class="'col-sm-2'"
+            ></por-switch-field>
+            <div class="col-sm-12" ng-if="$ctrl.state.isDemo" style="margin-top: 10px">
+              <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
+            </div>
+            <div class="col-sm-12 text-muted small" style="margin-top: 10px"> You can set a custom banner that will be shown to all users during login. </div>
+          </div>
+
+          <div ng-if="$ctrl.formValues.customLoginBannerEnabled">
+            <div class="form-group">
+              <label for="custom_login_banner" class="col-sm-2 control-label required text-left">Details</label>
+              <div class="col-sm-10">
+                <textarea class="form-control" rows="5" ng-model="$ctrl.formValues.customLoginBanner" id="custom_login_banner" placeholder="Banner details"></textarea>
+              </div>
+            </div>
+          </div>
+          <!-- !login screen banner -->
+
+          <!-- templates -->
+          <div class="col-sm-12 form-section-title"> App Templates </div>
+          <div>
+            <div class="form-group">
+              <span class="col-sm-12 text-muted small">
+                You can specify the URL to your own template definitions file here. See
+                <a href="https://docs.portainer.io/advanced/app-templates/build" target="_blank">Portainer documentation</a> for more details.
+              </span>
+            </div>
+            <div class="form-group">
+              <label for="templates_url" class="col-sm-2 control-label text-left"> URL </label>
+              <div class="col-sm-10">
+                <input
+                  type="text"
+                  class="form-control"
+                  ng-model="$ctrl.formValues.templatesUrl"
+                  id="templates_url"
+                  placeholder="https://myserver.mydomain/templates.json"
+                  required
+                  data-cy="settings-templateUrl"
+                />
+              </div>
+            </div>
+          </div>
+          <!-- !templates -->
+          <!-- actions -->
+          <div class="form-group">
+            <div class="col-sm-12">
+              <button
+                type="button"
+                class="btn btn-primary btn-sm !ml-0"
+                ng-click="$ctrl.saveApplicationSettings()"
+                ng-disabled="$ctrl.state.actionInProgress || !$ctrl.formValues.templatesUrl || ($ctrl.formValues.customLoginBannerEnabled && !$ctrl.formValues.customLoginBanner)"
+                button-spinner="$ctrl.state.actionInProgress"
+                data-cy="settings-saveSettingsButton"
+              >
+                <span ng-hide="$ctrl.state.actionInProgress">Save application settings</span>
+                <span ng-show="$ctrl.state.actionInProgress">Saving...</span>
+              </button>
+            </div>
+          </div>
+          <!-- !actions -->
+        </form>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/portainer/views/settings/components/application-settings-panel/index.js

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

app/portainer/views/settings/settings.html

@@ -1,137 +1,6 @@
 <page-header title="'Settings'" breadcrumbs="['Settings']"> </page-header>
 
-<div class="row">
+<application-settings-panel ng-if="settings" settings="settings" on-submit="(updateSettings)"></application-settings-panel>
-  <div class="col-sm-12">
-    <rd-widget>
-      <rd-widget-header icon="settings" title-text="Application settings"></rd-widget-header>
-      <rd-widget-body>
-        <form class="form-horizontal">
-          <!-- snapshot-interval -->
-          <div class="form-group">
-            <label for="snapshot_interval" class="col-sm-2 control-label text-left">Snapshot interval</label>
-            <div class="col-sm-10">
-              <input type="text" class="form-control" ng-model="settings.SnapshotInterval" id="snapshot_interval" placeholder="e.g. 15m" />
-            </div>
-          </div>
-          <!-- !snapshot-interval -->
-
-          <!-- checkin-interval -->
-          <edge-checkin-interval-field
-            size="'xsmall'"
-            value="settings.EdgeAgentCheckinInterval"
-            label="'Edge agent default poll frequency'"
-            is-default-hidden="true"
-            on-change="(onChangeCheckInInterval)"
-          ></edge-checkin-interval-field>
-          <!-- !checkin-interval -->
-
-          <!-- logo -->
-          <div class="form-group">
-            <por-switch-field
-              label="'Use custom logo'"
-              checked="formValues.customLogo"
-              name="'toggle_logo'"
-              disabled="state.isDemo"
-              on-change="(onToggleCustomLogo)"
-              field-class="'col-sm-12'"
-              label-class="'col-sm-2'"
-            ></por-switch-field>
-            <div class="col-sm-12" ng-if="state.isDemo" style="margin-top: 10px">
-              <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
-            </div>
-          </div>
-
-          <div ng-if="formValues.customLogo">
-            <div class="form-group">
-              <span class="col-sm-12 text-muted small"> You can specify the URL to your logo here. For an optimal display, logo dimensions should be 155px by 55px. </span>
-            </div>
-            <div class="form-group">
-              <label for="logo_url" class="col-sm-2 control-label text-left"> URL </label>
-              <div class="col-sm-10">
-                <input type="text" class="form-control" ng-model="settings.LogoURL" id="logo_url" placeholder="https://mycompany.com/logo.png" />
-              </div>
-            </div>
-          </div>
-          <!-- !logo -->
-
-          <div class="form-group">
-            <por-switch-field
-              label="'Allow the collection of anonymous statistics'"
-              checked="formValues.enableTelemetry"
-              name="'toggle_enableTelemetry'"
-              on-change="(onToggleEnableTelemetry)"
-              disabled="state.isDemo"
-              field-class="'col-sm-12'"
-              label-class="'col-sm-2'"
-            ></por-switch-field>
-            <div class="col-sm-12" ng-if="state.isDemo" style="margin-top: 10px">
-              <span class="small text-muted">You cannot use this feature in the demo version of Portainer.</span>
-            </div>
-            <div class="col-sm-12 text-muted small" style="margin-top: 10px">
-              You can find more information about this in our
-              <a href="https://www.portainer.io/documentation/in-app-analytics-and-privacy-policy/" target="_blank">privacy policy</a>.
-            </div>
-          </div>
-          <!-- login screen banner -->
-          <div class="form-group">
-            <por-switch-field
-              label="'Login screen banner'"
-              name="'toggle_login_banner'"
-              feature-id="customBannerFeatureId"
-              checked="$formValues.customLoginBanner"
-              on-change="(onToggleCustomLoginBanner)"
-              field-class="'col-sm-12'"
-              label-class="'col-sm-2'"
-            ></por-switch-field>
-          </div>
-          <!-- !login screen banner -->
-          <!-- templates -->
-          <div class="col-sm-12 form-section-title"> App Templates </div>
-          <div>
-            <div class="form-group">
-              <span class="col-sm-12 text-muted small">
-                You can specify the URL to your own template definitions file here. See
-                <a href="https://docs.portainer.io/advanced/app-templates/build" target="_blank">Portainer documentation</a> for more details.
-              </span>
-            </div>
-            <div class="form-group">
-              <label for="templates_url" class="col-sm-2 control-label text-left"> URL </label>
-              <div class="col-sm-10">
-                <input
-                  type="text"
-                  class="form-control"
-                  ng-model="settings.TemplatesURL"
-                  id="templates_url"
-                  placeholder="https://myserver.mydomain/templates.json"
-                  required
-                  data-cy="settings-templateUrl"
-                />
-              </div>
-            </div>
-          </div>
-          <!-- !templates -->
-          <!-- actions -->
-          <div class="form-group">
-            <div class="col-sm-12">
-              <button
-                type="button"
-                class="btn btn-primary btn-sm"
-                ng-click="saveApplicationSettings()"
-                ng-disabled="state.actionInProgress || !settings.TemplatesURL"
-                button-spinner="state.actionInProgress"
-                data-cy="settings-saveSettingsButton"
-              >
-                <span ng-hide="state.actionInProgress">Save application settings</span>
-                <span ng-show="state.actionInProgress">Saving...</span>
-              </button>
-            </div>
-          </div>
-          <!-- !actions -->
-        </form>
-      </rd-widget-body>
-    </rd-widget>
-  </div>
-</div>
 
 <div class="row">
   <div class="col-sm-12">

app/portainer/views/settings/settingsController.js

@@ -15,10 +15,11 @@ angular.module('portainer.app').controller('SettingsController', [
     $scope.s3BackupFeatureId = FeatureId.S3_BACKUP_SETTING;
     $scope.enforceDeploymentOptions = FeatureId.ENFORCE_DEPLOYMENT_OPTIONS;
 
+    $scope.updateSettings = updateSettings;
+
     $scope.backupOptions = options;
 
     $scope.state = {
-      isDemo: false,
       actionInProgress: false,
       availableKubeconfigExpiryOptions: [
         {
@@ -50,32 +51,16 @@ angular.module('portainer.app').controller('SettingsController', [
     $scope.BACKUP_FORM_TYPES = { S3: 's3', FILE: 'file' };
 
     $scope.formValues = {
-      customLogo: false,
       KubeconfigExpiry: undefined,
       HelmRepositoryURL: undefined,
       BlackListedLabels: [],
       labelName: '',
       labelValue: '',
-      enableTelemetry: false,
       passwordProtect: false,
       password: '',
       backupFormType: $scope.BACKUP_FORM_TYPES.FILE,
     };
 
-    $scope.initialFormValues = {};
-
-    $scope.onToggleEnableTelemetry = function onToggleEnableTelemetry(checked) {
-      $scope.$evalAsync(() => {
-        $scope.formValues.enableTelemetry = checked;
-      });
-    };
-
-    $scope.onToggleCustomLogo = function onToggleCustomLogo(checked) {
-      $scope.$evalAsync(() => {
-        $scope.formValues.customLogo = checked;
-      });
-    };
-
     $scope.onToggleAutoBackups = function onToggleAutoBackups(checked) {
       $scope.$evalAsync(() => {
         $scope.formValues.scheduleAutomaticBackups = checked;
@@ -87,13 +72,6 @@ angular.module('portainer.app').controller('SettingsController', [
       $scope.state.featureLimited = limited;
     };
 
-    $scope.onChangeCheckInInterval = function (interval) {
-      $scope.$evalAsync(() => {
-        var settings = $scope.settings;
-        settings.EdgeAgentCheckinInterval = interval;
-      });
-    };
-
     $scope.removeFilteredContainerLabel = function (index) {
       const filteredSettings = $scope.formValues.BlackListedLabels.filter((_, i) => i !== index);
       const filteredSettingsPayload = { BlackListedLabels: filteredSettings };
@@ -133,20 +111,6 @@ angular.module('portainer.app').controller('SettingsController', [
         });
     };
 
-    // only update the values from the app settings widget. In future separate the api endpoints
-    $scope.saveApplicationSettings = function () {
-      const appSettingsPayload = {
-        SnapshotInterval: $scope.settings.SnapshotInterval,
-        LogoURL: $scope.formValues.customLogo ? $scope.settings.LogoURL : '',
-        EnableTelemetry: $scope.formValues.enableTelemetry,
-        TemplatesURL: $scope.settings.TemplatesURL,
-        EdgeAgentCheckinInterval: $scope.settings.EdgeAgentCheckinInterval,
-      };
-
-      $scope.state.actionInProgress = true;
-      updateSettings(appSettingsPayload, 'Application settings updated');
-    };
-
     // only update the values from the kube settings widget. In future separate the api endpoints
     $scope.saveKubernetesSettings = function () {
       const kubeSettingsPayload = {
@@ -160,13 +124,17 @@ angular.module('portainer.app').controller('SettingsController', [
     };
 
     function updateSettings(settings, successMessage = 'Settings updated') {
-      SettingsService.update(settings)
+      // ignore CloudApiKeys to avoid overriding them
+      //
+      // it is not ideal solution as API still accepts CloudAPIKeys
+      // which may override the cloud provider API keys
+      settings.CloudApiKeys = undefined;
+      return SettingsService.update(settings)
         .then(function success(response) {
           Notifications.success('Success', successMessage);
           StateManager.updateLogo(settings.LogoURL);
           StateManager.updateSnapshotInterval(settings.SnapshotInterval);
           StateManager.updateEnableTelemetry(settings.EnableTelemetry);
-          $scope.initialFormValues.enableTelemetry = response.EnableTelemetry;
           $scope.formValues.BlackListedLabels = response.BlackListedLabels;
         })
         .catch(function error(err) {
@@ -179,23 +147,14 @@ angular.module('portainer.app').controller('SettingsController', [
     }
 
     function initView() {
-      const state = StateManager.getState();
-      $scope.state.isDemo = state.application.demoEnvironment.enabled;
-
       SettingsService.settings()
         .then(function success(data) {
           var settings = data;
           $scope.settings = settings;
 
-          if (settings.LogoURL !== '') {
-            $scope.formValues.customLogo = true;
-          }
-
-          $scope.formValues.enableTelemetry = settings.EnableTelemetry;
           $scope.formValues.KubeconfigExpiry = settings.KubeconfigExpiry;
           $scope.formValues.HelmRepositoryURL = settings.HelmRepositoryURL;
           $scope.formValues.BlackListedLabels = settings.BlackListedLabels;
-          $scope.initialFormValues.enableTelemetry = settings.EnableTelemetry;
         })
         .catch(function error(err) {
           Notifications.error('Failure', err, 'Unable to retrieve application settings');