@rancher/shell 3.0.5-rc.5 → 3.0.5-rc.7

package/pages/c/_cluster/auth/user.retention/index.vue

@@ -177,91 +177,93 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
 </script>
 
 <template>
-  <div>
-    <user-retention-header />
-    <div
-      v-if="!loading"
-      class="form-user-retention"
-    >
-      <banner
-        v-if="error"
-        color="error"
+  <div class="user-retention">
+    <div class="user-retention-content">
+      <user-retention-header />
+      <div
+        v-if="!loading"
+        class="form-user-retention"
       >
-        {{ error }}
-      </banner>
-      <div class="input-fieldset">
-        <checkbox
-          v-model:value="disableAfterPeriod"
-          data-testid="disableAfterPeriod"
-          :label="t('user.retention.edit.form.disableAfter.checkbox')"
-        />
-        <labeled-input
-          v-model:value="userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER]"
-          data-testid="disableAfterPeriodInput"
-          :tooltip="t('user.retention.edit.form.disableAfter.input.tooltip')"
-          class="input-field"
-          :label="t('user.retention.edit.form.disableAfter.input.label')"
-          :disabled="!disableAfterPeriod"
-          :rules="[validateDisableInactiveUserAfterDuration, validateDurationAgainstAuthUserSession]"
-          @update:validation="e => setValidation(SETTING.DISABLE_INACTIVE_USER_AFTER, e)"
-        />
-      </div>
-      <div class="input-fieldset">
-        <checkbox
-          v-model:value="deleteAfterPeriod"
-          data-testid="deleteAfterPeriod"
-          :label="t('user.retention.edit.form.deleteAfter.checkbox')"
-        />
-        <labeled-input
-          v-model:value="userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER]"
-          data-testid="deleteAfterPeriodInput"
-          :tooltip="t('user.retention.edit.form.deleteAfter.input.tooltip')"
-          class="input-field"
-          :label="t('user.retention.edit.form.deleteAfter.input.label')"
-          :sub-label="t('user.retention.edit.form.deleteAfter.input.subLabel')"
-          :disabled="!deleteAfterPeriod"
-          :rules="[validateDeleteInactiveUserAfterDuration, validateDurationAgainstAuthUserSession, validateDeleteInactiveUserAfter]"
-          @update:validation="e => setValidation(SETTING.DELETE_INACTIVE_USER_AFTER, e)"
-        />
-      </div>
-      <template
-        v-if="disableAfterPeriod || deleteAfterPeriod"
-      >
-        <div class="input-fieldset pt-12">
+        <banner
+          v-if="error"
+          color="error"
+        >
+          {{ error }}
+        </banner>
+        <div class="input-fieldset">
+          <checkbox
+            v-model:value="disableAfterPeriod"
+            data-testid="disableAfterPeriod"
+            :label="t('user.retention.edit.form.disableAfter.checkbox')"
+          />
           <labeled-input
-            v-model:value="userRetentionSettings[SETTING.USER_RETENTION_CRON]"
-            data-testid="userRetentionCron"
+            v-model:value="userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER]"
+            data-testid="disableAfterPeriodInput"
+            :tooltip="t('user.retention.edit.form.disableAfter.input.tooltip')"
             class="input-field"
-            required
-            type="cron"
-            :tooltip="t('user.retention.edit.form.cron.subLabel')"
-            :rules="[validateUserRetentionCron]"
-            :label="t('user.retention.edit.form.cron.label')"
-            :require-dirty="false"
-            @update:validation="e => setValidation(SETTING.USER_RETENTION_CRON, e)"
+            :label="t('user.retention.edit.form.disableAfter.input.label')"
+            :disabled="!disableAfterPeriod"
+            :rules="[validateDisableInactiveUserAfterDuration, validateDurationAgainstAuthUserSession]"
+            @update:validation="e => setValidation(SETTING.DISABLE_INACTIVE_USER_AFTER, e)"
           />
         </div>
-        <div class="input-fieldset condensed pt-12">
-          <toggle-switch
-            v-model:value="userRetentionSettings[SETTING.USER_RETENTION_DRY_RUN]"
-            data-testid="userRetentionDryRun"
-            :onValue="'true'"
-            :offValue="'false'"
-            :on-label="t('user.retention.edit.form.dryRun.label')"
+        <div class="input-fieldset">
+          <checkbox
+            v-model:value="deleteAfterPeriod"
+            data-testid="deleteAfterPeriod"
+            :label="t('user.retention.edit.form.deleteAfter.checkbox')"
           />
-          <span class="input-detail">{{ t('user.retention.edit.form.dryRun.subLabel') }}</span>
-        </div>
-        <div class="input-fieldset condensed">
           <labeled-input
-            v-model:value="userRetentionSettings[SETTING.USER_LAST_LOGIN_DEFAULT]"
-            data-testid="userLastLoginDefault"
+            v-model:value="userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER]"
+            data-testid="deleteAfterPeriodInput"
+            :tooltip="t('user.retention.edit.form.deleteAfter.input.tooltip')"
             class="input-field"
-            :label="t('user.retention.edit.form.defaultLastLogin.label')"
-            :sub-label="t('user.retention.edit.form.defaultLastLogin.subLabel')"
-            :placeholder="t('user.retention.edit.form.defaultLastLogin.placeholder')"
+            :label="t('user.retention.edit.form.deleteAfter.input.label')"
+            :sub-label="t('user.retention.edit.form.deleteAfter.input.subLabel')"
+            :disabled="!deleteAfterPeriod"
+            :rules="[validateDeleteInactiveUserAfterDuration, validateDurationAgainstAuthUserSession, validateDeleteInactiveUserAfter]"
+            @update:validation="e => setValidation(SETTING.DELETE_INACTIVE_USER_AFTER, e)"
           />
         </div>
-      </template>
+        <template
+          v-if="disableAfterPeriod || deleteAfterPeriod"
+        >
+          <div class="input-fieldset pt-12">
+            <labeled-input
+              v-model:value="userRetentionSettings[SETTING.USER_RETENTION_CRON]"
+              data-testid="userRetentionCron"
+              class="input-field"
+              required
+              type="cron"
+              :tooltip="t('user.retention.edit.form.cron.subLabel')"
+              :rules="[validateUserRetentionCron]"
+              :label="t('user.retention.edit.form.cron.label')"
+              :require-dirty="false"
+              @update:validation="e => setValidation(SETTING.USER_RETENTION_CRON, e)"
+            />
+          </div>
+          <div class="input-fieldset condensed pt-12">
+            <toggle-switch
+              v-model:value="userRetentionSettings[SETTING.USER_RETENTION_DRY_RUN]"
+              data-testid="userRetentionDryRun"
+              :onValue="'true'"
+              :offValue="'false'"
+              :on-label="t('user.retention.edit.form.dryRun.label')"
+            />
+            <span class="input-detail">{{ t('user.retention.edit.form.dryRun.subLabel') }}</span>
+          </div>
+          <div class="input-fieldset condensed">
+            <labeled-input
+              v-model:value="userRetentionSettings[SETTING.USER_LAST_LOGIN_DEFAULT]"
+              data-testid="userLastLoginDefault"
+              class="input-field"
+              :label="t('user.retention.edit.form.defaultLastLogin.label')"
+              :sub-label="t('user.retention.edit.form.defaultLastLogin.subLabel')"
+              :placeholder="t('user.retention.edit.form.defaultLastLogin.placeholder')"
+            />
+          </div>
+        </template>
+      </div>
     </div>
     <Footer
       class="footer-user-retention"
@@ -274,6 +276,15 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
 </template>
 
 <style lang="scss" scoped>
+  .user-retention {
+    height: 100%;
+  }
+
+  .user-retention-content {
+    height: 100%;
+    overflow-y: scroll;
+  }
+
   .form-user-retention {
     display: flex;
     flex: 1;
@@ -283,15 +294,13 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
 
   .footer-user-retention {
     border-top: var(--header-border-size) solid var(--header-border);
-    right: 0;
-    position: sticky;
-    bottom: 0;
     background-color: var(--header-bg);
     margin-left: -20px;
     margin-right: -20px;
     margin-bottom: -20px;
     margin-top: 20px;
     padding: 10px 20px;
+    height: $footer-height;
 
     :deep() .spacer-small {
       padding: 0;

package/pages/c/_cluster/explorer/index.vue

@@ -833,7 +833,7 @@ export default {
             v-if="props.active"
             :detail-url="CLUSTER_METRICS_DETAIL_URL"
             :summary-url="CLUSTER_METRICS_SUMMARY_URL"
-            graph-height="825px"
+            graph-height="875px"
           />
         </template>
       </Tab>
@@ -848,7 +848,7 @@ export default {
             v-if="props.active"
             :detail-url="K8S_METRICS_DETAIL_URL"
             :summary-url="K8S_METRICS_SUMMARY_URL"
-            graph-height="550px"
+            graph-height="600px"
           />
         </template>
       </Tab>
@@ -864,7 +864,7 @@ export default {
             class="etcd-metrics"
             :detail-url="ETCD_METRICS_DETAIL_URL"
             :summary-url="ETCD_METRICS_SUMMARY_URL"
-            graph-height="550px"
+            graph-height="600px"
           >
             <EtcdInfoBanner />
           </DashboardMetrics>

package/pages/c/_cluster/explorer/projectsecret.vue

@@ -0,0 +1,34 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+import { _CLONE, _EDIT, MODE } from '@shell/config/query-params';
+import { SECRET, VIRTUAL_TYPES } from '@shell/config/types';
+import { STORE } from '@shell/store/store-types';
+
+export default {
+  name:       'ProjectSecretsPage',
+  components: { ResourceDetail },
+  data() {
+    return { STORE: STORE.MANAGEMENT };
+  },
+  computed: {
+    // Because we want to use the normal secret for editing and we want to use the project_secret for detail we had to change the override based on mode
+    resourceOverride() {
+      const isEdit = [_EDIT, _CLONE].includes(this.$route.query[MODE]);
+
+      return isEdit ? SECRET : VIRTUAL_TYPES.PROJECT_SECRETS;
+    }
+  }
+
+};
+</script>
+
+<template>
+  <!-- resourceOverride - used in both new and old resource details  -->
+  <!-- storeOverride - used in old resource details (specifically edit)  -->
+  <!--   v-bind="$attrs" - removes issues with `class` being passed through -->
+  <ResourceDetail
+    v-bind="$attrs"
+    :resourceOverride="resourceOverride"
+    :storeOverride="STORE"
+  />
+</template>

package/pages/c/_cluster/explorer/tools/pages/_page.vue

@@ -3,7 +3,6 @@ import EmberPage from '@shell/components/EmberPage';
 
 const PAGES = {
   monitoring: 'monitoring/cluster-setting',
-  cis:        'cis/scan',
   istio:      'istio/cluster-setting',
   snapshots:  'backups',
 };

package/pages/c/_cluster/fleet/application/create.vue

@@ -41,7 +41,7 @@ export default {
               id:          type,
               label,
               description: `fleet.application.subTypes.'${ type }'.description`,
-              icon:        FleetUtils.resourceIcons[type],
+              icon:        FleetUtils.dashboardIcons[type],
               disabled:    !canCreate,
               tooltip:     canCreate ? null : this.t('fleet.application.noPermissions', { label }, true),
             }
@@ -205,6 +205,7 @@ export default {
     width: 100%;
     flex-direction:row;
     align-content: baseline;
+    justify-content: space-between;
   }
   .subtype-content {
     width: 100%;
@@ -334,7 +335,7 @@ export default {
   .footer {
     display: flex;
     justify-content: flex-end;
-    margin: 20px 10px 0 10px;
+    margin: auto 10px 0 10px;
     z-index: 19;
   }
 </style>

package/pages/c/_cluster/fleet/index.vue

@@ -103,7 +103,6 @@ export default {
 
   data() {
     return {
-      createRoute:     { name: 'c-cluster-fleet-application-create' },
       permissions:     {},
       FLEET,
       [FLEET.REPO]:    [],
@@ -157,6 +156,10 @@ export default {
       return this.$store.getters['management/schemaFor'](FLEET.GIT_REPO);
     },
 
+    createRoute() {
+      return { name: 'c-cluster-fleet-application-create' };
+    },
+
     workspaces() {
       if (this.fleetWorkspaces?.length) {
         return this.fleetWorkspaces;
@@ -296,6 +299,15 @@ export default {
       this.cardsCount[workspace][state] = val;
     },
 
+    createResource(workspace) {
+      this.$store.dispatch('showWorkspaceSwitcher', true);
+
+      this.$nextTick(() => {
+        this.$store.commit('updateWorkspace', { value: workspace, getters: this.$store.getters });
+        this.$router.push(this.createRoute);
+      });
+    },
+
     showResourceDetails(value, statePanel, workspace, selected) {
       if (this.isClosingSlideInPanel) {
         return;
@@ -311,7 +323,6 @@ export default {
           workspace,
           showHeader:          false,
           width:               window.innerWidth / 3 > 530 ? `${ window.innerWidth / 3 }px` : '530px',
-          zIndex:              1,
           triggerFocusTrap:    true,
           returnFocusSelector: `[data-testid="resource-card-${ value.id }"]`
         }
@@ -452,32 +463,38 @@ export default {
         </h1>
 
         <div class="dashboard-main-actions">
-          <div :data-testid="'fleet-dashboard-expand-all'">
-            <p
-              v-if="allCardsExpanded"
-              @click="toggleCardAll('collapse')"
-            >
-              {{ t('fleet.dashboard.collapseAll') }}
-            </p>
-            <p
-              v-else
-              @click="toggleCardAll('expand')"
-            >
-              {{ t('fleet.dashboard.expandAll') }}
-            </p>
-          </div>
           <ButtonGroup
             :data-testid="'view-button'"
             :value="viewMode"
             :options="viewModeOptions"
             @update:value="viewMode = $event"
           />
+          <RcButton
+            small
+            ghost
+            data-testid="fleet-dashboard-expand-all"
+            class="collapse-all-btn"
+            @click="toggleCardAll(allCardsExpanded ? 'collapse' : 'expand')"
+          >
+            <p class="ml-10">
+              {{ allCardsExpanded ? t('fleet.dashboard.collapseAll') : t('fleet.dashboard.expandAll') }}
+            </p>
+            <template #after>
+              <i
+                :class="{
+                  ['icon icon-chevron-down']: !allCardsExpanded,
+                  ['icon icon-chevron-up']: allCardsExpanded,
+                }"
+                aria-hidden="true"
+              />
+            </template>
+          </RcButton>
         </div>
       </div>
       <div
         v-for="(workspace, i) in workspaces"
         :key="i"
-        class="card-container m-0 mt-20"
+        class="workspace-card-container m-0 mt-20"
         :data-testid="`fleet-dashboard-workspace-card-${ workspace.id }`"
         :show-actions="false"
         :show-separator="false"
@@ -488,11 +505,11 @@ export default {
             class="card-panel-main-details"
             :class="{ expand: !isWorkspaceCollapsed[workspace.id] }"
           >
-            <div class="title">
-              <h3 class="label label-secondary">
+            <h2 class="workspace-title">
+              <span class="workspace-label label-secondary">
                 <i class="icon icon-folder" />
                 <span>{{ t('fleet.dashboard.workspace') }} : &nbsp;</span>
-              </h3>
+              </span>
               <router-link
                 class="name"
                 role="link"
@@ -502,7 +519,7 @@ export default {
               >
                 {{ workspace.nameDisplay }}
               </router-link>
-            </div>
+            </h2>
             <div class="body">
               <ResourcePanel
                 v-if="workspace.repos?.length || workspace.helmOps?.length"
@@ -546,9 +563,10 @@ export default {
               >
                 <i
                   :class="{
-                    ['icon icon-lg icon-chevron-right']: isWorkspaceCollapsed[workspace.id],
-                    ['icon icon-lg icon-chevron-down']: !isWorkspaceCollapsed[workspace.id],
+                    ['icon icon-lg icon-chevron-down']: isWorkspaceCollapsed[workspace.id],
+                    ['icon icon-lg icon-chevron-up']: !isWorkspaceCollapsed[workspace.id],
                   }"
+                  aria-hidden="true"
                 />
               </RcButton>
             </div>
@@ -586,12 +604,12 @@ export default {
               v-if="permissions.gitRepos || permissions.helmOps"
               class="create-button"
             >
-              <router-link
-                :to="createRoute"
-                class="btn role-primary"
+              <RcButton
+                small
+                @click="createResource(workspace.id)"
               >
                 {{ t('fleet.application.intro.add') }}
-              </router-link>
+              </RcButton>
             </div>
           </div>
           <div
@@ -623,16 +641,19 @@ export default {
                   />
                   <i
                     v-if="state.statePanel.id !== 'success'"
-                    class="ml-5 state-icon"
+                    class="state-icon"
                     :class="state.statePanel.icon"
                     :style="{ color: state.statePanel.color }"
                   />
-                  <div class="label">
-                    <span class="partial">
-                      {{ state.stateDisplay }}&nbsp;&nbsp;{{ cardResources[workspace.id]?.[state.stateDisplay]?.length }}
+                  <h3 class="state-title">
+                    <span class="state-label">
+                      {{ state.stateDisplay }}
+                    </span>
+                    <span class="state-amount">
+                      {{ cardResources[workspace.id]?.[state.stateDisplay]?.length }}
                     </span>
                     <span class="total label-secondary">/{{ [ ...workspace.repos, ...workspace.helmOps ].length }}</span>
-                  </div>
+                  </h3>
                 </div>
                 <div
                   v-if="!isStateCollapsed[workspace.id]?.[state.stateDisplay]"
@@ -707,7 +728,11 @@ export default {
   display: flex;
   align-items: center;
   justify-content: end;
-  gap: 15px;
+  gap: 16px;
+
+  .collapse-all-btn {
+    width: 105px;
+  }
 }
 
 .dashboard-header {
@@ -729,7 +754,7 @@ export default {
   }
 }
 
-.card-container {
+.workspace-card-container {
   display: flex;
   flex-direction: column;
   border: 1px solid var(--border);
@@ -754,30 +779,34 @@ export default {
       display: flex;
       align-items: center;
 
-      .title {
-        margin: 0 20px 0 0;
-
-        .name {
-          font-size: 25px;
-        }
+      .workspace-title {
+        min-width: 150px;
+        margin: 0 32px 0 0;
+        display: flex;
+        flex-direction: column;
 
-        .label {
+        .workspace-label {
+          font-size: 16px;
+          font-weight: normal;
           display: flex;
           align-items: center;
-          min-width: 150px;
-          margin: 0 0 5px 0;
+          margin: 0 0 2px 0;
 
           .icon {
             margin-right: 5px;
           }
         }
+
+        .name {
+          font-size: 21px;
+        }
       }
 
       .body {
         display: flex;
         justify-content: flex-start;
         flex-wrap: wrap;
-        gap: 15px;
+        gap: 24px;
 
         .spacer {
           border-left: 1px solid var(--border);
@@ -836,28 +865,40 @@ export default {
 
     .cards-panel {
       .card-panel {
-        margin-top: 32px;
+        margin-top: 24px;
 
         .title {
           display: flex;
           align-items: center;
           cursor: pointer;
           width: fit-content;
-          margin-bottom: 16px;
+          margin-bottom: 12px;
 
           .icon {
-            margin-right: 5px;
+            margin-right: 8px;
+          }
+
+          .state-icon,
+          .state-title {
+            font-size: 21px;
+          }
+
+          .state-icon {
+            margin-top: 1px;
           }
 
-          .label {
+          .state-title {
             display: flex;
             align-items: baseline;
-            margin-left: 2px;
+            margin: 0;
 
-            .partial {
-              margin: 0;
-              margin-right: 2px;
-              font-size: 22px;
+            .state-amount {
+              margin-left: 4px
+            }
+
+            .total {
+              margin-left: 4px;
+              font-size: 16px;
             }
 
             p {
@@ -868,10 +909,6 @@ export default {
               }
             }
           }
-
-          .state-icon {
-            font-size: 1.75em;
-          }
         }
 
         .card-panel-body {