@rancher/shell 0.3.6 → 0.3.7

package/assets/translations/en-us.yaml

@@ -455,7 +455,13 @@ authConfig:
     objectClass: Object Class
     password: Password
     port: Port
+    protocol: Protocol
+    protocols:
+      starttls: Start TLS
+      ldap: LDAP
+      tls: LDAPS (TLS)
     customizeSchema: Customize Schema
+    oktaSchema: 'The defaults below are for a generic OpenLDAP server. For more information on the values to use when using the Okta LDAP interface, see: <a target="_blank" rel="noopener noreferrer nofollow" href="https://help.okta.com/en-us/Content/Topics/Directory/LDAP-interface-connection-settings.htm">Okta LDAP Interface connection settings</a>'
     users: Users
     groups: Groups
     searchAttribute: Search Attribute
@@ -500,6 +506,13 @@ authConfig:
     shibboleth: Configure a Shibboleth account
     showLdap: Configure an OpenLDAP Server
     userName: User Name Field
+    search:
+      title: User and Group Search
+      message: The SAML Protocol does not support search or lookup for users or groups. In order to enabled search, an OpenLDAP server must be configured.
+      on: LDAP User and Group search has been configured
+      off: LDAP User and Group search is not configured
+      show: Show details
+      hide: Hide details
   azuread:
     tenantId: Tenant ID
     applicationId: Application ID

package/components/auth/AuthBanner.vue

@@ -73,6 +73,12 @@ export default {
     >
       <slot name="rows" />
     </table>
+
+    <slot
+      v-if="$slots.footer"
+      name="footer"
+    />
+
     <DisableAuthProviderModal
       ref="disableAuthProviderModal"
       @disable="disable"

package/edit/auth/ldap/config.vue

@@ -5,6 +5,7 @@ import { Checkbox } from '@components/Form/Checkbox';
 import UnitInput from '@shell/components/form/UnitInput';
 import { Banner } from '@components/Banner';
 import FileSelector from '@shell/components/form/FileSelector';
+import { OKTA, SHIBBOLETH } from '../saml';
 
 const DEFAULT_NON_TLS_PORT = 389;
 const DEFAULT_TLS_PORT = 636;
@@ -33,6 +34,11 @@ export default {
     type: {
       type:     String,
       required: true
+    },
+
+    isCreate: {
+      type:    Boolean,
+      default: false
     }
 
   },
@@ -46,9 +52,17 @@ export default {
       model:         this.value,
       hostname:      this.value.servers.join(','),
       serverSetting: null,
+      OKTA
     };
   },
 
+  computed: {
+    // Does the auth provider support LDAP for search in addition to SAML?
+    isSamlProvider() {
+      return this.type === SHIBBOLETH || this.type === OKTA;
+    }
+  },
+
   watch: {
     hostname(neu, old) {
       this.value.servers = neu.split(',');
@@ -232,6 +246,12 @@ export default {
       <div class="row">
         <h3>  {{ t('authConfig.ldap.customizeSchema') }}</h3>
       </div>
+      <Banner
+        v-if="type === OKTA && isCreate"
+        class="row"
+        color="info"
+        label-key="authConfig.ldap.oktaSchema"
+      />
       <div class="row">
         <div class="col span-6">
           <h4>{{ t('authConfig.ldap.users') }}</h4>
@@ -361,7 +381,7 @@ export default {
           />
         </div>
         <div
-          v-if="type!=='shibboleth'"
+          v-if="!isSamlProvider"
           class=" col span-6"
         >
           <RadioGroup

package/edit/auth/saml.vue

@@ -11,6 +11,31 @@ import FileSelector from '@shell/components/form/FileSelector';
 import AuthBanner from '@shell/components/auth/AuthBanner';
 import config from '@shell/edit/auth/ldap/config';
 
+export const SHIBBOLETH = 'shibboleth';
+export const OKTA = 'okta';
+
+// Standard LDAP defaults
+const LDAP_DEFAULTS = {
+  connectionTimeout:            5000,
+  groupDNAttribute:             'entryDN',
+  groupMemberMappingAttribute:  'member',
+  groupMemberUserAttribute:     'entryDN',
+  groupNameAttribute:           'cn',
+  groupObjectClass:             'groupOfNames',
+  groupSearchAttribute:         'cn',
+  nestedGroupMembershipEnabled: false,
+  port:                         389,
+  servers:                      [],
+  starttls:                     false,
+  tls:                          false,
+  disabledStatusBitmask:        0,
+  userLoginAttribute:           'uid',
+  userMemberAttribute:          'memberOf',
+  userNameAttribute:            'cn',
+  userObjectClass:              'inetOrgPerson',
+  userSearchAttribute:          'uid|sn|givenName'
+};
+
 export default {
   components: {
     Loading,
@@ -26,7 +51,10 @@ export default {
 
   mixins: [CreateEditView, AuthConfig],
   data() {
-    return { showLdap: false };
+    return {
+      showLdap:        false,
+      showLdapDetails: false,
+    };
   },
 
   computed: {
@@ -42,32 +70,32 @@ export default {
       return { enabled: true, ...this.model };
     },
 
+    // Does the auth provider support LDAP for search in addition to SAML?
+    supportsLDAPSearch() {
+      return this.NAME === SHIBBOLETH || this.NAME === OKTA;
+    },
+
+    ldapHosts() {
+      const hosts = this.model?.openLdapConfig.servers || [];
+
+      return hosts.join(',');
+    },
+
+    ldapProtocol() {
+      if (this.model?.openLdapConfig?.starttls) {
+        return this.t('authConfig.ldap.protocols.starttls');
+      } else if (this.model?.openLdapConfig?.tls) {
+        return this.t('authConfig.ldap.protocols.tls');
+      }
+
+      return this.t('authConfig.ldap.protocols.ldap');
+    }
   },
   watch: {
     showLdap(neu, old) {
       if (neu && !this.model.openLdapConfig) {
-        const config = {
-          connectionTimeout:            5000,
-          groupDNAttribute:             'entryDN',
-          groupMemberMappingAttribute:  'member',
-          groupMemberUserAttribute:     'entryDN',
-          groupNameAttribute:           'cn',
-          groupObjectClass:             'groupOfNames',
-          groupSearchAttribute:         'cn',
-          nestedGroupMembershipEnabled: false,
-          port:                         389,
-          servers:                      [],
-          starttls:                     false,
-          tls:                          false,
-          disabledStatusBitmask:        0,
-          userLoginAttribute:           'uid',
-          userMemberAttribute:          'memberOf',
-          userNameAttribute:            'cn',
-          userObjectClass:              'inetOrgPerson',
-          userSearchAttribute:          'uid|sn|givenName'
-        };
-
-        this.$set(this.model, 'openLdapConfig', config);
+        // Use a spread of config, so that if don't make changes to the defaults if the user edits them
+        this.$set(this.model, 'openLdapConfig', { ...LDAP_DEFAULTS });
       }
     }
   }
@@ -98,7 +126,9 @@ export default {
           :disable="disable"
           :edit="goToEdit"
         >
-          <template slot="rows">
+          <template
+            slot="rows"
+          >
             <tr><td>{{ t(`authConfig.saml.displayName`) }}: </td><td>{{ model.displayNameField }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.userName`) }}: </td><td>{{ model.userNameField }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.UID`) }}: </td><td>{{ model.uidField }}</td></tr>
@@ -106,6 +136,47 @@ export default {
             <tr><td>{{ t(`authConfig.saml.api`) }}: </td><td>{{ model.rancherApiHost }}</td></tr>
             <tr><td>{{ t(`authConfig.saml.groups`) }}: </td><td>{{ model.groupsField }}</td></tr>
           </template>
+
+          <template
+            v-if="supportsLDAPSearch"
+            slot="footer"
+          >
+            <Banner
+              v-if="showLdap"
+              color="success"
+              class="banner"
+            >
+              <div
+                class="advanced-ldap-banner"
+              >
+                <div>{{ t('authConfig.saml.search.on') }}</div>
+                <div>
+                  <a
+                    class="toggle-btn"
+                    @click="showLdapDetails = !showLdapDetails"
+                  >
+                    <template v-if="showLdapDetails">{{ t('authConfig.saml.search.hide') }}</template>
+                    <template v-else>{{ t('authConfig.saml.search.show') }}</template>
+                  </a>
+                </div>
+              </div>
+            </Banner>
+            <Banner
+              v-else
+              color="info"
+            >
+              {{ t('authConfig.saml.search.off') }}
+            </Banner>
+
+            <table v-if="showLdapDetails && model.openLdapConfig">
+              <tr><td>{{ t('authConfig.ldap.hostname.label') }}:</td><td>{{ ldapHosts }}</td></tr>
+              <tr><td>{{ t('authConfig.ldap.port') }}:</td><td>{{ model.openLdapConfig.port }}</td></tr>
+              <tr><td>{{ t('authConfig.ldap.protocol') }}:</td><td>{{ ldapProtocol }}</td></tr>
+              <tr><td>{{ t('authConfig.ldap.serviceAccountDN') }}:</td><td>{{ model.openLdapConfig.serviceAccountDistinguishedName }}</td></tr>
+              <tr><td>{{ t('authConfig.ldap.userSearchBase.label') }}:</td><td>{{ model.openLdapConfig.userSearchBase }}</td></tr>
+              <tr><td>{{ t('authConfig.ldap.groupSearchBase.label') }}:</td><td>{{ model.openLdapConfig.groupSearchBase }}</td></tr>
+            </table>
+          </template>
         </AuthBanner>
 
         <hr>
@@ -233,7 +304,26 @@ export default {
             />
           </div>
         </div>
-        <div v-if="NAME === 'shibboleth'">
+        <div
+          v-if="!model.enabled"
+          class="row"
+        >
+          <div class="col span-12">
+            <Banner color="info">
+              <div v-clean-html="t('authConfig.associatedWarning', tArgs, true)" />
+            </Banner>
+          </div>
+        </div>
+        <div v-if="supportsLDAPSearch">
+          <div class="row">
+            <h2>{{ t('authConfig.saml.search.title') }}</h2>
+          </div>
+          <div class="row">
+            <Banner
+              label-key="authConfig.saml.search.message"
+              color="info"
+            />
+          </div>
           <div class="row">
             <Checkbox
               v-model="showLdap"
@@ -243,25 +333,15 @@ export default {
           </div>
           <div class="row mt-20 mb-20">
             <config
-              v-if="showLdap"
+              v-if="showLdap && model.openLdapConfig"
               v-model="model.openLdapConfig"
               :type="NAME"
               :mode="mode"
+              :is-create="!model.enabled"
             />
           </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>
@@ -274,4 +354,19 @@ export default {
       margin: 0 3px;
     }
   }
+
+  // Banner shows message and link formatted right aligned
+  .advanced-ldap-banner {
+    display: flex;
+    flex: 1;
+
+    > :first-child {
+      flex: 1;
+    }
+
+    .toggle-btn {
+      cursor: pointer;
+      user-select: none;
+    }
+  }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/scripts/extension/publish

@@ -82,7 +82,7 @@ pushd ${BASE_DIR} > /dev/null
 
 if [ "${GITHUB_BUILD}" == "true" ]; then
   # Determine if gh-pages build is possible
-  if [[ "${GITHUB_BRANCH}" == "gh-pages" ]] && ! git show-ref -q --heads gh-pages; then
+  if [[ "${GITHUB_BRANCH}" == "gh-pages" ]] && ! git show-ref -q gh-pages; then
     echo -e "${YELLOW}'gh-pages' branch not found, this branch must exist before running this script${RESET}"
     exit 1
   fi

package/utils/gc/gc.ts

@@ -29,7 +29,7 @@ class GarbageCollect {
    * To avoid JSON.parse on the `ui-performance` setting keep a local cache
    */
   private getUiPerfGarbageCollection = (rootState: any) => {
-    const uiPerfSetting = rootState.management.types[MANAGEMENT.SETTING].list.find((s: any) => s.id === SETTING.UI_PERFORMANCE);
+    const uiPerfSetting = rootState.management.types[MANAGEMENT.SETTING]?.list.find((s: any) => s.id === SETTING.UI_PERFORMANCE);
 
     if (!uiPerfSetting || !uiPerfSetting.value) {
       // Could be in the process of logging out