dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.61

package/components/form/Probe.vue

@@ -160,7 +160,7 @@ export default {
     <div class="row">
       <div
         data-testid="input-probe-kind"
-        class="col span-11-of-23"
+        class="span-9-of-23"
       >
         <LabeledSelect
           v-model:value="kind"
@@ -240,7 +240,7 @@ export default {
         </div>
       </div>
 
-      <div class="col span-1-of-13">
+      <div class="span-1-of-13">
         <hr
           v-if="kind && kind!=='none'"
           :style="{'position':'relative', 'margin':'0px'}"
@@ -252,12 +252,12 @@ export default {
       <!-- none -->
       <div
         v-if="!isNone"
-        class="col span-11-of-23"
+        class="span-11-of-23 ml-30"
       >
         <div class="row">
           <div
             data-testid="input-probe-periodSeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.periodSeconds"
@@ -269,9 +269,12 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        
+        <div class="row">
           <div
             data-testid="input-probe-initialDelaySeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.initialDelaySeconds"
@@ -283,9 +286,11 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        <div class="row">
           <div
             data-testid="input-probe-timeoutSeconds"
-            class="col span-4"
+            class="col"
           >
             <UnitInput
               v-model:value="probe.timeoutSeconds"
@@ -299,12 +304,10 @@ export default {
           </div>
         </div>
 
-        <div class="spacer-small" />
-
         <div class="row">
           <div
             data-testid="input-probe-successThreshold"
-            class="col span-6"
+            class="col"
           >
             <LabeledInput
               v-model:value.number="probe.successThreshold"
@@ -316,9 +319,11 @@ export default {
               @update:value="update"
             />
           </div>
+        </div>
+        <div class="row">
           <div
             data-testid="input-probe-failureThreshold"
-            class="col span-6"
+            class="col"
           >
             <LabeledInput
               v-model:value.number="probe.failureThreshold"
@@ -333,7 +338,6 @@ export default {
         </div>
 
         <template v-if="kind === 'HTTP' || kind === 'HTTPS'">
-          <div class="spacer-small" />
 
           <div class="row">
             <div class="col span-12">

package/components/form/ProjectMemberEditor.vue

@@ -166,29 +166,44 @@ export default {
         value:       this.purifyOption(role.id),
       }));
 
-      return [
-        {
-          label:       this.t('projectMembers.projectPermissions.owner.label'),
-          description: this.t('projectMembers.projectPermissions.owner.description'),
-          value:       'owner'
-        },
-        {
-          label:       this.t('projectMembers.projectPermissions.member.label'),
-          description: this.t('projectMembers.projectPermissions.member.description'),
-          value:       'member'
-        },
-        {
-          label:       this.t('projectMembers.projectPermissions.readOnly.label'),
-          description: this.t('projectMembers.projectPermissions.readOnly.description'),
-          value:       'read-only'
-        },
-        ...customRoles,
-        {
-          label:       this.t('projectMembers.projectPermissions.custom.label'),
-          description: this.t('projectMembers.projectPermissions.custom.description'),
-          value:       'custom'
-        }
-      ];
+      let optionList =  [{
+        label:       this.t('members.clusterPermissions.project-tenant.label'),
+        description: this.t('members.clusterPermissions.project-tenant.description'),
+        value:       'project-tenant'
+      }];
+
+      if (sessionStorage.getItem('TOPLEVELPERMISSIONS') === 'superadmin') {
+        optionList = [
+          {
+            label:       this.t('members.clusterPermissions.project-tenant.label'),
+            description: this.t('members.clusterPermissions.project-tenant.description'),
+            value:       'project-tenant'
+          },
+          {
+            label:       this.t('projectMembers.projectPermissions.owner.label'),
+            description: this.t('projectMembers.projectPermissions.owner.description'),
+            value:       'owner'
+          },
+          {
+            label:       this.t('projectMembers.projectPermissions.member.label'),
+            description: this.t('projectMembers.projectPermissions.member.description'),
+            value:       'member'
+          },
+          {
+            label:       this.t('projectMembers.projectPermissions.readOnly.label'),
+            description: this.t('projectMembers.projectPermissions.readOnly.description'),
+            value:       'read-only'
+          },
+          ...customRoles,
+          {
+            label:       this.t('projectMembers.projectPermissions.custom.label'),
+            description: this.t('projectMembers.projectPermissions.custom.description'),
+            value:       'custom'
+          }
+        ];
+      }
+
+      return optionList
     },
     customPermissionsUpdate() {
       return this.customPermissions.reduce((acc, customPermissionsItem) => {
@@ -284,33 +299,36 @@ export default {
         </div>
       </template>
       <template v-slot:body>
-        <RadioGroup
-          v-model:value="value.permissionGroup"
-          data-testid="permission-options"
-          :options="options"
-          name="permission-group"
-        />
-        <div
-          v-if="value.permissionGroup === 'custom'"
-          class="custom-permissions ml-20 mt-10"
-          :class="{'two-column': useTwoColumnsForCustom}"
-        >
+        <div style="max-height: 250px; overflow: auto;">
+          <RadioGroup
+            v-model:value="value.permissionGroup"
+            data-testid="permission-options"
+            :options="options"
+            :flexDirection="'column'"
+            name="permission-group"
+          />
           <div
-            v-for="(permission, i) in customPermissionsUpdate"
-            :key="i"
+            v-if="value.permissionGroup === 'custom'"
+            class="custom-permissions ml-20 mt-10"
+            :class="{'two-column': useTwoColumnsForCustom}"
           >
-            <Checkbox
-              v-model:value="permission.value"
-              :data-testid="`custom-permission-${i}`"
-              :disabled="permission.locked"
-              class="mb-5"
-              :label="permission.label"
-            />
-            <i
-              v-if="permission.locked"
-              v-clean-tooltip="permission.tooltip"
-              class="icon icon-lock icon-fw"
-            />
+            <div
+              v-for="(permission, i) in customPermissionsUpdate"
+              :key="i"
+            >
+              <Checkbox
+                v-model:value="permission.value"
+                :data-testid="`custom-permission-${i}`"
+                :disabled="permission.locked"
+                class="mb-5"
+                :label="permission.label"
+              />
+              <i
+                v-if="permission.locked"
+                v-clean-tooltip="permission.tooltip"
+                class="icon icon-lock icon-fw"
+              />
+            </div>
           </div>
         </div>
       </template>

package/components/form/ResourceQuota/Namespace.vue

@@ -72,13 +72,13 @@ export default {
 <template>
   <div>
     <div class="headers mb-10">
-      <div class="mr-10">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div class="mr-10">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.projectResourceAvailability') }}</label>
       </div>
-      <div class="mr-20">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.limit') }}</label>
       </div>
     </div>
@@ -101,7 +101,7 @@ export default {
 .headers {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: left;
     align-items: center;
     border-bottom: 1px solid var(--border);
     height: 30px;

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -173,16 +173,17 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    class="row"
+    class="rowNew"
   >
-    <Select
-      class="mr-10"
-      :mode="mode"
-      :value="type"
-      :disabled="true"
-      :options="types"
-    />
-    <div class="resource-availability mr-10">
+    <div style="width: 450px;">
+      <Select
+        :mode="mode"
+        :value="type"
+        :disabled="true"
+        :options="types"
+      />
+    </div>
+    <div style="width: 450px;" class="resource-availability">
       <PercentageBar
         v-clean-tooltip="tooltip"
         class="percentage-bar"
@@ -191,16 +192,18 @@ export default {
         :color-stops="{'100': '--primary'}"
       />
     </div>
-    <UnitInput
-      :value="value.limit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      @update:value="update"
-    />
+    <div style="width: 450px;">
+      <UnitInput
+        :value="value.limit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        @update:value="update"
+      />
+    </div>
   </div>
 </template>
 
@@ -208,13 +211,13 @@ export default {
   .resource-availability {
     align-self: center;
   }
-  .row {
+  .rowNew {
+    margin-bottom: 10px;
     display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: left;
 
     & > * {
-      width: 100%;
+      width: 400px;
     }
   }
 </style>

package/components/form/ResourceQuota/Project.vue

@@ -57,14 +57,14 @@ export default {
 </script>
 <template>
   <div>
-    <div class="headers mb-10">
-      <div class="mr-10">
+    <div style="justify-content: left;" class="headers mb-10">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.resourceType') }}</label>
       </div>
-      <div class="mr-20">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
       </div>
-      <div class="mr-10">
+      <div style="width: 450px;">
         <label>{{ t('resourceQuota.headers.namespaceDefaultLimit') }}</label>
       </div>
     </div>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -70,46 +70,49 @@ export default {
 <template>
   <div
     v-if="typeOption"
-    class="row"
+    class="rowNew"
   >
-    <Select
-      :value="type"
-      class="mr-10"
-      :mode="mode"
-      :options="types"
-      data-testid="projectrow-type-input"
-      @update:value="updateType($event)"
-    />
-    <UnitInput
-      :value="resourceQuotaLimit[type]"
-      class="mr-10"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-project-quota-input"
-      @update:value="updateQuotaLimit('resourceQuota', type, $event)"
-    />
-    <UnitInput
-      :value="namespaceDefaultResourceQuotaLimit[type]"
-      :mode="mode"
-      :placeholder="typeOption.placeholder"
-      :increment="typeOption.increment"
-      :input-exponent="typeOption.inputExponent"
-      :base-unit="typeOption.baseUnit"
-      :output-modifier="true"
-      data-testid="projectrow-namespace-quota-input"
-      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
-    />
+    <div style="width: 450px;">
+      <Select
+        :value="type"
+        :mode="mode"
+        :options="types"
+        data-testid="projectrow-type-input"
+        @update:value="updateType($event)"
+      />
+    </div>
+    <div style="width: 450px;">
+      <UnitInput
+        :value="resourceQuotaLimit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        data-testid="projectrow-project-quota-input"
+        @update:value="updateQuotaLimit('resourceQuota', type, $event)"
+      />
+    </div>
+    <div style="width: 450px;">
+      <UnitInput
+        :value="namespaceDefaultResourceQuotaLimit[type]"
+        :mode="mode"
+        :placeholder="typeOption.placeholder"
+        :increment="typeOption.increment"
+        :input-exponent="typeOption.inputExponent"
+        :base-unit="typeOption.baseUnit"
+        :output-modifier="true"
+        data-testid="projectrow-namespace-quota-input"
+        @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
+      />
+    </div>
   </div>
 </template>
 
 <style lang='scss' scoped>
-  .row {
+  .rowNew {
     display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
+    justify-content: left;
   }
 </style>

package/components/form/ResourceSelector.vue

@@ -125,7 +125,7 @@ export default {
       </div>
     </div>
     <div class="row">
-      <div class="col span-12">
+      <div class="span-12">
         <Banner :color="(matchingResources.none ? 'warning' : 'success')">
           <span v-clean-html="t('generic.selectors.matchingResources.matchesSome', matchingResources)" />
         </Banner>

package/components/form/SecretSelector.vue

@@ -210,31 +210,32 @@ export default {
 <template>
   <div
     class="secret-selector"
-    :class="{'show-key-selector': showKeySelector}"
   >
-    <div class="input-container">
+    <div :class="{'row': showKeySelector}" class="input-container">
       <!-- key by namespace to ensure label select current page is recreated on ns change -->
-      <ResourceLabeledSelect
-        :key="namespace"
-        v-model:value="name"
-        :disabled="!isView && disabled"
-        :label="secretNameLabel"
-        :mode="mode"
-        :resource-type="SECRET"
-        :in-store="inStore"
-        :paginated-resource-settings="paginateSecretsSetting"
-        :all-resources-settings="allSecretsSettings"
-      />
-      <LabeledSelect
-        v-if="showKeySelector"
-        :key="namespace"
-        v-model:value="key"
-        class="col span-6"
-        :disabled="isKeyDisabled"
-        :options="keys"
-        :label="keyNameLabel"
-        :mode="mode"
-      />
+      <div :class="{'col span-6': showKeySelector}">
+        <ResourceLabeledSelect
+          :key="namespace"
+          v-model:value="name"
+          :disabled="!isView && disabled"
+          :label="secretNameLabel"
+          :mode="mode"
+          :resource-type="SECRET"
+          :in-store="inStore"
+          :paginated-resource-settings="paginateSecretsSetting"
+          :all-resources-settings="allSecretsSettings"
+        />
+      </div>
+      <div v-if="showKeySelector" class="col span-6">
+        <LabeledSelect
+          :key="namespace"
+          v-model:value="key"
+          :disabled="isKeyDisabled"
+          :options="keys"
+          :label="keyNameLabel"
+          :mode="mode"
+        />
+      </div>
     </div>
   </div>
 </template>

package/components/form/Security.vue

@@ -157,7 +157,6 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div>
       <div class="row">
@@ -191,11 +190,10 @@ export default {
         </div>
       </div>
     </div>
-    <div class="spacer" />
 
     <div
       data-testid="input-security-runAsUser"
-      class="row mb-10"
+      class="row"
     >
       <div class="col span-6">
         <LabeledInput

package/components/form/Select.vue

@@ -349,6 +349,9 @@ export default {
       @option:selected="closeOnSelect && close"
       @keydown.enter.stop
     >
+      <template #no-options>
+        暂无数据
+      </template>
       <template
         #option="option"
       >
@@ -388,6 +391,11 @@ export default {
 <style lang="scss" scoped>
   .unlabeled-select {
     position: relative;
+    width: 400px;
+
+    :deep() .vs__actions:after {
+      // padding-top: 2px;
+    }
 
     :deep() .v-select.select-input-view {
       .vs__actions {
@@ -400,13 +408,14 @@ export default {
     }
 
     :deep() .labeled-tooltip.error .status-icon {
-      top: 7px;
-      right: 2px;
+      top: 7px !important;
+      right: 2px !important;
     }
 
     :deep() .vs__selected-options {
       display: flex;
-      margin: 3px;
+      align-items: center;
+      margin: 0px;
 
       .vs__selected {
           width: initial;

package/components/form/ServiceNameSelect.vue

@@ -120,11 +120,8 @@ export default {
 
 <template>
   <div>
-    <div class="spacer" />
-    <div class="row mb-10">
-      <h3 class="col span-6">
-        {{ t('workload.serviceAccountName.label') }}
-      </h3>
+    <div class="row mb-10 mt-40">
+      <h3>{{ t('workload.serviceAccountName.label') }}</h3>
     </div>
     <div class="row span-6">
       <LabeledSelect