@rancher/shell 0.3.0 → 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

@@ -86,7 +86,7 @@ export default {
     headers() {
       const project = {
         name:  'project',
-        label: 'Project',
+        label: this.t('tableHeaders.project'),
         value: 'project.nameDisplay',
         sort:  ['projectNameSort', 'nameSort'],
       };
@@ -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/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/IconOrSvg.vue

@@ -0,0 +1,149 @@
+<script>
+
+/**
+ * This component renders the icon in the top level menu.
+ * Icon can either be via a font via the 'icon' property or an svg via the 'src' property
+ *
+ * The trickiness here is that we want the icon to be the correct color - both normally and when hovered
+ * For a font icon, this is easy, since we just set the color css property
+ * For an svg icon included with the <img> tag this is harder - there is no way to apply css to
+ * the svg brought in this way - the workaround is to apply a css filter - in order to do this we
+ * need to generate the css filter for the required color - the code for that is in the 'svg-filter' utility
+ *
+ * We cache filters and css for given colors, so we only generate them once.
+ *
+ * This makes the code here look complex - but we are essentially generating the css filters
+ * and then injecting custom css into the document so that any icons included via svg will
+ * show with the desired colors for the theme.
+ */
+import Vue from 'vue';
+import { Solver } from '@shell/utils/svg-filter';
+import { colorToRgb, mapStandardColors } from '@shell/utils/color';
+
+const filterCache = {};
+const cssCache = {};
+
+const colors = {
+  header: {
+    color: '--header-btn-text',
+    hover: '--header-btn-text-hover'
+  },
+  primary: {
+    color: '--link',
+    hover: '--primary-hover-text'
+  }
+};
+
+export default {
+  name:  'IconOrSvg',
+  props: {
+    src: {
+      type:    String,
+      default: () => undefined,
+    },
+    icon: {
+      type:    String,
+      default: () => undefined,
+    },
+    color: {
+      type:    String,
+      default: () => 'primary',
+    }
+  },
+
+  data() {
+    return { className: '' };
+  },
+
+  created() {
+    if (this.src) {
+      this.setColor();
+    }
+  },
+
+  methods: {
+    setColor() {
+      const uiColor = mapStandardColors(getComputedStyle(document.body).getPropertyValue(colors[this.color].color).trim());
+      const hoverColor = mapStandardColors(getComputedStyle(document.body).getPropertyValue(colors[this.color].hover).trim());
+
+      const uiColorRGB = colorToRgb(uiColor);
+      const hoverColorRGB = colorToRgb(hoverColor);
+      const uiColorStr = `${ uiColorRGB.r }-${ uiColorRGB.g }-${ uiColorRGB.b }`;
+      const hoverColorStr = `${ hoverColorRGB.r }-${ hoverColorRGB.g }-${ hoverColorRGB.b }`;
+
+      const className = `svg-icon-${ uiColorStr }-${ hoverColorStr }`;
+
+      if (!cssCache[className]) {
+        let hoverFilter = filterCache[hoverColor];
+
+        if (!hoverFilter) {
+          const solver = new Solver(hoverColorRGB);
+          const res = solver.solve();
+
+          hoverFilter = res?.filter;
+          filterCache[hoverColor] = hoverFilter;
+        }
+
+        let mainFilter = filterCache[uiColor];
+
+        if (!mainFilter) {
+          const solver = new Solver(uiColorRGB);
+          const res = solver.solve();
+
+          mainFilter = res?.filter;
+          filterCache[uiColor] = mainFilter;
+        }
+
+        // Add stylesheet (added as global styles)
+        const styles = `
+          img.${ className } {
+            ${ mainFilter };
+          }
+          img.${ className }:hover {
+            ${ hoverFilter };
+          }
+          button:hover > img.${ className } {
+            ${ hoverFilter };
+          }
+          a.option:hover > img.${ className } {
+            ${ hoverFilter };
+          }      `;
+
+        const styleSheet = document.createElement('style');
+
+        styleSheet.innerText = styles;
+        document.head.appendChild(styleSheet);
+
+        cssCache[className] = true;
+      }
+
+      Vue.set(this, 'className', className);
+    }
+  }
+};
+</script>
+
+<template>
+  <img
+    v-if="src"
+    :src="src"
+    class="svg-icon"
+    :class="className"
+  >
+  <i
+    v-else-if="icon"
+    class="icon group-icon"
+    :class="icon"
+  />
+  <i
+    v-else
+    class="icon icon-extension"
+  />
+</template>
+
+<style lang="scss" scoped>
+  .svg-icon {
+    height: 24px;
+    width: 24px;
+  }
+</style>