@rancher/shell 0.2.5 → 0.3.1

package/components/ExplorerMembers.vue

@@ -5,7 +5,12 @@ import Masthead from '@shell/components/ResourceList/Masthead';
 import { AGE, ROLE, STATE, PRINCIPAL } from '@shell/config/table-headers';
 import { canViewClusterPermissionsEditor } from '@shell/components/form/Members/ClusterPermissionsEditor.vue';
 import Banner from '@components/Banner/Banner.vue';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import SortableTable from '@shell/components/SortableTable';
 import { mapGetters } from 'vuex';
+import { canViewProjectMembershipEditor } from '@shell/components/form/Members/ProjectMembershipEditor.vue';
+import { allHash } from '@shell/utils/promise';
 
 /**
  * Explorer members page.
@@ -17,7 +22,10 @@ export default {
   components: {
     Banner,
     Masthead,
-    ResourceTable
+    ResourceTable,
+    Tabbed,
+    Tab,
+    SortableTable
   },
 
   props: {
@@ -38,19 +46,39 @@ export default {
       `rancher/schemaFor`
     ](NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING);
 
-    const hydration = [
-      clusterRoleTemplateBindingSchema ? this.$store.dispatch(
-        `rancher/findAll`,
-        { type: NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING },
-        { root: true }
-      ) : [],
-      clusterRoleTemplateBindingSchema ? this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING }) : [],
-      this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
-      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }),
-      this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE })
-    ];
-
-    await Promise.all(hydration);
+    const projectRoleTemplateBindingSchema = this.$store.getters['rancher/schemaFor'](NORMAN.PROJECT_ROLE_TEMPLATE_BINDING);
+
+    this.$set(this, 'normanClusterRTBSchema', clusterRoleTemplateBindingSchema);
+    this.$set(this, 'normanProjectRTBSchema', projectRoleTemplateBindingSchema);
+
+    if (clusterRoleTemplateBindingSchema) {
+      Promise.all([
+        this.$store.dispatch(`rancher/findAll`, { type: NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING }, { root: true }),
+        this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING })
+      ]).then(([normanBindings]) => {
+        this.$set(this, 'normanClusterRoleTemplateBindings', normanBindings);
+        this.loadingClusterBindings = false;
+      });
+    }
+
+    if (projectRoleTemplateBindingSchema) {
+      this.$store.dispatch('rancher/findAll', { type: NORMAN.PROJECT_ROLE_TEMPLATE_BINDING }, { root: true })
+        .then((bindings) => {
+          this.$set(this, 'projectRoleTemplateBindings', bindings);
+          this.loadingProjectBindings = false;
+        });
+    }
+
+    this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT })
+      .then(projects => this.$set(this, 'projects', projects));
+
+    const hydration = {
+      normanPrincipals:  this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
+      mgmt:              this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER }),
+      mgmtRoleTemplates: this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }),
+    };
+
+    await allHash(hydration);
   },
 
   data() {
@@ -66,54 +94,249 @@ export default {
           cluster: this.$store.getters['currentCluster'].id
         }
       },
-      resource: MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
-      VIRTUAL_TYPES
+      resource:                          MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING,
+      normanClusterRTBSchema:            null,
+      normanProjectRTBSchema:            null,
+      normanClusterRoleTemplateBindings: [],
+      projectRoleTemplateBindings:       [],
+      projects:                          [],
+      VIRTUAL_TYPES,
+      projectRoleTemplateColumns:        [
+        STATE,
+        {
+          name:      'member',
+          labeKey:   'generic.name',
+          value:     'principalId',
+          formatter: 'Principal'
+        },
+        {
+          name:     'role',
+          labelKey: 'tableHeaders.role',
+          value:    'roleTemplate.nameDisplay'
+        },
+        { ...AGE, value: 'createdTS' }
+      ],
+      loadingProjectBindings: true,
+      loadingClusterBindings: true
     };
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     clusterRoleTemplateBindings() {
-      return this.$store.getters[`rancher/all`](NORMAN.CLUSTER_ROLE_TEMPLATE_BINDING).map(b => b.clusterroletemplatebinding) ;
+      return this.normanClusterRoleTemplateBindings.map(b => b.clusterroletemplatebinding) ;
     },
-    ...mapGetters(['currentCluster']),
     filteredClusterRoleTemplateBindings() {
       return this.clusterRoleTemplateBindings.filter(
         b => b?.clusterName === this.$store.getters['currentCluster'].id
       );
     },
+    filteredProjects() {
+      return this.projects.reduce((all, p) => {
+        if (p?.spec?.clusterName === this.currentCluster.id) {
+          all[p.id] = p;
+        }
+
+        return all;
+      }, {});
+    },
+    filteredProjectRoleTemplateBindings() {
+      const out = this.projectRoleTemplateBindings.filter((rb) => {
+        const projectId = rb.projectId.replace(':', '/');
+
+        return !!this.filteredProjects[projectId];
+      });
+
+      return out;
+    },
+    projectsWithoutRoles() {
+      const inUse = this.filteredProjectRoleTemplateBindings.reduce((projects, binding) => {
+        const thisProjectId = (binding.projectId || '').replace(':', '/');
+
+        if (!projects.includes(thisProjectId)) {
+          projects.push(thisProjectId);
+        }
+
+        return projects;
+      }, []);
+
+      return Object.keys(this.filteredProjects).reduce((all, projectId) => {
+        const project = this.filteredProjects[projectId];
+
+        if ( !inUse.includes(projectId)) {
+          all.push(project);
+        }
+
+        return all;
+      }, []);
+    },
+
+    // We're using this because we need to show projects as groups even if the project doesn't have any role bindings
+    rowsWithFakeProjects() {
+      const fakeRows = this.projectsWithoutRoles.map((project) => {
+        return {
+          groupByLabel:     `${ ('resourceTable.groupLabel.notInAProject') }-${ project.id }`,
+          isFake:           true,
+          mainRowKey:       project.id,
+          nameDisplay:      project.spec?.displayName, // Enable filtering by the project name
+          project,
+          availableActions: [],
+          projectId:        project.id
+        };
+      });
+
+      return [...fakeRows, ...this.filteredProjectRoleTemplateBindings];
+    },
     canManageMembers() {
       return canViewClusterPermissionsEditor(this.$store);
     },
+    canManageProjectMembers() {
+      return canViewProjectMembershipEditor(this.$store);
+    },
     isLocal() {
       return this.$store.getters['currentCluster'].isLocal;
-    }
+    },
+    canEditProjectMembers() {
+      return this.normanProjectRTBSchema?.collectionMethods.find(x => x.toLowerCase() === 'post');
+    },
+    canEditClusterMembers() {
+      return this.normanClusterRTBSchema?.collectionMethods.find(x => x.toLowerCase() === 'post');
+    },
+  },
+  methods: {
+    getMgmtProjectId(group) {
+      return group.group.key.replace(':', '/');
+    },
+    getMgmtProject(group) {
+      return this.$store.getters['management/byId'](MANAGEMENT.PROJECT, this.getMgmtProjectId(group));
+    },
+    getProjectLabel(group) {
+      return this.getMgmtProject(group)?.spec?.displayName;
+    },
+    addProjectMember(group) {
+      this.$store.dispatch('cluster/promptModal', {
+        component:      'AddProjectMemberDialog',
+        componentProps: {
+          projectId:   group.group.key.replace('/', ':'),
+          saveInModal: true
+        },
+        modalSticky: true
+      });
+    },
+    slotName(project) {
+      return `main-row:${ project.id }`;
+    },
   }
 };
 </script>
 
 <template>
-  <div>
+  <div class="project-members">
     <Masthead
       :schema="schema"
       :resource="resource"
       :favorite-resource="VIRTUAL_TYPES.CLUSTER_MEMBERS"
       :create-location="createLocation"
       :create-button-label="t('members.createActionLabel')"
+      :is-creatable="false"
+      :type-display="t('members.clusterAndProject')"
     />
     <Banner
       v-if="isLocal"
       color="error"
       :label="t('members.localClusterWarning')"
     />
-    <ResourceTable
-      :schema="schema"
-      :headers="headers"
-      :rows="$fetchState.pending ? [] : filteredClusterRoleTemplateBindings"
-      :groupable="false"
-      :namespaced="false"
-      :loading="$fetchState.pending || !currentCluster"
-      sub-search="subSearch"
-      :sub-fields="['nameDisplay']"
-    />
+    <Tabbed>
+      <Tab
+        name="cluster-membership"
+        label="Cluster Membership"
+      >
+        <div
+          v-if="canEditClusterMembers"
+          class="row mb-10 cluster-add"
+        >
+          <n-link
+            :to="createLocation"
+            class="btn role-primary pull-right"
+          >
+            {{ t('members.createActionLabel') }}
+          </n-link>
+        </div>
+        <ResourceTable
+          :schema="schema"
+          :headers="headers"
+          :rows="filteredClusterRoleTemplateBindings"
+          :groupable="false"
+          :namespaced="false"
+          :loading="$fetchState.pending || !currentCluster || loadingClusterBindings"
+          sub-search="subSearch"
+          :sub-fields="['nameDisplay']"
+        />
+      </Tab>
+      <Tab
+        v-if="canManageProjectMembers"
+        name="project-membership"
+        label="Project Membership"
+      >
+        <SortableTable
+          group-by="projectId"
+          :loading="$fetchState.pending || !currentCluster || loadingProjectBindings"
+          :rows="rowsWithFakeProjects"
+          :headers="projectRoleTemplateColumns"
+        >
+          <template #group-by="group">
+            <div class="group-bar">
+              <div
+                v-trim-whitespace
+                class="group-tab"
+              >
+                <div
+                  class="project-name"
+                  v-html="getProjectLabel(group)"
+                />
+              </div>
+              <div class="right">
+                <button
+                  v-if="canEditProjectMembers"
+                  type="button"
+                  class="create-namespace btn btn-sm role-secondary mr-5 right"
+                  @click="addProjectMember(group)"
+                >
+                  {{ t('members.createActionLabel') }}
+                </button>
+              </div>
+            </div>
+          </template>
+          <template
+            v-for="project in projectsWithoutRoles"
+            v-slot:[slotName(project)]
+          >
+            <tr
+              :key="project.id"
+              class="main-row"
+            >
+              <td
+                class="empty text-center"
+                colspan="100%"
+              >
+                {{ t('members.noRolesAssigned') }}
+              </td>
+            </tr>
+          </template>
+        </SortableTable>
+      </Tab>
+    </Tabbed>
   </div>
 </template>
+
+<style lang='scss' scoped>
+.project-members {
+  & ::v-deep .group-bar{
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.cluster-add {
+  justify-content: flex-end;
+}
+</style>

package/components/ExplorerProjectsNamespaces.vue

@@ -85,10 +85,10 @@ export default {
     },
     headers() {
       const project = {
-        name:          'project',
-        label:         'Project',
-        value:         'project.nameDisplay',
-        sort:          ['projectNameSort', 'nameSort'],
+        name:  'project',
+        label: this.t('tableHeaders.project'),
+        value: 'project.nameDisplay',
+        sort:  ['projectNameSort', 'nameSort'],
       };
 
       return [
@@ -136,8 +136,8 @@ export default {
 
       if (this.showMockNotInProjectGroup) {
         fakeRows.push( {
-          groupByLabel:     this.t('resourceTable.groupLabel.notInAProject'), // Same as the groupByLabel for the namespace model
-          mainRowKey:       'fake-empty',
+          groupByLabel: this.t('resourceTable.groupLabel.notInAProject'), // Same as the groupByLabel for the namespace model
+          mainRowKey:   'fake-empty',
         });
       }
 
@@ -235,6 +235,19 @@ export default {
     }
   },
   methods: {
+    /**
+     * Get PSA HTML to be displayed in the tooltips
+     */
+    getPsaTooltip(row) {
+      const dictionary = row.psaTooltipsDescription;
+      const list = Object.values(dictionary)
+        .sort()
+        .map(text => `<li>${ text }</li>`).join('');
+      const title = `<p>${ this.t('podSecurityAdmission.name') }: </p>`;
+
+      return `${ title }<ul class="psa-tooltip">${ list }</ul>`;
+    },
+
     userIsFilteringForSpecificNamespaceOrProject() {
       const activeFilters = this.$store.getters['namespaceFilters'];
 
@@ -342,21 +355,21 @@ export default {
       v-on="$listeners"
     >
       <template #group-by="group">
-        <div
-          class="project-bar"
-          :class="{'has-description': projectDescription(group.group)}"
+        <div
+          class="project-bar"
+          :class="{'has-description': projectDescription(group.group)}"
         >
-          <div
-            v-trim-whitespace
-            class="group-tab"
+          <div
+            v-trim-whitespace
+            class="group-tab"
           >
-            <div
-              class="project-name"
-              v-html="projectLabel(group.group)"
+            <div
+              class="project-name"
+              v-html="projectLabel(group.group)"
             />
-            <div
-              v-if="projectDescription(group.group)"
-              class="description text-muted text-small"
+            <div
+              v-if="projectDescription(group.group)"
+              class="description text-muted text-small"
             >
               {{ projectDescription(group.group) }}
             </div>
@@ -369,11 +382,11 @@ export default {
             >
               {{ t('projectNamespaces.createNamespace') }}
             </n-link>
-            <button
-              type="button"
-              class="project-action btn btn-sm role-multi-action actions mr-10"
-              :class="{invisible: !showProjectActionButton(group.group)}"
-              @click="showProjectAction($event, group.group)"
+            <button
+              type="button"
+              class="project-action btn btn-sm role-multi-action actions mr-10"
+              :class="{invisible: !showProjectActionButton(group.group)}"
+              @click="showProjectAction($event, group.group)"
             >
               <i class="icon icon-actions" />
             </button>
@@ -382,22 +395,40 @@ export default {
       </template>
       <template #cell:project="{row}">
         <span v-if="row.project">{{ row.project.nameDisplay }}</span>
-        <span
-          v-else
-          class="text-muted"
+        <span
+          v-else
+          class="text-muted"
         >&ndash;</span>
       </template>
-      <template
-        v-for="project in projectsWithoutNamespaces"
-        v-slot:[slotName(project)]
+      <template #cell:name="{row}">
+        <div class="namespace-name">
+          <n-link
+            v-if="row.detailLocation"
+            :to="row.detailLocation"
+          >
+            {{ row.name }}
+          </n-link>
+          <span v-else>
+            {{ row.name }}
+          </span>
+          <i
+            v-if="row.hasSystemLabels"
+            v-tooltip="getPsaTooltip(row)"
+            class="icon icon-lock ml-5"
+          />
+        </div>
+      </template>
+      <template
+        v-for="project in projectsWithoutNamespaces"
+        v-slot:[slotName(project)]
       >
-        <tr
-          :key="project.id"
-          class="main-row"
+        <tr
+          :key="project.id"
+          class="main-row"
         >
-          <td
-            class="empty text-center"
-            colspan="5"
+          <td
+            class="empty text-center"
+            colspan="5"
           >
             {{ t('projectNamespaces.noNamespaces') }}
           </td>
@@ -405,9 +436,9 @@ export default {
       </template>
       <template #main-row:fake-empty>
         <tr class="main-row">
-          <td
-            class="empty text-center"
-            colspan="5"
+          <td
+            class="empty text-center"
+            colspan="5"
           >
             {{ t('projectNamespaces.noProjectNoNamespaces') }}
           </td>
@@ -448,6 +479,19 @@ export default {
         }
       }
     }
+
+    .namespace-name {
+      display: flex;
+      align-items: center;
+    }
   }
 }
 </style>
+<style lang="scss">
+  .psa-tooltip {
+    // These could pop up a lot as the mouse moves around, keep them as small and unintrusive as possible
+    // (easier to test with v-tooltip="{ content: getPSA(row), autoHide: false, show: true }")
+    margin: 3px 0;
+    padding: 0 8px 0 22px;
+  }
+</style>

package/components/FixedBanner.vue

@@ -25,12 +25,12 @@ export default {
 
   data() {
     return {
-      showDialog:      true,
-      showHeader:      false,
-      showFooter:      false,
-      showConsent:     false,
-      banner:          {},
-      bannerSetting:   null
+      showDialog:    true,
+      showHeader:    false,
+      showFooter:    false,
+      showConsent:   false,
+      banner:        {},
+      bannerSetting: null
     };
   },
 

package/components/GlobalRoleBindings.vue

@@ -17,7 +17,7 @@ export default {
     Loading,
     Card
   },
-  props:      {
+  props: {
     mode: {
       type:    String,
       default: _VIEW,
@@ -38,11 +38,11 @@ export default {
       }
     },
     groupPrincipalId: {
-      type:     String,
+      type:    String,
       default: ''
     },
     userId: {
-      type:     String,
+      type:    String,
       default: ''
     }
   },
@@ -104,7 +104,7 @@ export default {
       return this.type === 'user';
     }
   },
-  watch:    {
+  watch: {
     groupPrincipalId(groupPrincipalId, oldGroupPrincipalId) {
       if (groupPrincipalId === oldGroupPrincipalId) {
         return;
@@ -201,8 +201,8 @@ export default {
     },
     async saveAddedRoles(userId) {
       const requestOptions = {
-        type:               MANAGEMENT.GLOBAL_ROLE_BINDING,
-        metadata:           { generateName: `grb-` },
+        type:     MANAGEMENT.GLOBAL_ROLE_BINDING,
+        metadata: { generateName: `grb-` },
       };
 
       if (this.groupPrincipalId) {

package/components/GradientBox.vue

@@ -3,13 +3,13 @@ export default {
   props: {
     // a "r, g, b" tuple
     primaryColorVar: {
-      type:     String,
+      type:    String,
       default: null,
     },
 
     // Show the left side
     showTab: {
-      type:     Boolean,
+      type:    Boolean,
       default: true,
     },
     showSolid: {

package/components/GrowlManager.vue

@@ -86,8 +86,9 @@ export default {
   >
     <div class="growl-list">
       <div
-        v-for="growl in stack"
+        v-for="(growl, idx) in stack"
         :key="growl.id"
+        :data-testid="`growl-list-item-${idx}`"
         :class="{'growl': true, ['bg-'+growl.color]: true}"
       >
         <div
@@ -117,7 +118,7 @@ export default {
       <button
         type="button"
         class="btn btn-sm role-primary"
-        @click="closeAll"
+        @click="closeAll()"
       >
         {{ t('growl.clearAll') }}
       </button>
@@ -151,7 +152,6 @@ export default {
 
     .close {
       padding: 5px;
-      font-size: 24px;
     }
 
     .icon-container {

package/components/IconMessage.vue

@@ -1,8 +1,8 @@
 <script>
 export default {
-  props:      {
+  props: {
     vertical: {
-      type:     Boolean,
+      type:    Boolean,
       default: false,
     },
     icon: {
@@ -10,7 +10,7 @@ export default {
       required: true,
     },
     iconState: {
-      type:     String,
+      type:    String,
       default: null
     },
     message: {
@@ -22,7 +22,7 @@ export default {
       default: null
     },
     subtle: {
-      type:     Boolean,
+      type:    Boolean,
       default: false,
     }
   },