dashboard-shell-shell 1.0.1000000117 → 1.0.1000000118

package/components/ExplorerProjectsNamespaces.vue

@@ -1,13 +1,13 @@
 <script>
 import { mapGetters, useStore } from 'vuex';
-import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
+import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/rancherResourceTable';
 import { STATE, AGE, NAME, NS_SNAPSHOT_QUOTA } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES, HCI } from '@shell/config/types';
 import { PROJECT_ID, FLAT_VIEW } from '@shell/config/query-params';
 import { PanelLocation, ExtensionPoint } from '@shell/core/types';
 import ExtensionPanel from '@shell/components/ExtensionPanel';
-import Masthead from '@shell/components/ResourceList/Masthead';
+import Masthead from '@shell/components/rancherResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES, DEV } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
 import ButtonMultiAction from '@shell/components/ButtonMultiAction.vue';
@@ -505,11 +505,29 @@ export default {
           <div class="right">
             <router-link
               v-if="isNamespaceCreatable && (canSeeProjectlessNamespaces || group.group.key !== notInProjectKey)"
-              class="create-namespace btn btn-sm mr-5"
+              class="create-namespace"
+              style="margin-bottom: 3px;"
               :to="createNamespaceLocation(group.group)"
-            >1
+            >
               {{ t('projectNamespaces.createNamespace') }}
             </router-link>
+            <span style="color: var(--link);margin-bottom: 3px;">|</span>
+            <template v-if="featureDropdownMenu">
+              <ActionMenu
+                :showIcon="true"
+                :resource="getProjectActions(group.group)"
+                :button-aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+              />
+            </template>
+            <template v-else>
+              <ButtonMultiAction
+                class="project-action"
+                :borderless="true"
+                :aria-label="t('projectNamespaces.tableActionsLabel', { resource: projectResource(group.group) })"
+                :invisible="!showProjectActionButton(group.group)"
+                @click="showProjectAction($event, group.group)"
+              />
+            </template>
           </div>
         </div>
       </template>
@@ -575,6 +593,7 @@ export default {
 </template>
 <style lang="scss" scoped>
 .invisible {
+  width: 42px;
   display: inline-block;
 }
 
@@ -601,6 +620,7 @@ export default {
 
       .create-namespace {
         color: var(--link);
+        padding: 0 18px;
       }
 
       .group-tab {

package/components/GlobalRoleBindings.vue

@@ -108,12 +108,7 @@ export default {
     } catch (e) { }
   },
   data() {
-
-    const topLevelPermissions = sessionStorage.getItem('TOPLEVELPERMISSIONS') || ''
-
     return {
-      topLevelPermissions,
-
       // This not only identifies global roles but the order here is the order we want to display them in the UI
       globalPermissions: [
         'admin',
@@ -333,119 +328,60 @@ export default {
 
   <div v-else>
     <form v-if="selectedRoles">
-      <template v-if="topLevelPermissions && topLevelPermissions !== 'superadmin'">
-        <div
-          v-for="(sortedRole, roleType) in sortedRoles"
-          :key="roleType"
-          class="role-group mb-10"
-        >
-          <Card
-            v-if="Object.keys(sortedRole).length"
-            :show-highlight-border="false"
-            :show-actions="false"
-          >
-            <template v-slot:title>
-              <div class="type-title">
-                <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
-                <div class="type-description">
-                  {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
-                </div>
-              </div>
-            </template>
-            <template v-slot:body>
-              <div
-                class="checkbox-section"
-                :class="'checkbox-section--' + roleType"
-              >
-                <div
-                  v-for="(role, i) in sortedRoles[roleType]"
-                  :key="i"
-                  class="checkbox mb-10 mr-10"
-                >
-                  <Checkbox
-                    v-model:value="selectedRoles"
-                    :value-when-true="role.id"
-                    :disabled="!!assignOnlyRoles[role.id]"
-                    :label="role.nameDisplay"
-                    :description="role.descriptionDisplay"
-                    :mode="mode"
-                    :data-testId="'grb-checkbox-' + role.id"
-                    @update:value="checkboxChanged"
-                  >
-                    <template #label>
-                      <div class="checkbox-label-slot">
-                        <span class="checkbox-label">{{ role.nameDisplay }}</span>
-                        <i
-                          v-if="!!assignOnlyRoles[role.id]"
-                          v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
-                          class="checkbox-info icon icon-info icon-lg"
-                        />
-                      </div>
-                    </template>
-                  </Checkbox>
-                </div>
-              </div>
-            </template>
-          </Card>
-        </div>
-      </template>
-
-      <template v-else>
-        <div
-          v-for="(sortedRole, roleType) in { global: sortedRoles['global'] }"
-          :key="roleType"
-          class="role-group mb-10"
+      <div
+        v-for="(sortedRole, roleType) in sortedRoles"
+        :key="roleType"
+        class="role-group mb-10"
+      >
+        <Card
+          v-if="Object.keys(sortedRole).length"
+          :show-highlight-border="false"
+          :show-actions="false"
         >
-          <Card
-            v-if="Object.keys(sortedRole).length"
-            :show-highlight-border="false"
-            :show-actions="false"
-          >
-            <template v-slot:title>
-              <div class="type-title">
-                <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
-                <div class="type-description">
-                  {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
-                </div>
+          <template v-slot:title>
+            <div class="type-title">
+              <h3>{{ t(`rbac.globalRoles.types.${roleType}.label`) }}</h3>
+              <div class="type-description">
+                {{ t(`rbac.globalRoles.types.${roleType}.description`, { isUser }) }}
               </div>
-            </template>
-            <template v-slot:body>
+            </div>
+          </template>
+          <template v-slot:body>
+            <div
+              class="checkbox-section"
+              :class="'checkbox-section--' + roleType"
+            >
               <div
-                class="checkbox-section"
-                :class="'checkbox-section--' + roleType"
+                v-for="(role, i) in sortedRoles[roleType]"
+                :key="i"
+                class="checkbox mb-10 mr-10"
               >
-                <div
-                  v-for="(role, i) in sortedRoles[roleType]"
-                  :key="i"
-                  class="checkbox mb-10 mr-10"
+                <Checkbox
+                  v-model:value="selectedRoles"
+                  :value-when-true="role.id"
+                  :disabled="!!assignOnlyRoles[role.id]"
+                  :label="role.nameDisplay"
+                  :description="role.descriptionDisplay"
+                  :mode="mode"
+                  :data-testId="'grb-checkbox-' + role.id"
+                  @update:value="checkboxChanged"
                 >
-                  <Checkbox
-                    v-model:value="selectedRoles"
-                    :value-when-true="role.id"
-                    :disabled="!!assignOnlyRoles[role.id]"
-                    :label="role.nameDisplay"
-                    :description="role.descriptionDisplay"
-                    :mode="mode"
-                    :data-testId="'grb-checkbox-' + role.id"
-                    @update:value="checkboxChanged"
-                  >
-                    <template #label>
-                      <div class="checkbox-label-slot">
-                        <span class="checkbox-label">{{ role.nameDisplay }}</span>
-                        <i
-                          v-if="!!assignOnlyRoles[role.id]"
-                          v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
-                          class="checkbox-info icon icon-info icon-lg"
-                        />
-                      </div>
-                    </template>
-                  </Checkbox>
-                </div>
+                  <template #label>
+                    <div class="checkbox-label-slot">
+                      <span class="checkbox-label">{{ role.nameDisplay }}</span>
+                      <i
+                        v-if="!!assignOnlyRoles[role.id]"
+                        v-clean-tooltip="t('rbac.globalRoles.assignOnlyRole')"
+                        class="checkbox-info icon icon-info icon-lg"
+                      />
+                    </div>
+                  </template>
+                </Checkbox>
               </div>
-            </template>
-          </Card>
-        </div>
-      </template>
+            </div>
+          </template>
+        </Card>
+      </div>
     </form>
   </div>
 </template>

package/components/IndentedPanel.vue

@@ -4,17 +4,23 @@ export default {};
 
 <template>
   <div
-    class="indented-panels"
+    class="indented-panel"
   >
     <slot />
   </div>
 </template>
 
 <style lang="scss">
-  .indented-panels {
+  .indented-panel {
     height: 100%;
-    width: 100%;
-    padding: 0 20px;
+    width: 90%;
+    margin-left: 5%;
   }
 
+  @media only screen and (max-width: map-get($breakpoints, '--viewport-9')) {
+    .indented-panel {
+      margin: 0 20px;
+      width: initial;
+    }
+  }
 </style>

package/components/PromptRemove.vue

@@ -386,7 +386,7 @@ export default {
             class="mt-10"
           >
             <span
-              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) })"
+              v-clean-html="t('promptRemove.confirmName', { nameToMatch: escapeHtml(nameToMatch) }, true)"
             />
           </div>
         </div>
@@ -460,8 +460,8 @@ export default {
       box-shadow: none;
     }
     #confirm {
-      width: 100%;
-      // margin-left: 3px;
+      width: 90%;
+      margin-left: 3px;
     }
 
     .actions {