@rancher/shell 1.2.3 → 2.0.1

package/edit/auth/azuread.vue

@@ -2,17 +2,20 @@
 import isEqual from 'lodash/isEqual';
 import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
 import CruResource from '@shell/components/CruResource';
 import InfoBox from '@shell/components/InfoBox';
 import { RadioGroup } from '@components/Form/Radio';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { Banner } from '@components/Banner';
+import { Checkbox } from '@components/Form/Checkbox';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText.vue';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import AuthConfig from '@shell/mixins/auth-config';
 import { AZURE_MIGRATED } from '@shell/config/labels-annotations';
 import { get } from '@shell/utils/object';
+import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
+import formRulesGenerator from '@shell/utils/validators/formRules/index';
 
 const TENANT_ID_TOKEN = '__[[TENANT_ID]]__';
 
@@ -58,13 +61,14 @@ export default {
     InfoBox,
     RadioGroup,
     LabeledInput,
-    Banner,
+    Checkbox,
     CopyToClipboardText,
     AllowedPrincipals,
-    AuthBanner
+    AuthBanner,
+    AuthProviderWarningBanners
   },
 
-  mixins: [CreateEditView, AuthConfig],
+  mixins: [CreateEditView, AuthConfig, FormValidation],
 
   async fetch() {
     await this.reloadModel();
@@ -76,16 +80,43 @@ export default {
 
   data() {
     return {
-      endpoint:    'standard',
-      oldEndpoint: false,
+      isGroupMembershipFilterEnabled: !!this.value.groupMembershipFilter,
+      endpoint:                       'standard',
+      oldEndpoint:                    false,
 
       // Storing the applicationSecret is necessary because norman doesn't support returning secrets and when we
       // override the steve authconfig with a norman config the applicationSecret is lost
-      applicationSecret: this.value.applicationSecret
+      applicationSecret: this.value.applicationSecret,
+      fvFormRuleSets:    [
+        { path: 'tenantId', rules: ['tenantIdRequired'] },
+        { path: 'applicationId', rules: ['applicationIdRequired'] },
+        { path: 'applicationSecret', rules: ['applicationSecretRequired'] },
+        { path: 'endpoint', rules: ['endpointRequired', 'endpointMustBeURL'] },
+        { path: 'graphEndpoint', rules: ['graphEndpointRequired', 'graphEndpointMustBeURL'] },
+        { path: 'tokenEndpoint', rules: ['tokenEndpointRequired', 'tokenEndpointMustBeURL'] },
+        { path: 'authEndpoint', rules: ['authEndpointRequired', 'authEndpointMustBeURL'] },
+      ]
     };
   },
 
   computed: {
+    // Cannot pass this.model as a rootObject because it is undefined at that point, so had to use a workaround
+    fvExtraRules() {
+      return {
+        tenantIdRequired:          this.modelFieldRequired('tenantId', 'authConfig.azuread.tenantId.label'),
+        applicationIdRequired:     this.modelFieldRequired('applicationId', 'authConfig.azuread.applicationId.label'),
+        applicationSecretRequired: this.applicationSecretRequired(),
+        endpointRequired:          this.modelFieldRequired('endpoint', 'authConfig.azuread.endpoint.label'),
+        endpointMustBeURL:         this.modelFieldURL('endpoint'),
+        graphEndpointRequired:     this.modelFieldRequired('graphEndpoint', 'authConfig.azuread.graphEndpoint.label'),
+        graphEndpointMustBeURL:    this.modelFieldURL('graphEndpoint'),
+        tokenEndpointRequired:     this.modelFieldRequired('tokenEndpoint', 'authConfig.azuread.tokenEndpoint.label'),
+        tokenEndpointMustBeURL:    this.modelFieldURL('tokenEndpoint'),
+        authEndpointRequired:      this.modelFieldRequired('authEndpoint', 'authConfig.azuread.authEndpoint.label'),
+        authEndpointMustBeURL:     this.modelFieldURL('authEndpoint')
+      };
+    },
+
     tArgs() {
       return {
         baseUrl:  this.baseUrl,
@@ -131,6 +162,9 @@ export default {
         title:       this.t('authConfig.azuread.updateEndpoint.modal.title'),
         body:        this.t('authConfig.azuread.updateEndpoint.modal.body', null, { raw: true })
       };
+    },
+    editMemberConfig() {
+      return this.model.enabled && !this.isEnabling && !this.editConfig;
     }
   },
 
@@ -160,6 +194,13 @@ export default {
   },
 
   methods: {
+    toggleGroupMembershipFilter(enabled) {
+      // reset the value of groupMembershipFilter when its filter gets disabled
+      if (!enabled) {
+        this.model.groupMembershipFilter = '';
+      }
+    },
+
     setEndpoints(endpoint) {
       if (this.editConfig || !this.model.enabled) {
         const endpointType = this.oldEndpoint && endpoint !== 'custom' ? OLD_ENDPOINTS : ENDPOINT_MAPPING;
@@ -243,6 +284,23 @@ export default {
             btnCB(false);
           });
       }
+    },
+    modelFieldRequired(path, label) {
+      return () => {
+        return !this.model[path] ? `${ this.t('validation.required', { key: this.t(label) }) }` : undefined;
+      };
+    },
+    applicationSecretRequired() {
+      return () => {
+        return !this.editMemberConfig && !this.model.applicationSecret ? `${ this.t('validation.required', { key: this.t('authConfig.azuread.applicationSecret.label') }) }` : undefined;
+      };
+    },
+    modelFieldURL(path) {
+      return () => {
+        const rule = formRulesGenerator(this.$store.getters['i18n/t'], {}).url;
+
+        return rule(this.model[path]);
+      };
     }
   }
 };
@@ -256,17 +314,17 @@ export default {
       :mode="mode"
       :resource="model"
       :subtypes="[]"
-      :validation-passed="true"
+      :validation-passed="fvFormIsValid"
       :finish-button-mode="model && model.enabled ? 'edit' : 'enable'"
       :can-yaml="false"
       :errors="errors"
       :show-cancel="showCancel"
       :cancel-event="true"
-      @error="e => (errors = e)"
+      @error="e=>errors = e"
       @finish="save"
       @cancel="cancel"
     >
-      <template v-if="model.enabled && !isEnabling && !editConfig">
+      <template v-if="editMemberConfig">
         <AuthBanner
           :t-args="tArgs"
           :disable="disable"
@@ -274,27 +332,27 @@ export default {
         >
           <template slot="rows">
             <tr>
-              <td>{{ t(`authConfig.azuread.tenantId`) }}:</td>
+              <td>{{ t(`authConfig.azuread.tenantId.label`) }}:</td>
               <td>{{ model.tenantId }}</td>
             </tr>
             <tr>
-              <td>{{ t(`authConfig.azuread.applicationId`) }}:</td>
+              <td>{{ t(`authConfig.azuread.applicationId.label`) }}:</td>
               <td>{{ model.applicationId }}</td>
             </tr>
             <tr>
-              <td>{{ t(`authConfig.azuread.endpoint`) }}:</td>
+              <td>{{ t(`authConfig.azuread.endpoint.label`) }}:</td>
               <td>{{ model.endpoint }}</td>
             </tr>
             <tr>
-              <td>{{ t(`authConfig.azuread.graphEndpoint`) }}:</td>
+              <td>{{ t(`authConfig.azuread.graphEndpoint.label`) }}:</td>
               <td>{{ model.graphEndpoint }}</td>
             </tr>
             <tr>
-              <td>{{ t(`authConfig.azuread.tokenEndpoint`) }}:</td>
+              <td>{{ t(`authConfig.azuread.tokenEndpoint.label`) }}:</td>
               <td>{{ model.tokenEndpoint }}</td>
             </tr>
             <tr>
-              <td>{{ t(`authConfig.azuread.authEndpoint`) }}:</td>
+              <td>{{ t(`authConfig.azuread.authEndpoint.label`) }}:</td>
               <td>{{ model.authEndpoint }}</td>
             </tr>
           </template>
@@ -322,10 +380,9 @@ export default {
       </template>
 
       <template v-else>
-        <Banner
+        <AuthProviderWarningBanners
           v-if="!model.enabled"
-          :label="t('authConfig.stateBanner.disabled', tArgs)"
-          color="warning"
+          :t-args="tArgs"
         />
 
         <InfoBox
@@ -347,11 +404,13 @@ export default {
             <LabeledInput
               id="tenant-id"
               v-model="model.tenantId"
-              label="Tenant ID"
+              :label="t('authConfig.azuread.tenantId.label')"
               :mode="mode"
               :required="true"
-              tooltip="From the Azure AD portal"
-              placeholder="A long UUID string"
+              :rules="fvGetAndReportPathRules('tenantId')"
+              :tooltip="t('authConfig.azuread.tenantId.tooltip')"
+              :placeholder="t('authConfig.azuread.tenantId.placeholder')"
+              data-testid="input-azureAD-tenantId"
             />
           </div>
         </div>
@@ -360,10 +419,12 @@ export default {
             <LabeledInput
               id="application-id"
               v-model="model.applicationId"
-              label="Application ID"
+              :label="t('authConfig.azuread.applicationId.label')"
               :mode="mode"
               :required="true"
-              placeholder="A long UUID string"
+              :rules="fvGetAndReportPathRules('applicationId')"
+              :placeholder="t('authConfig.azuread.applicationId.placeholder')"
+              data-testid="input-azureAD-applcationId"
             />
           </div>
           <div class="col span-6">
@@ -371,38 +432,75 @@ export default {
               id="application-secret"
               v-model="model.applicationSecret"
               type="password"
-              label="Application Secret"
+              :label="t('authConfig.azuread.applicationSecret.label')"
               :required="true"
+              :rules="fvGetAndReportPathRules('applicationSecret')"
+              :mode="mode"
+              data-testid="input-azureAD-applicationSecret"
+            />
+          </div>
+        </div>
+        <div class="row mb-20">
+          <div class="col span-12">
+            <Checkbox
+              v-model="isGroupMembershipFilterEnabled"
+              class="mb-10 mr-10"
               :mode="mode"
+              :label="t('authConfig.azuread.groupMembershipFilter.enable')"
+              :tooltip="t('authConfig.azuread.groupMembershipFilter.tooltip')"
+              data-testid="checkbox-azureAD-groupMembershipFilter"
+              @input="toggleGroupMembershipFilter"
             />
+            <div v-if="isGroupMembershipFilterEnabled">
+              <LabeledInput
+                v-model="model.groupMembershipFilter"
+                :label="t('authConfig.azuread.groupMembershipFilter.label')"
+                placeholder="e.g. (displayName eq 'group1') or (displayName eq 'group2')"
+                :mode="mode"
+                class="mb-10"
+                data-testid="input-azureAD-groupMembershipFilter"
+              />
+              <a
+                :href="t('authConfig.azuread.groupMembershipFilter.externalHelpLink')"
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+              >
+                {{ t('authConfig.azuread.groupMembershipFilter.externalHelp') }} <i class="icon icon-external-link" />
+              </a>
+            </div>
           </div>
         </div>
         <RadioGroup
           v-model="endpoint"
           class="mb-20"
           :required="true"
-          label="Endpoints"
+          :label="t('authConfig.azuread.endpoints.label')"
           name="endpoints"
           :options="['standard', 'china', 'custom']"
           :mode="mode"
-          :labels="['Standard', 'China', 'Custom']"
+          :labels="[t('authConfig.azuread.endpoints.standard'), t('authConfig.azuread.endpoints.china'), t('authConfig.azuread.endpoints.custom')]"
+          data-testid="endpoints-radio-input"
         />
         <div v-if="endpoint === 'custom'">
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
                 v-model="model.endpoint"
-                label="Endpoint"
+                :label="t('authConfig.azuread.endpoint.label')"
                 :mode="mode"
                 :required="true"
+                :rules="fvGetAndReportPathRules('endpoint')"
+                data-testid="input-azureAD-endpoint"
               />
             </div>
             <div class="col span-6">
               <LabeledInput
                 v-model="model.graphEndpoint"
-                label="Graph Endpoint"
+                :label="t('authConfig.azuread.graphEndpoint.label')"
                 :required="true"
+                :rules="fvGetAndReportPathRules('graphEndpoint')"
                 :mode="mode"
+                data-testid="input-azureAD-graphEndpoint"
               />
             </div>
           </div>
@@ -410,17 +508,21 @@ export default {
             <div class="col span-6">
               <LabeledInput
                 v-model="model.tokenEndpoint"
-                label="Token Endpoint"
+                :label="t('authConfig.azuread.tokenEndpoint.label')"
                 :mode="mode"
                 :required="true"
+                :rules="fvGetAndReportPathRules('tokenEndpoint')"
+                data-testid="input-azureAD-tokenEndpoint"
               />
             </div>
             <div class="col span-6">
               <LabeledInput
                 v-model="model.authEndpoint"
-                label="Auth Endpoint"
+                :label="t('authConfig.azuread.authEndpoint.label')"
                 :required="true"
+                :rules="fvGetAndReportPathRules('authEndpoint')"
                 :mode="mode"
+                data-testid="input-azureAD-authEndpoint"
               />
             </div>
           </div>

package/edit/auth/github.vue

@@ -4,7 +4,6 @@ import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import { RadioGroup } from '@components/Form/Radio';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { Banner } from '@components/Banner';
 import CopyToClipboard from '@shell/components/CopyToClipboard';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import { MANAGEMENT } from '@shell/config/types';
@@ -12,6 +11,7 @@ import { findBy } from '@shell/utils/array';
 import AuthConfig from '@shell/mixins/auth-config';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import InfoBox from '@shell/components/InfoBox';
+import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
 
 const NAME = 'github';
 
@@ -21,11 +21,11 @@ export default {
     CruResource,
     RadioGroup,
     LabeledInput,
-    Banner,
     CopyToClipboard,
     AllowedPrincipals,
     AuthBanner,
-    InfoBox
+    InfoBox,
+    AuthProviderWarningBanners
   },
 
   mixins: [CreateEditView, AuthConfig],
@@ -153,10 +153,9 @@ export default {
       </template>
 
       <template v-else>
-        <Banner
+        <AuthProviderWarningBanners
           v-if="!model.enabled"
-          :label="t('authConfig.stateBanner.disabled', tArgs)"
-          color="warning"
+          :t-args="tArgs"
         />
 
         <h3 v-t="`authConfig.${NAME}.target.label`" />
@@ -250,17 +249,6 @@ export default {
             />
           </div>
         </div>
-        <div
-          v-if="!model.enabled"
-          class="row"
-        >
-          <div class="col span-12">
-            <Banner
-              v-clean-html="t('authConfig.associatedWarning', tArgs, true)"
-              color="info"
-            />
-          </div>
-        </div>
       </template>
     </CruResource>
   </div>

package/edit/auth/googleoauth.vue

@@ -7,11 +7,11 @@ import CruResource from '@shell/components/CruResource';
 import InfoBox from '@shell/components/InfoBox';
 import { Checkbox } from '@components/Form/Checkbox';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { Banner } from '@components/Banner';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import FileSelector from '@shell/components/form/FileSelector';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import CopyToClipboardText from '@shell/components/CopyToClipboardText';
+import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
 
 const NAME = 'googleoauth';
 
@@ -21,23 +21,19 @@ export default {
     CruResource,
     InfoBox,
     LabeledInput,
-    Banner,
     Checkbox,
     AllowedPrincipals,
     FileSelector,
     AuthBanner,
-    CopyToClipboardText
+    CopyToClipboardText,
+    AuthProviderWarningBanners
   },
 
   mixins: [CreateEditView, AuthConfig],
 
   computed: {
     tArgs() {
-      let hostname = '';
-
-      if (process.client) {
-        hostname = window.location.hostname;
-      }
+      const hostname = window.location.hostname;
 
       return {
         hostname,
@@ -104,10 +100,9 @@ export default {
       </template>
 
       <template v-else>
-        <Banner
+        <AuthProviderWarningBanners
           v-if="!model.enabled"
-          :label="t('authConfig.stateBanner.disabled', tArgs)"
-          color="warning"
+          :t-args="tArgs"
         />
         <div
           :style="{'align-items':'center'}"
@@ -241,18 +236,6 @@ export default {
             </div>
           </div>
         </InfoBox>
-
-        <div
-          v-if="!model.enabled"
-          class="row"
-        >
-          <div class="col span-12 google">
-            <Banner
-              v-clean-html="t('authConfig.associatedWarning', tArgs, true)"
-              color="info"
-            />
-          </div>
-        </div>
       </template>
     </CruResource>
   </div>

package/edit/auth/ldap/index.vue

@@ -3,12 +3,12 @@ import Loading from '@shell/components/Loading';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { Banner } from '@components/Banner';
 import AllowedPrincipals from '@shell/components/auth/AllowedPrincipals';
 import config from '@shell/edit/auth/ldap/config';
 import AuthConfig from '@shell/mixins/auth-config';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import Password from '@shell/components/form/Password';
+import AuthProviderWarningBanners from '@shell/edit/auth/AuthProviderWarningBanners';
 
 const AUTH_TYPE = 'ldap';
 
@@ -17,11 +17,11 @@ export default {
     Loading,
     CruResource,
     LabeledInput,
-    Banner,
     AllowedPrincipals,
     config,
     AuthBanner,
-    Password
+    Password,
+    AuthProviderWarningBanners
   },
 
   mixins: [CreateEditView, AuthConfig],
@@ -109,10 +109,9 @@ export default {
       </template>
 
       <template v-else>
-        <Banner
+        <AuthProviderWarningBanners
           v-if="!model.enabled"
-          :label="t('authConfig.stateBanner.disabled', tArgs)"
-          color="warning"
+          :t-args="tArgs"
         />
 
         <h3>{{ t(`authConfig.ldap.${NAME}`) }}</h3>
@@ -142,17 +141,6 @@ export default {
           </div>
         </div>
       </template>
-      <div
-        v-if="!model.enabled"
-        class="row"
-      >
-        <div class="col span-12">
-          <Banner
-            v-clean-html="t('authConfig.associatedWarning', tArgs, true)"
-            color="info"
-          />
-        </div>
-      </div>
     </CruResource>
   </div>
 </template>