new main product landing page and navs

appknox · Sep 25, 2024 · 5c11fc4 · 5c11fc4
1 parent 8bbb40d
commit 5c11fc4
Show file tree

Hide file tree

Showing 47 changed files with 1,807 additions and 1,887 deletions.
diff --git a/app/components/ak-svg/appknox-bg-img.hbs b/app/components/ak-svg/appknox-bg-img.hbs
diff --git a/app/components/ak-svg/sm-indicator.hbs b/app/components/ak-svg/sm-indicator.hbs
@@ -0,0 +1,21 @@
+<svg
+  ...attributes
+  width='25'
+  height='24'
+  viewBox='0 0 25 24'
+  fill='none'
+  xmlns='http://www.w3.org/2000/svg'
+>
+  <circle
+    cx='12.2886'
+    cy='12'
+    r='11.625'
+    fill='#E1EBFF'
+    stroke='#034BD6'
+    stroke-width='0.75'
+  />
+  <path
+    d='M9.72819 13.2812C9.72819 13.633 9.63951 13.9671 9.46214 14.2834C9.28478 14.5967 9.00838 14.8509 8.63296 15.046C8.26049 15.2411 7.77865 15.3387 7.18744 15.3387C6.89183 15.3387 6.63169 15.3254 6.40703 15.2988C6.18532 15.2722 5.9784 15.2293 5.78625 15.1702C5.59411 15.1081 5.39457 15.0283 5.18765 14.9307V13.3699C5.53942 13.5473 5.89415 13.6833 6.25184 13.7779C6.60952 13.8695 6.93321 13.9153 7.22291 13.9153C7.39732 13.9153 7.53921 13.8946 7.64858 13.8533C7.76092 13.8119 7.84369 13.7557 7.8969 13.6848C7.95011 13.6109 7.97671 13.5266 7.97671 13.432C7.97671 13.3197 7.9368 13.2251 7.85699 13.1482C7.78013 13.0684 7.65597 12.9856 7.48452 12.8999C7.31307 12.8142 7.08693 12.7078 6.8061 12.5807C6.56666 12.4683 6.34939 12.353 6.15428 12.2348C5.96214 12.1166 5.7966 11.9821 5.65766 11.8313C5.52168 11.6776 5.41674 11.4987 5.34284 11.2948C5.26894 11.0908 5.23199 10.8499 5.23199 10.572C5.23199 10.1552 5.33397 9.80637 5.53794 9.52555C5.74487 9.24176 6.03161 9.02892 6.39816 8.88703C6.76767 8.74514 7.19335 8.67419 7.67519 8.67419C8.09791 8.67419 8.47777 8.72149 8.81476 8.81609C9.15471 8.91068 9.45919 9.01858 9.72819 9.13978L9.19166 10.4922C8.91379 10.3651 8.64035 10.2646 8.37135 10.1907C8.10234 10.1138 7.85255 10.0754 7.62198 10.0754C7.47122 10.0754 7.34706 10.0946 7.24951 10.133C7.15492 10.1685 7.08397 10.2173 7.03668 10.2793C6.99233 10.3414 6.97016 10.4124 6.97016 10.4922C6.97016 10.5927 7.00859 10.6829 7.08545 10.7627C7.16526 10.8425 7.29681 10.9297 7.48009 11.0243C7.66632 11.1159 7.91907 11.2356 8.23832 11.3834C8.55462 11.5253 8.82363 11.6791 9.04533 11.8446C9.26704 12.0072 9.43554 12.2038 9.55082 12.4343C9.66907 12.6619 9.72819 12.9443 9.72819 13.2812ZM13.395 15.25L12.0692 10.5809H12.0293C12.0411 10.7021 12.0529 10.8661 12.0648 11.0731C12.0796 11.28 12.0929 11.5032 12.1047 11.7426C12.1165 11.9821 12.1224 12.2126 12.1224 12.4343V15.25H10.5705V8.76731H12.9028L14.2552 13.3699H14.2907L15.6165 8.76731H17.9533V15.25H16.3437V12.4077C16.3437 12.2038 16.3467 11.985 16.3526 11.7515C16.3614 11.515 16.3703 11.2933 16.3792 11.0864C16.391 10.8765 16.4013 10.7109 16.4102 10.5897H16.3703L15.0622 15.25H13.395Z'
+    fill='#034BD6'
+  />
+</svg>
diff --git a/app/components/ak-svg/storeknox-bg-img.hbs b/app/components/ak-svg/storeknox-bg-img.hbs
diff --git a/app/components/ak-svg/vp-indicator.hbs b/app/components/ak-svg/vp-indicator.hbs
@@ -0,0 +1,21 @@
+<svg
+  ...attributes
+  width='24'
+  height='24'
+  viewBox='0 0 24 24'
+  fill='none'
+  xmlns='http://www.w3.org/2000/svg'
+>
+  <circle
+    cx='12'
+    cy='12'
+    r='11.625'
+    fill='#FFEDEC'
+    stroke='#FF3A44'
+    stroke-width='0.75'
+  />
+  <path
+    d='M11.9158 9.1106L9.98619 15H8.11302L6.19151 9.1106H7.98008L8.78172 12.0956C8.81126 12.2084 8.84483 12.3534 8.88243 12.5306C8.92271 12.7052 8.95896 12.8798 8.99119 13.0543C9.0261 13.2289 9.04759 13.3712 9.05564 13.4813C9.06639 13.3712 9.08653 13.2302 9.11607 13.0583C9.14561 12.8865 9.17784 12.7146 9.21275 12.5427C9.25035 12.3682 9.28526 12.2245 9.31749 12.1117L10.1352 9.1106H11.9158ZM11.6178 13.4169V12.16H13.8938V13.4169H11.6178ZM16.2706 9.1106C17.0172 9.1106 17.5758 9.27307 17.9464 9.59802C18.3197 9.92297 18.5064 10.3849 18.5064 10.9838C18.5064 11.2523 18.4674 11.5101 18.3895 11.7572C18.3144 12.0043 18.1895 12.2245 18.0149 12.4178C17.843 12.6112 17.6134 12.7643 17.3261 12.8771C17.0414 12.9899 16.6896 13.0463 16.2706 13.0463H15.8235V15H14.2323V9.1106H16.2706ZM16.2344 10.3956H15.8235V11.7491H16.1377C16.2747 11.7491 16.4022 11.7263 16.5204 11.6807C16.6386 11.6323 16.7326 11.5558 16.8024 11.4511C16.8749 11.3436 16.9112 11.2013 16.9112 11.024C16.9112 10.8387 16.8561 10.6884 16.746 10.5729C16.6359 10.4547 16.4654 10.3956 16.2344 10.3956Z'
+    fill='#FF4D3F'
+  />
+</svg>
diff --git a/app/components/home-page/index.hbs b/app/components/home-page/index.hbs
@@ -1,10 +1,5 @@
 {{#if this.isLoaded}}
   {{#if this.isSecurityDashboard}}
-    <HomePage::SecurityDashboardNav
-      @user={{@user}}
-      @logoutAction={{this.invalidateSession}}
-    />
-
     {{yield}}
   {{else}}
     <HomePage::OrganizationDashboard

diff --git a/app/components/home-page/organization-dashboard/header/index.hbs b/app/components/home-page/organization-dashboard/header/index.hbs
@@ -6,6 +6,12 @@
   data-test-organizationDashboardHeader
 >
   <AkStack @alignItems='center' @spacing='1.5'>
+    <AkTypography @variant='h4' @noWrap={{true}}>
+      {{t 'vapt'}}
+    </AkTypography>
+
+    <div local-class='divider' />
+
     <AkTypography
       data-test-organizationDashboardHeader-startScanLabel
       @color='inherit'

diff --git a/app/components/home-page/organization-dashboard/header/index.scss b/app/components/home-page/organization-dashboard/header/index.scss
@@ -17,4 +17,9 @@
       background-color: unset;
     }
   }
+
+  .divider {
+    border-left: 1px solid var(--border-color-1);
+    height: 30px;
+  }
 }
diff --git a/app/components/home-page/organization-dashboard/side-nav/index.hbs b/app/components/home-page/organization-dashboard/side-nav/index.hbs
@@ -12,9 +12,55 @@
     </LinkTo>
   </div>
 
+  {{#if this.showAppMonitoringDashboard}}
+    <AkDivider @color='dark' class='mt-4' />
+
+    <div
+      data-test-side-menu-switcher
+      local-class='switcher {{if
+        this.isSidebarExpanded
+        "expanded"
+        "collapsed"
+      }}'
+      role='button'
+      {{on 'click' this.onClickSwitcher}}
+    >
+      <AkIcon
+        data-test-side-menu-switcher-icon
+        @iconName='apps'
+        @color='textPrimary'
+      />
+
+      {{#if this.isSidebarExpanded}}
+        <AkStack
+          class='ml-2'
+          @width='full'
+          @direction='row'
+          @justifyContent='space-between'
+          @alignItems='center'
+        >
+          <AkTypography data-test-side-menu-switcher-text>
+            {{t 'appSwitcher'}}
+          </AkTypography>
+
+          <AkIcon @iconName='chevron-right' @color='textPrimary' />
+        </AkStack>
+      {{/if}}
+    </div>
+
+    <AkDivider @color='dark' class='mb-4' />
+  {{/if}}
+
   <div local-class='scroll-container'>
-    <AkList local-class='side-menu-list' as |akl|>
-      {{#each this.menuItems as |it|}}
+    <AkList
+      local-class='side-menu-list {{if
+        this.showAppMonitoringDashboard
+        ""
+        "noSwitcher"
+      }}'
+      as |akl|
+    >
+      {{#each this.renderMenuItems as |it|}}
         {{#if it.component}}
           <akl.listItem
             aria-label='{{it.label}} side menu item'
@@ -91,7 +137,16 @@
   </div>
 
   <AkList data-test-side-lower-menu local-class='lower-menu' as |akl|>
-    {{#each this.lowerMenuItems as |lmi|}}
+    {{#if @isStoreknox}}
+      <AkDivider
+        data-test-side-lower-menu-divider
+        local-class='divider'
+        @color='dark'
+        @tag='li'
+      />
+    {{/if}}
+
+    {{#each this.renderLowerMenuItems as |lmi|}}
       <akl.listItem
         @noGutters={{true}}
         class={{this.classes.menuItemLink}}
@@ -143,4 +198,52 @@
       {{/if}}
     {{/each}}
   </AkList>
-</aside>
+</aside>
+
+<AkPopover
+  data-test-side-menu-switcher-modal
+  @anchorRef={{this.anchorRef}}
+  @arrow={{true}}
+  @closeHandler={{this.closeSwitcherModal}}
+  @hasBackdrop={{true}}
+  @clickOutsideToClose={{true}}
+>
+  <div local-class='switcher-popover-container'>
+    <div local-class='modal-title'>
+      <AkTypography
+        {{style textTransform='uppercase'}}
+        @variant='body2'
+        @fontWeight='medium'
+      >
+        {{t 'switchTo'}}
+      </AkTypography>
+    </div>
+
+    <AkLink
+      local-class='sm-modal-item'
+      @underline='none'
+      @route={{this.switchToRoute}}
+    >
+      <AkStack
+        @direction='row'
+        @alignItems='center'
+        @spacing='1'
+        class='px-2 py-1'
+      >
+        {{#if @isStoreknox}}
+          <AkSvg::VpIndicator data-test-side-menu-switcher-modal-vp-svg />
+
+          <AkTypography data-test-side-menu-switcher-modal-switch-to>
+            {{if this.orgIsAnEnterprise (t 'vapt') (t 'appknox')}}
+          </AkTypography>
+        {{else}}
+          <AkSvg::SmIndicator data-test-side-menu-switcher-modal-sm-svg />
+
+          <AkTypography data-test-side-menu-switcher-modal-switch-to>
+            {{if this.orgIsAnEnterprise (t 'appMonitoring') (t 'storeknox')}}
+          </AkTypography>
+        {{/if}}
+      </AkStack>
+    </AkLink>
+  </div>
+</AkPopover>
diff --git a/app/components/home-page/organization-dashboard/side-nav/index.scss b/app/components/home-page/organization-dashboard/side-nav/index.scss
@@ -22,18 +22,13 @@
       width: 75%;
     }
 
-    .scroll-container {
-      display: flex;
-      flex: 1;
-    }
-
     .side-menu-list {
       margin: auto;
     }
   }
 
   .app-logo {
-    margin: 3em auto;
+    margin: 3em auto 1em;
     max-width: 56%;
     max-height: 9em;
 
@@ -64,6 +59,10 @@
     flex-direction: column;
     box-sizing: border-box;
     overflow-x: hidden;
+
+    &.noSwitcher {
+      padding-top: 3em;
+    }
   }
 
   .scroll-container {
@@ -191,4 +190,33 @@
       cursor: default;
     }
   }
+
+  .switcher {
+    padding: 1em;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &.collapsed {
+      justify-content: center;
+    }
+  }
+}
+
+.switcher-popover-container {
+  margin-left: 0.8em; // offset for arrow
+  border: var(--organization-dashboard-side-nav-border);
+  box-shadow: var(--organization-dashboard-side-nav-box-shadow);
+  min-width: 200px;
+
+  .sm-modal-item {
+    background-color: var(--organization-dashboard-side-nav-bg-color);
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .modal-title {
+    background-color: var(--organization-dashboard-side-nav-modal-title-background);
+    padding: 0.4em 1em;
+  }
 }