dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.10

package/assets/data/aws-regions.json

@@ -1,6 +1,7 @@
 [
   "af-south-1",
   "ap-east-1",
+  "ap-east-2",
   "ap-northeast-1",
   "ap-northeast-2",
   "ap-northeast-3",
@@ -11,6 +12,7 @@
   "ap-southeast-3",
   "ap-southeast-4",
   "ap-southeast-5",
+  "ap-southeast-7",
   "ca-central-1",
   "ca-west-1",
   "cn-north-1",
@@ -26,6 +28,7 @@
   "il-central-1",
   "me-central-1",
   "me-south-1",
+  "mx-central-1",
   "sa-east-1",
   "us-east-1",
   "us-east-2",

package/assets/images/icons/document.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.30594 4.11111H8.9726M4.30594 7.22222H8.9726M4.30594 10.3333H7.41705M1.19482 2.55556C1.19482 2.143 1.35871 1.74733 1.65044 1.45561C1.94216 1.16389 2.33782 1 2.75038 1H10.5282C10.9407 1 11.3364 1.16389 11.6281 1.45561C11.9198 1.74733 12.0837 2.143 12.0837 2.55556V13.4444C12.0837 13.857 11.9198 14.2527 11.6281 14.5444C11.3364 14.8361 10.9407 15 10.5282 15H2.75038C2.33782 15 1.94216 14.8361 1.65044 14.5444C1.35871 14.2527 1.19482 13.857 1.19482 13.4444V2.55556Z" stroke="white" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/images/key.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="24px"
+   viewBox="0 -960 960 960"
+   width="24px"
+   fill="#1f1f1f"
+   version="1.1"
+   id="svg134"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs138" />
+  <path
+     d="m 589.40143,-675.50277 q 18.093,-18.093 43.05067,-18.093 24.95767,0 43.05067,18.093 18.093,18.093 18.093,43.05067 0,24.95767 -18.093,43.05067 -18.093,18.093 -43.05067,18.093 -24.95767,0 -43.05067,-18.093 -18.093,-18.093 -18.093,-43.05067 0,-24.95767 18.093,-43.05067 z m -509.218622,595.319962 1.346707,-221.978082 104.937635,-14.8137 16.81626,-109.63359 103.93198,-20.52405 94.91609,-94.9161 q -25.97207,-65.7784 -12.2165,-138.59637 13.75558,-72.81799 67.64106,-126.70347 72.65183,-72.65182 174.89606,-72.65182 102.24424,0 174.89607,72.65182 72.65182,72.65183 72.65182,174.89607 0,102.24423 -72.65182,174.89606 -53.88548,53.88548 -126.36241,67.9821 -72.48567,14.08788 -138.93743,-12.55754 L 220.09966,-80.182808 Z M 492.53526,-772.36896 q -51.6643,51.6643 -57.07733,119.23539 -5.41304,67.57111 27.14386,120.57336 l -131.51309,131.51309 -83.88015,16.21287 -18.35534,111.59242 -99.42841,13.99169 v 129.82534 h 69.95842 l 333.17699,-333.17699 q 53.00225,32.5569 120.57336,27.14386 67.57109,-5.41303 119.23539,-57.07733 57.71569,-57.71569 57.71569,-139.91684 0,-82.20115 -57.71569,-139.91686 -57.71571,-57.71569 -139.91686,-57.71569 -82.20115,0 -139.91684,57.71569 z"
+     id="path132"
+     style="stroke-width:1" />
+</svg>

package/assets/images/providers/sks.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66 57" fill="#fff" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round"><use xlink:href="#A" x=".5" y=".5"/><symbol id="A" overflow="visible"><path d="M32 0L0 55.426h4.44L32 7.963v7.8L9.033 55.426h4.593L32 23.733v7.962l-13.78 23.73h4.593L32 39.656v7.8l-4.593 7.962H64z" stroke="none" fill="#da291c" fill-rule="nonzero"/></symbol></svg>

package/assets/images/vendor/cognito.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><defs><linearGradient id="A" x1="0" y1="80" x2="80" y2="0" gradientUnits="userSpaceOnUse"><stop stop-color="#bd0816" offset="0%"/><stop stop-color="#ff5252" offset="100%"/></linearGradient></defs><g fill-rule="evenodd"><path d="M0 0h80v80H0z" fill="url(#A)" transform="matrix(.932635 0 0 .928144 2.754491 2.634731)"/><path fill="#fff" d="M17.729 38.107h12.577v-1.926H17.729zM61.011 52.12l1.368 1.362-7.184 7.152a.97.97 0 0 1-.684.282c-.248 0-.495-.094-.684-.282l-3.614-3.597 1.368-1.362 2.93 2.916zm4.452 5.308c-.221 1.811-.96 3.495-2.141 4.872-.839.978-1.898 1.787-3.063 2.338-1.562.739-3.298 1.019-5.027.809-1.681-.204-3.266-.865-4.587-1.91a9.14 9.14 0 0 1-3.428-8.33 9.2 9.2 0 0 1 4.929-7.075 9.12 9.12 0 0 1 4.18-1.013 9.36 9.36 0 0 1 1.122.068c3.034.369 5.68 2.217 7.075 4.943.837 1.635 1.161 3.467.938 5.296zm.786-6.169c-1.688-3.299-4.89-5.536-8.565-5.982a11.07 11.07 0 0 0-6.425 1.145c-3.287 1.691-5.516 4.89-5.962 8.555-.47 3.876 1.079 7.641 4.146 10.069a11.11 11.11 0 0 0 5.555 2.313c.451.055.902.082 1.352.082a11.08 11.08 0 0 0 4.74-1.063c1.41-.666 2.691-1.645 3.704-2.828a11.07 11.07 0 0 0 2.591-5.891c.269-2.21-.124-4.423-1.136-6.401zm-38.845-7.372h3.87v-1.926h-3.87zm-9.674 0h7.74v-1.926h-7.74zm-.836-25.04h43.272c1.14 0 2.066 1.124 2.066 2.505v7.126H59.33v-4.815c0-.532-.432-.963-.967-.963H36.111c-.535 0-.967.431-.967.963v4.815H14.827V21.35c0-1.358.947-2.505 2.066-2.505zm30.358 9.351c2.246 0 4.074 1.801 4.074 4.014a3.99 3.99 0 0 1-2.108 3.505c-1.234.667-2.722.659-3.94.001-1.295-.705-2.099-2.047-2.099-3.506 0-2.213 1.827-4.014 4.074-4.014zM14.827 49.086V30.402h20.316v16.372c0 .533.432.963.967.963h10.114v-1.926h-8.08c.084-3.854 2.655-7.184 6.356-8.247 1.71.796 3.753.804 5.489-.001a8.87 8.87 0 0 1 5.094 3.891l1.655-.998a10.82 10.82 0 0 0-5.015-4.306 5.87 5.87 0 0 0 1.536-3.94c0-3.275-2.696-5.94-6.009-5.94s-6.009 2.665-6.009 5.94c0 1.474.563 2.86 1.524 3.929-2.586 1.084-4.606 3.117-5.688 5.624V24.624h20.316v15.409h1.935v-9.631h2.902l.001 14.446h1.935l-.001-23.498c0-2.443-1.795-4.431-4.001-4.431H16.894c-2.207 0-4.001 1.988-4.001 4.431v27.736c0 2.443 1.795 4.43 4.001 4.43h25.99V51.59h-25.99c-1.119 0-2.066-1.146-2.066-2.504z"/></g></svg>

package/assets/styles/app.scss

@@ -7,6 +7,7 @@
 @import "./base/color";
 @import "./base/basic";
 @import "./base/typography";
+@import "./base/spacing";
 
 @import "./fonts/fontstack";
 @import "./fonts/dots";
@@ -32,5 +33,7 @@
 
 @import "./vendor/vue-select";
 @import "./vendor/code-mirror";
+
 @import './all.scss';
 @import '../icons/iconfont.css';
+

package/assets/styles/base/_basic.scss

@@ -106,6 +106,16 @@ A {
     @include focus-outline;
     outline-offset: 2px;
   }
+
+  &.secondary {
+    color: var(--body-text);
+    text-decoration: underline;
+
+    &:hover,
+    &:active {
+      text-decoration: none;
+    }
+  }
 }
 
 HR {

package/assets/styles/base/_spacing.scss

@@ -0,0 +1,29 @@
+// Text indent, margins, and paddings from 4-80px in 4px increments
+// e.g. pp-1 - {padding: 4px}
+// e.g. mmt-2 - {margin-top: 8px}
+$spacing-property-map: (
+    mm: margin,
+    mmt: margin-top,
+    mmr: margin-right,
+    mml: margin-left,
+    mmb: margin-bottom,
+    pp: padding,
+    ppt: padding-top,
+    ppb: padding-bottom,
+    ppl: padding-left,
+    ppr: padding-right,
+);
+
+@each $keyword, $property in $spacing-property-map {
+    .#{$keyword}-0 {
+        #{$property}: 0;
+    }
+
+    @for $size from 1 through 20 {
+        $val: $size * 4;
+
+        .#{$keyword}-#{$size} {
+            #{$property}: $val * 1px;
+        }
+    }
+}

package/assets/styles/base/_variables.scss

@@ -39,35 +39,41 @@ $z-indexes: (
   // ---- Boundary for central content (in `<main>`)
 
   // This covers both relative and content modes of the loading indicator
-  loading: 12,
+  loading: 16,
 
   // Users can click on shell in header and show shell even with most loading indicators showing,
   // so add it above them
-  windowsManager: 13,
+  windowsManager: 17,
 
-  mainHeader: 14,
+  mainHeader: 18,
 
   cruFooter: 19,
 
-  modalOverlay: 20,
-  modalContent: 21,
+  loadingMain: 51,
 
-  tooltip: 30,
+  slide-in: 52,
 
-  dropdownOverlay: 40,
-  dropdownContent: 41,
+  modalOverlay: 53,
+  modalContent: 54,
 
-  loadingMain: 51
+  dropdownOverlay: 55,
+  dropdownContent: 56,
+
+  tooltip: 57,
 );
 
 // Usage Example:
 // @media only screen and (min-width: map-get($breakpoints, '--viewport-*')) {
 // }
 $breakpoints: (
-  '--viewport-4':  480px, // Phone
-  '--viewport-7':  768px, // Tablet
-  '--viewport-9':  992px, // Laptop/Desktop
-  '--viewport-12': 1281px, // Desktop
+  '--viewport-4': 480px,
+  // Phone
+  '--viewport-7': 768px,
+  // Tablet
+  '--viewport-9': 992px,
+  // Laptop/Desktop
+  '--viewport-12': 1281px,
+  // Desktop
 );
 
 $font-size-h2: 21px;

package/assets/styles/global/_button.scss

@@ -169,13 +169,13 @@ button,
 }
 
 .role-multi-action {
-  //  background: var(--accent-btn);
-  //  border: solid thin var(--primary);
-   color: var(--primary) !important;
-   border-radius: 2px;
-   min-width: 32px;
-   height: 32px;
-   width: 32px;
+  background-color: rgba(0,0,0,0);
+  border: solid thin var(--primary);
+  color: var(--primary) !important;
+  border-radius: 2px;
+  min-width: 32px;
+  height: 32px;
+  width: 32px;
 }
 
 .icon-group i {

package/assets/styles/global/_labeled-input.scss

@@ -88,7 +88,7 @@
     }
   }
 
-  &.view>DIV:not(.addon) {
+  &.view>DIV:not(.addon, .sub-label) {
     font-size: 14px;
     padding: $input-padding-lg 0 0 0;
 

package/assets/styles/global/_layout.scss

@@ -6,7 +6,7 @@
   .outlet {
     display: flex;
     flex-direction: column;
-    padding: $space-m;
+    padding: 20px;
     min-height: 100%;
   }
 }

package/assets/styles/global/_tooltip.scss

@@ -11,7 +11,7 @@
     background: var(--tooltip-bg);
     box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
     color: var(--tooltip-text);
-    border-radius: 4px;
+    border-radius: 2px;
     padding: 8px;
   }
 
@@ -123,14 +123,14 @@
 .v-popper__popper {
   $color: var(--popover-bg);
   border: 1px solid var(--border);
-  border-radius: var(--border-radius-lg);
+  border-radius: 2px;
 
   .v-popper__inner {
-    border-radius: 4px;
+    border-radius: 2px;
     background: $color;
     color: var(--popover-text);
     padding: 10px;
-    border-radius: var(--border-radius-lg);
+    border-radius: 0px;
     border: none;
 
     a {

package/assets/styles/themes/_dark.scss

@@ -53,6 +53,7 @@
   --slider-light-bg-right      : #{rgba($darker, 0)};
 
   --muted                      : #{$disabled};
+  --deemphasized               : #{$disabled};
 
   --body-bg                    : #{$darker};
   --body-text                  : #{$lightest};
@@ -96,6 +97,7 @@
 
   --modal-bg                   : #{$dark};
   --modal-border               : #{$medium};
+  --subtle-overlay-bg          : #{rgba($darkest, 0.75)};
   --overlay-bg                 : #{rgba($darkest, 0.75)};
   --overlay-model-bg           : rgba($darkest, 0.45);
   --shadow                     : #{rgba($darkest, 0.9)};
@@ -122,6 +124,8 @@
   --dropdown-group-text        : #{$lighter};
   --dropdown-highlight-text    : var(--link);
 
+  --notification-unread-bg     : var(--primary-banner-bg);
+
   --input-text                 : #{$lightest};
   --input-label                : #{$lighter};
   --input-placeholder          : #{$disabled};
@@ -137,6 +141,8 @@
   --input-disabled-placeholder : #{darken($disabled, 10%)};
   --input-addon-bg             : #{$darker};
 
+  --label-secondary           : #{$lighter};
+
   --progress-bg                : #{$medium};
   --progress-divider           : #{$lightest};
 
@@ -166,6 +172,7 @@
   --tabbed-container-bg        : #{mix($medium, $dark, 20%)};
 
   --yaml-editor-bg             : #{$darkest};
+  --drawer-body-bg             : #{$darkest};
 
   --diff-border                : var(--border);
   --diff-header-bg             : var(--nav-bg);
@@ -229,7 +236,30 @@
   --badge-state-disabled-bg    : #{$medium};
   --badge-state-disabled-border: #{$lighter};
 
+  --click-badge-error          : #{$lightest};
+  --click-badge-error-bg       : #F43434;
+  --click-badge-error-border   : #FF8080;
+
+  --click-badge-warning        : #662E00;
+  --click-badge-warning-bg     : #FFCA4D;
+  --click-badge-warning-border : #F2870D;
+
+  --click-badge-success        : #00FF32;
+  --click-badge-success-bg     : #354240;
+  --click-badge-success-border : #4DFF70;
+  
+  --click-badge-info           : #{$lightest};
+  --click-badge-info-bg        : #{$info};
+  --click-badge-info-border    : #ACD2EC;
+  --bubble-bg                  : #{$darkest};
+
   $slate: #4B4F6B;
 
   --slate: #{$slate};
+
+  --link-text-secondary: #{$secondary};
+
+  .secondary-text-link {
+    color: var(--link-text-secondary);
+  }
 }

package/assets/styles/themes/_light.scss

@@ -8,6 +8,8 @@ $darker    : #333;
 //light disabled
 $dark      : #ffffff;
 
+$scroll_dark: #8b8b8b;
+
 //light border and buttons
 $medium    : #d7d7d7;
 
@@ -82,6 +84,7 @@ BODY, .theme-light {
 
   --link                    : #{$link};
   --link-text               : #{contrast-color($link)};
+  --link-text-secondary     : #{$darker};
   --link-hover-bg           : #{darken($link, 10%)};
   --link-hover-text         : #{saturate($lightest, 20%)};
   --link-active-bg          : #{darken($link, 25%)};
@@ -94,6 +97,16 @@ BODY, .theme-light {
   
   .text-link {
     color: var(--link) !important;
+
+  }
+
+  .secondary-text-link {
+    color: var(--link-text-secondary);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 
   .bg-link {
@@ -147,13 +160,17 @@ BODY, .theme-light {
       }
   }
 
-  // --muted                      : #{$dark};
   --muted                      : #A8ABB2;
+  --deemphasized               : #717179;
 
   .text-muted {
     color: var(--muted) !important;
   }
 
+  .text-deemphasized {
+    color: var(--deemphasized);
+  }
+
   --darker                    : #{$darker};
   --darker-text               : #{contrast-color($darker)};
   --darker-hover-bg           : #{darken($darker, 10%)};
@@ -314,11 +331,42 @@ BODY, .theme-light {
       background: var(--error-active-bg);
       }
   }
+
+  --disabled : #{$disabled};
+  --disabled-text : #{contrast-color($disabled)};
+  --disabled-hover-bg : #{darken($disabled, 10%)};
+  --disabled-hover-text : #{saturate($lightest, 20%)};
+  --disabled-active-bg : #{darken($disabled, 25%)};
+  --disabled-active-text : #{contrast-color(darken($disabled, 25%))};
+  --disabled-border : #{$disabled};
+  --disabled-banner-bg : #{rgba($disabled, 0.15)};
+  --disabled-light-bg : #{rgba($disabled, 0.05)};
+
+
+  .text-disabled {
+    color: var(--disabled) !important;
+  }
+
+  .bg-disabled {
+    background-color: var(--disabled);
+    color: var(--disabled-text);
+
+    &.btn:hover {
+      color: var(--disabled-hover-text);
+      background: var(--disabled-hover-bg);
+      transition: all 0.3s ease;
+    }
+
+    &.btn:active {
+      color: var(--disabled-active-text);
+      background: var(--disabled-active-bg);
+    }
+  }
   
 
   --body-bg                    : #{$lightest};
   --body-text                  : #{$darkest};
-  --scrollbar-thumb            : #{$dark};
+  --scrollbar-thumb            : #{$scroll_dark};
   --scrollbar-thumb-dropdown   : #{$lighter};
   --scrollbar-track            : transparent;
 
@@ -360,6 +408,8 @@ BODY, .theme-light {
   --border                     : #{$medium};
   --border-width               : 1px;
   --border-radius              : 2px;
+  --border-radius-md           : 6px;
+  --border-radius-lg           : 8px;
   // --outline                    : var(--primary);
   --outline                    : #d9d9d9;
   --outline-width              : 1px;
@@ -370,7 +420,8 @@ BODY, .theme-light {
 
   --modal-bg                   : #{$lightest};
   --modal-border               : #{$dark};
-  --overlay-bg                 : #{rgba($lighter, 0.75)};
+  --subtle-overlay-bg          : #{rgba($lighter, 0.75)};
+  --overlay-bg                 : rgba(38, 42, 64, 0.35);
   --overlay-model-bg           : rgba(0, 0, 0, 0.45);
   --overlay-model-bg           : rgba(0, 0, 0, 0.45);
   --shadow                     : #{rgba($medium, 0.85)};
@@ -400,6 +451,8 @@ BODY, .theme-light {
   --dropdown-disabled-bg       : #{$disabled};
   --dropdown-highlight-text    : var(--link);
 
+  --notification-unread-bg     : var(--primary-banner-bg);
+
   --card-badge-text            : #ffffff;
 
   // UNUSED?
@@ -422,6 +475,7 @@ BODY, .theme-light {
   --input-addon-bg             : #{$darker};
   --input-hover-border         : #d7d7d7;
 
+  --label-secondary           : #{$darker};
 
   --progress-bg                : #{$medium};
   --progress-divider           : #{$medium};
@@ -460,6 +514,7 @@ BODY, .theme-light {
   --tabbed-container-bg        : #{mix($light, $lighter, 15%)};
 
   --yaml-editor-bg             : #{$lighter};
+  --drawer-body-bg             : #{$lighter};
 
   --diff-border                : var(--border);
   --diff-header-bg             : var(--nav-bg);
@@ -569,4 +624,29 @@ BODY, .theme-light {
 
   --product-icon               : #{$darker};
   --product-icon-active        : #{$darkest};
+
+  --badge-state-disabled-text  : #{$darker};
+  --badge-state-disabled-bg    : #{$lighter};
+  --badge-state-disabled-border: #{$medium};
+
+  --gap                        : 8px;
+  --gap-md                     : 16px;
+  --gap-lg                     : 24px;
+
+  --click-badge-error          : #{$lightest};
+  --click-badge-error-bg       : #B13333;
+  --click-badge-error-border   : #7C0015;
+
+  --click-badge-warning        : #473900;
+  --click-badge-warning-bg     : #FFE47A;
+  --click-badge-warning-border : #E5A200;
+
+  --click-badge-success        : #007032;
+  --click-badge-success-bg     : #CEE4D7;
+  --click-badge-success-border : #1F7043;
+
+  --click-badge-info           : #{$lightest};
+  --click-badge-info-bg        : #{$info};
+  --click-badge-info-border    : #2673A6;
+  --bubble-bg                : #{$lighter};
 }