@rancher/shell 0.3.5 → 0.3.7

package/core/types.ts

@@ -1,3 +1,4 @@
+import { ProductFunction } from './plugin';
 import { RouteConfig } from 'vue-router';
 
 // package.json metadata
@@ -136,6 +137,255 @@ export type LocationConfig = {
   mode?: string[]
 };
 
+export interface ProductOptions {
+  /**
+   * The category this product belongs under. i.e. 'config'
+   */
+  category?: string;
+
+  /**
+   * Hide the Copy KubeConfig button in the header
+   */
+  hideCopyConfig?: boolean;
+
+  /**
+   * Hide the Download KubeConfig button in the header
+   */
+  hideKubeConfig?: boolean;
+
+  /**
+   * Hide the Kubectl Shell button in the header
+   */
+  hideKubeShell?: boolean;
+
+  /**
+   * Hide the Namespace location
+   */
+  hideNamespaceLocation?: boolean;
+
+  /**
+   * Hide the system resources
+   */
+
+  hideSystemResources?: boolean;
+  /**
+   * The icon that should be displayed beside this item in the navigation.
+   */
+  icon?: string,
+
+  /**
+   * Only load the product if the feature is present
+   */
+  ifFeature?: string | RegExp;
+
+  /**
+   * Only load the product if the type is present
+   */
+  ifHave?: string;
+
+  /**
+   * Only load the product if the group is present
+   */
+  ifHaveGroup?: string | RegExp;
+
+  /**
+   * Only load the product if the type is present
+   */
+  ifHaveType?: string | RegExp;
+
+  /**
+   * The vuex store that this product should use by default i.e. 'management'
+   */
+  inStore?: string;
+
+  /**
+   * Show the cluster switcher in the navigation
+   */
+  showClusterSwitcher?: boolean;
+
+  /**
+   * Show the namespace filter in the header
+   */
+  showNamespaceFilter?: boolean;
+
+  /**
+   * A number used to determine where in navigation this item will be placed. The highest number will be at the top of the list.
+   */
+  weight?: number;
+
+  /**
+   * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
+   */
+  // ifHaveVerb: string | RegExp;
+  // removable: string;
+  // showWorkspaceSwitcher: boolean;
+  // supportRoute: string;
+  // to: string;
+  // typeStoreMap: string;
+}
+
+export interface HeaderOptions {
+  /**
+   * Name of the header. This should be unique.
+   */
+  name?: string;
+
+  /**
+   * A translation key where the resulting string will show in the table column
+   */
+  labelKey?: string;
+
+  /**
+   * A string which represents the path to access the value from the row object i.e. `row.meta.value`.
+   */
+  value?: string;
+
+  /**
+   * A string which represents the path to access the value from the row object which we'll use to sort i.e. `row.meta.value`
+   */
+  sort?: string;
+
+  /**
+   * A string which represents the path to access the value from the row object which we'll use to search i.e. `row.meta.value`
+   */
+  search?: string;
+
+  /**
+   * Number of pixels the column should be in the table
+   */
+  width?: number;
+
+  /**
+   * The name of a custom formatter. The available formatters can bee seen in `@rancher/shell/components/formatter`
+   */
+  formatter?: string;
+
+  /**
+   * These options are dependent on the formatter that's chosen. Examples can be seen in `@rancher/shell/components/formatter` and `@rancher/shell/config/table-headers`
+   */
+  formatterOpts?: any;
+
+  /**
+   * Provide a function which accets a row and returns the value that should be displayed in the column
+   * @param row This can be any value which represents the row
+   * @returns Can return {@link string | number | null | undefined} to display in the column
+   */
+  getValue?: (row: any) => string | number | null | undefined;
+}
+
+export interface ConfigureTypeOptions {
+  /**
+   * The resource can edit/show yaml
+   */
+  canYaml?: boolean;
+
+  /**
+   * Modify the way the name looks when displayed
+   */
+  displayName?: string;
+
+  /**
+   * New resources can be created of this type
+   */
+  isCreatable?: boolean;
+
+  /**
+   * Resources of this type can be deleted/removed
+   */
+  isRemovable?: boolean;
+
+  /**
+   * This type should be grouped by namespaces when displayed in a table
+   */
+  namespaced?: boolean;
+
+  /**
+   * Show the age column in when displaying this type in a table
+   */
+  showAge?: boolean;
+
+   /**
+   * Show the masthead at the top of the list view of this type
+   */
+  showListMasthead?: boolean;
+
+   /**
+   * Show the state column in when displaying this type in a table
+   */
+  showState?: boolean;
+
+  /**
+   * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
+   */
+  // alias
+  // customRoute
+  // customRoute
+  // depaginate
+  // graphConfig
+  // hasGraph
+  // isEditable
+  // limit
+  // listGroups
+  // localOnly
+  // location
+  // match
+  // realResource
+  // resource
+  // resourceDetail
+  // resourceEdit
+  // showConfigView
+}
+
+export interface DSLReturnType {
+  /**
+   * Register multiple types by name and place them all in a group if desired. Primarily used for grouping things in the cluster explorer navigation.
+   * @param types A list of types that are going to be registered
+   * @param group Conditionally a group you want to places all the types in
+   * @returns {@link void}
+   */
+  basicType: (types: string[], group?: string) => void;
+
+  /**
+   * Configure a myriad of options for the specified type
+   * @param type The type to be configured
+   * @param options {@link ConfigureTypeOptions}
+   * @returns {@link void}
+   */
+  configureType: (type: string, options: ConfigureTypeOptions) => void;
+
+  /**
+   * Register the headers/columns that should be used when rendering a table for the specified type.
+   * @param type The type you'd like to register headers/columns for.
+   * @param headers {@link HeaderOptions[]}
+   * @returns {@link void}
+   */
+  headers: (type: string, headers: HeaderOptions[]) => void;
+
+  /**
+   * Create and register a new product
+   * @param options {@link ProductOptions}
+   * @returns {@link void}
+   */
+  product: (options: ProductOptions) => void;
+
+  /**
+   * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
+   */
+  // componentForType: (type: string, replacementType: string)
+  // groupBy: (type: string, field: string)
+  // hideBulkActions: (type: string, field)
+  // ignoreGroup: (regexOrString)
+  // ignoreType: (regexOrString)
+  // mapGroup: (match, replace)
+  // mapType: (match, replace)
+  // moveType: (match, group)
+  // setGroupDefaultType: (input, defaultType)
+  // spoofedType: (obj)
+  // virtualType: (obj)
+  // weightGroup: (input, weight, forBasic)
+  // weightType: (input, weight, forBasic)
+}
+
 /**
  * Interface for a Dashboard plugin
  */
@@ -144,7 +394,7 @@ export interface IPlugin {
    * Add a product
    * @param importFn Function that will import the module containing a product definition
    */
-  addProduct(importFn: Function): void;
+  addProduct(importFn: ProductFunction): void;
 
   /**
    * Add a locale to the i18n store
@@ -249,4 +499,11 @@ export interface IPlugin {
    * @param {Function} fn function that dynamically loads the module for the thing being registered
    */
   register(type: string, name: string, fn: Function): void;
+
+  /**
+   * Will return all of the configuration functions used for creating a new product.
+   * @param store The store that was passed to the function that's passed to `plugin.addProduct(function)`
+   * @param productName The name of the new product. This name is displayed in the navigation.
+   */
+  DSL(store: any, productName: string): DSLReturnType;
 }

package/creators/app/files/tsconfig.json

@@ -31,7 +31,6 @@
     ],    
     "types": [
       "@types/node",
-      "@nuxt/types",
       "cypress",
       "rancher",
       "shell"

package/creators/app/files/vue.config.js

@@ -3,5 +3,4 @@ const config = require('@rancher/shell/vue.config');
 module.exports = config(__dirname, {
   excludes: [],
   // excludes: ['fleet', 'example']
-  // autoLoad: ['fleet', 'example']
 });

package/creators/pkg/files/.github/workflows/build-extension.yml

@@ -64,7 +64,7 @@ jobs:
         shell: bash
         id: build_script
         run: |
-          yarn publish-pkgs -s "${{ github.repository }}" -b main
+          yarn publish-pkgs -s "${{ github.repository }}" -b gh-pages
 
       - name: Upload charts artifact
         if: github.ref == 'refs/heads/main' && github.event_name != 'pull_request'
@@ -83,8 +83,7 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
         with:
-          fetch-depth: 0
-          ref: main
+          ref: gh-pages
 
       - name: Configure Git
         run: |
@@ -105,7 +104,7 @@ jobs:
       - name: Run chart-releaser
         uses: helm/chart-releaser-action@v1.4.1
         with:
-          charts_dir: ./charts
+          charts_dir: ./charts/*
         env:
           CR_TOKEN: '${{ secrets.GITHUB_TOKEN }}'
           CR_SKIP_EXISTING: true

package/creators/pkg/files/tsconfig.json

@@ -23,7 +23,6 @@
       "@types/node",
       "@types/jest",
       "@types/lodash",
-      "@nuxt/types",
       "rancher",
       "shell"
     ],

package/creators/pkg/pkg.package.json

@@ -9,9 +9,9 @@
     "node": ">=12"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/cli-plugin-typescript": "^4.5.15"
+    "@vue/cli-plugin-babel": "4.5.18",
+    "@vue/cli-service": "4.5.18",
+    "@vue/cli-plugin-typescript": "4.5.18"
   },
   "browserslist": [
     "> 1%",

package/detail/constraints.gatekeeper.sh.constraint.vue

@@ -2,18 +2,26 @@
 import CreateEditView from '@shell/mixins/create-edit-view';
 import SortableTable from '@shell/components/SortableTable';
 import Banner from '@components/Banner/Banner.vue';
-import { CONSTRAINT_VIOLATION_RESOURCE_LINK, CONSTRAINT_VIOLATION_MESSAGE, CONSTRAINT_VIOLATION_TYPE } from '@shell/config/table-headers';
+import {
+  CONSTRAINT_VIOLATION_RESOURCE_LINK,
+  CONSTRAINT_VIOLATION_MESSAGE,
+  CONSTRAINT_VIOLATION_TYPE,
+  CONSTRAINT_VIOLATION_NAMESPACE,
+} from '@shell/config/table-headers';
 
 export default {
   components: { Banner, SortableTable },
   mixins:     [CreateEditView],
   data() {
+    const headers = [
+      CONSTRAINT_VIOLATION_TYPE,
+      CONSTRAINT_VIOLATION_NAMESPACE,
+      CONSTRAINT_VIOLATION_RESOURCE_LINK,
+      CONSTRAINT_VIOLATION_MESSAGE
+    ];
+
     return {
-      headers: [
-        CONSTRAINT_VIOLATION_TYPE,
-        CONSTRAINT_VIOLATION_RESOURCE_LINK,
-        CONSTRAINT_VIOLATION_MESSAGE
-      ],
+      headers,
       violations: this.value.violations.map((violation, i) => ({ ...violation, id: i }))
     };
   }
@@ -46,7 +54,6 @@ export default {
         <SortableTable
           :headers="headers"
           :rows="violations"
-          :search="false"
           :table-actions="false"
           :row-actions="false"
           :paging="true"

package/detail/fleet.cattle.io.clustergroup.vue

@@ -5,6 +5,7 @@ import FleetClusters from '@shell/components/fleet/FleetClusters';
 import ResourceTabs from '@shell/components/form/ResourceTabs';
 import Tab from '@shell/components/Tabbed/Tab';
 import { FLEET } from '@shell/config/types';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   name: 'DetailClusterGroup',
@@ -25,7 +26,12 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER });
+    const hash = {
+      workspaces:    this.$store.dispatch('cluster/findAll', { type: FLEET.WORKSPACE }),
+      FleetClusters: this.$store.dispatch('management/findAll', { type: FLEET.CLUSTER }),
+    };
+
+    await allHash(hash);
   },
 
   computed: {

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>