From e16aa6728272485e613fc3039b203942dc4ef9d4 Mon Sep 17 00:00:00 2001
From: Avi Shah <avishah1904@gmail.com>
Date: Fri, 27 Dec 2024 15:23:47 +0530
Subject: [PATCH] fix: ak divider vertical width issue

---
 app/components/ak-divider/index.hbs                   |  1 +
 app/components/ak-divider/index.stories.js            |  6 ++++--
 app/components/ak-divider/index.ts                    | 10 ++++++++++
 app/components/app-monitoring/settings/index.hbs      |  7 ++++++-
 app/components/app-monitoring/settings/index.scss     |  3 ---
 .../compare-list/skeleton-loader/index.hbs            |  2 +-
 .../compare-list/skeleton-loader/index.scss           |  7 -------
 app/components/file-compare/header/index.hbs          | 10 +++++++---
 app/components/file-compare/header/index.scss         |  6 ++----
 .../edit-analysis-button/index.hbs                    |  4 ++--
 .../vulnerability-analysis-details/findings/index.hbs |  4 ++--
 app/components/project-list/header/index.hbs          |  7 ++++++-
 app/components/project-list/header/index.scss         |  3 ---
 app/components/sbom/app-list/header/index.hbs         |  7 ++++++-
 app/components/sbom/app-list/header/index.scss        |  3 ---
 app/components/security/analysis-list/index.hbs       |  7 ++++++-
 app/components/security/analysis-list/index.scss      |  3 ---
 .../storeknox/inventory/pending-review/index.hbs      |  2 +-
 .../storeknox/inventory/pending-review/index.scss     |  5 -----
 app/styles/_component-variables.scss                  | 11 -----------
 20 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/app/components/ak-divider/index.hbs b/app/components/ak-divider/index.hbs
index 5930bcda0..338055884 100644
--- a/app/components/ak-divider/index.hbs
+++ b/app/components/ak-divider/index.hbs
@@ -3,6 +3,7 @@
   <Tag
     data-test-ak-divider
     ...attributes
+    {{style width=this.width height=this.height}}
     local-class='
       ak-divider-root
       ak-divider-variant-{{or @variant "fullWidth"}}
diff --git a/app/components/ak-divider/index.stories.js b/app/components/ak-divider/index.stories.js
index 8d22c4039..20384e4d9 100644
--- a/app/components/ak-divider/index.stories.js
+++ b/app/components/ak-divider/index.stories.js
@@ -57,9 +57,9 @@ const VerticalTemplate = (args) => ({
   template: hbs`
     <AkTypography @color="textSecondary" @gutterBottom={{true}}>Experiment with me</AkTypography>
     
-    <div {{style height="200px"}} class="flex-row flex-align-center flex-justify-space-around p-3 w-full m-3">
+    <div class="flex-row flex-align-center flex-justify-space-around p-3 w-full m-3">
       <AkTypography @color="textSecondary" @gutterBottom={{true}}>A</AkTypography>
-        <AkDivider @color={{this.color}} @direction={{this.direction}} @variant={{this.variant}} />
+        <AkDivider @height={{this.height}} @width={{this.width}} @color={{this.color}} @direction={{this.direction}} @variant={{this.variant}} />
       <AkTypography @color="textSecondary" @gutterBottom={{true}}>B</AkTypography>
     </div>
   `,
@@ -72,4 +72,6 @@ Vertical.args = {
   color: 'dark',
   direction: 'vertical',
   variant: 'fullWidth',
+  height: '200px',
+  width: '1px',
 };
diff --git a/app/components/ak-divider/index.ts b/app/components/ak-divider/index.ts
index db566a57c..afc0adec4 100644
--- a/app/components/ak-divider/index.ts
+++ b/app/components/ak-divider/index.ts
@@ -7,6 +7,8 @@ export interface AkDividerSignature {
     variant?: 'fullWidth' | 'middle';
     color?: 'light' | 'dark';
     direction?: 'horizontal' | 'vertical';
+    height?: string;
+    width?: string;
   };
   Blocks: { default: [] };
 }
@@ -15,6 +17,14 @@ export default class AkDividerComponent extends Component<AkDividerSignature> {
   get isVertical() {
     return this.args.direction === 'vertical';
   }
+
+  get height() {
+    return this.isVertical ? this.args.height || '100%' : '1px';
+  }
+
+  get width() {
+    return !this.isVertical ? this.args.width || '100%' : '1px';
+  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {
diff --git a/app/components/app-monitoring/settings/index.hbs b/app/components/app-monitoring/settings/index.hbs
index 32030f0f4..9d9a19137 100644
--- a/app/components/app-monitoring/settings/index.hbs
+++ b/app/components/app-monitoring/settings/index.hbs
@@ -76,7 +76,12 @@
       </AkSelect>
 
       {{#if this.showClearFilter}}
-        <AkDivider local-class='divider' />
+        <AkDivider
+          @direction='vertical'
+          @color='dark'
+          @height='32px'
+          local-class='divider'
+        />
 
         <AkButton
           @color='textSecondary'
diff --git a/app/components/app-monitoring/settings/index.scss b/app/components/app-monitoring/settings/index.scss
index b74b99f1c..b89fa25e7 100644
--- a/app/components/app-monitoring/settings/index.scss
+++ b/app/components/app-monitoring/settings/index.scss
@@ -71,9 +71,6 @@
 }
 
 .divider {
-  width: 1px;
-  height: 32px;
-  background-color: var(--appmonitoring-settings-header-divider-background-color);
   margin-left: 0.714em;
 }
 
diff --git a/app/components/file-compare/compare-list/skeleton-loader/index.hbs b/app/components/file-compare/compare-list/skeleton-loader/index.hbs
index 63b9435d7..7c97915ed 100644
--- a/app/components/file-compare/compare-list/skeleton-loader/index.hbs
+++ b/app/components/file-compare/compare-list/skeleton-loader/index.hbs
@@ -23,7 +23,7 @@
               <AkSkeleton @width='80px' @height='19px' />
             </AkStack>
 
-            <AkDivider local-class='divider' />
+            <AkDivider @direction='vertical' @height='26px' @color='dark' />
 
             <AkStack @spacing='0.5' @alignItems='center'>
               <AkSkeleton @width='20px' @height='20px' />
diff --git a/app/components/file-compare/compare-list/skeleton-loader/index.scss b/app/components/file-compare/compare-list/skeleton-loader/index.scss
index 9e487dbfa..32126ea7a 100644
--- a/app/components/file-compare/compare-list/skeleton-loader/index.scss
+++ b/app/components/file-compare/compare-list/skeleton-loader/index.scss
@@ -13,10 +13,3 @@
   color: var(--file-compare-list-skeleton-loader-breadcrumbs-seperator-color);
 }
 
-.divider {
-  width: 1px;
-  height: 26px;
-  background-color: var(
-    --file-compare-list-skeleton-loader-divider-background-color
-  );
-}
diff --git a/app/components/file-compare/header/index.hbs b/app/components/file-compare/header/index.hbs
index 672631092..f918ba444 100644
--- a/app/components/file-compare/header/index.hbs
+++ b/app/components/file-compare/header/index.hbs
@@ -41,7 +41,7 @@
           </AkTypography>
         </AkStack>
 
-        <AkDivider local-class='divider' />
+        <AkDivider @direction='vertical' @height='26px' local-class='divider' />
 
         <AkStack @alignItems='center' @spacing='0.5'>
           <AkIcon @variant='outlined' @iconName='text-snippet' />
@@ -52,7 +52,11 @@
         </AkStack>
 
         {{#if @project}}
-          <AkDivider local-class='divider' />
+          <AkDivider
+            @direction='vertical'
+            @height='26px'
+            local-class='divider'
+          />
 
           <AkStack @alignItems='center' @spacing='0.5'>
             <AkIcon @variant='outlined' @iconName='folder' />
@@ -65,7 +69,7 @@
           </AkStack>
         {{/if}}
 
-        <AkDivider local-class='divider' />
+        <AkDivider @direction='vertical' @height='26px' local-class='divider' />
 
         <AkStack @alignItems='center'>
           <AkIcon
diff --git a/app/components/file-compare/header/index.scss b/app/components/file-compare/header/index.scss
index 88ad12ab6..c591787e3 100644
--- a/app/components/file-compare/header/index.scss
+++ b/app/components/file-compare/header/index.scss
@@ -12,11 +12,9 @@
     background-color: var(--file-compare-header-white-background-color);
     border: 1px solid var(--file-compare-header-dark-border-color);
     padding: 1em 1.5em;
-
+    
     .divider {
-      width: 1px;
-      height: 26px;
-      background-color: var(--file-compare-header-divider-background-color);
+      border-color: var(--file-compare-header-divider-background-color) !important;
     }
 
     .file-icon {
diff --git a/app/components/file-details/vulnerability-analysis-details/edit-analysis-button/index.hbs b/app/components/file-details/vulnerability-analysis-details/edit-analysis-button/index.hbs
index 23f2c334f..416325c5e 100644
--- a/app/components/file-details/vulnerability-analysis-details/edit-analysis-button/index.hbs
+++ b/app/components/file-details/vulnerability-analysis-details/edit-analysis-button/index.hbs
@@ -1,7 +1,7 @@
 {{#if this.me.org.is_admin}}
   {{#if (or @analysis.isRisky @analysis.isOverriddenAsPassed)}}
-    <AkStack @spacing='1.5' {{style height='100%'}}>
-      <AkDivider @direction='vertical' @color='dark' />
+    <AkStack @spacing='1.5'>
+      <AkDivider @direction='vertical' @height='32px' @color='dark' />
 
       <AkTooltip
         @arrow={{true}}
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/index.hbs b/app/components/file-details/vulnerability-analysis-details/findings/index.hbs
index 4fa4bee27..4c4cfbe67 100644
--- a/app/components/file-details/vulnerability-analysis-details/findings/index.hbs
+++ b/app/components/file-details/vulnerability-analysis-details/findings/index.hbs
@@ -31,7 +31,7 @@
           {{t 'vulnerableApis'}}
         </AkTypography>
 
-        <AkStack @spacing='1.5' @alignItems='center' {{style height='30px'}}>
+        <AkStack @spacing='1.5' @alignItems='center'>
           <AkStack
             local-class='counter-container'
             @spacing='3'
@@ -75,7 +75,7 @@
             </AkIconButton>
           </AkStack>
 
-          <AkDivider @direction='vertical' @color='dark' />
+          <AkDivider @direction='vertical' @height='30px' @color='dark' />
 
           <AkTooltip
             @arrow={{true}}
diff --git a/app/components/project-list/header/index.hbs b/app/components/project-list/header/index.hbs
index e3fc42971..252264f56 100644
--- a/app/components/project-list/header/index.hbs
+++ b/app/components/project-list/header/index.hbs
@@ -128,7 +128,12 @@
         </AkSelect>
 
         {{#if this.showClearFilter}}
-          <AkDivider local-class='divider' />
+          <AkDivider
+            local-class='divider'
+            @direction='vertical'
+            @color='dark'
+            @height='32px'
+          />
 
           <AkButton
             @color='textSecondary'
diff --git a/app/components/project-list/header/index.scss b/app/components/project-list/header/index.scss
index 086331ab7..57cd4bb7e 100644
--- a/app/components/project-list/header/index.scss
+++ b/app/components/project-list/header/index.scss
@@ -40,9 +40,6 @@
 }
 
 .divider {
-  width: 1px;
-  height: 32px;
-  background-color: var(--project-list-header-divider-background-color);
   margin-left: 0.714em;
 }
 
diff --git a/app/components/sbom/app-list/header/index.hbs b/app/components/sbom/app-list/header/index.hbs
index b7e907b2e..1a4741628 100644
--- a/app/components/sbom/app-list/header/index.hbs
+++ b/app/components/sbom/app-list/header/index.hbs
@@ -80,7 +80,12 @@
     </AkSelect>
 
     {{#if this.showClearFilter}}
-      <AkDivider local-class='divider' />
+      <AkDivider
+        @direction='vertical'
+        @color='dark'
+        @height='32px'
+        local-class='divider'
+      />
 
       <AkButton
         @color='textSecondary'
diff --git a/app/components/sbom/app-list/header/index.scss b/app/components/sbom/app-list/header/index.scss
index 62ba2921b..ad0151624 100644
--- a/app/components/sbom/app-list/header/index.scss
+++ b/app/components/sbom/app-list/header/index.scss
@@ -55,9 +55,6 @@
 }
 
 .divider {
-  width: 1px;
-  height: 32px;
-  background-color: var(--sbom-app-list-header-divider-background-color);
   margin-left: 0.714em;
 }
 
diff --git a/app/components/security/analysis-list/index.hbs b/app/components/security/analysis-list/index.hbs
index 76a9b21a7..5a2278aee 100644
--- a/app/components/security/analysis-list/index.hbs
+++ b/app/components/security/analysis-list/index.hbs
@@ -44,7 +44,12 @@
         </AkSelect>
 
         {{#if this.showClearFilter}}
-          <AkDivider local-class='divider' />
+          <AkDivider
+            @direction='vertical'
+            @color='dark'
+            @height='32px'
+            local-class='divider'
+          />
 
           <AkButton
             @color='textSecondary'
diff --git a/app/components/security/analysis-list/index.scss b/app/components/security/analysis-list/index.scss
index a347f1316..9081030ac 100644
--- a/app/components/security/analysis-list/index.scss
+++ b/app/components/security/analysis-list/index.scss
@@ -39,9 +39,6 @@
 }
 
 .divider {
-  width: 1px;
-  height: 32px;
-  background-color: var(--security-analysis-list-divider-background-color);
   margin-left: 0.714em;
 }
 
diff --git a/app/components/storeknox/inventory/pending-review/index.hbs b/app/components/storeknox/inventory/pending-review/index.hbs
index 395b10cb2..0361298cc 100644
--- a/app/components/storeknox/inventory/pending-review/index.hbs
+++ b/app/components/storeknox/inventory/pending-review/index.hbs
@@ -37,7 +37,7 @@
         </:default>
       </AkButton>
 
-      <AkDivider local-class='divider' />
+      <AkDivider @direction='vertical' @height='40px' @color='dark' local-class='divider' />
     {{/if}}
 
     <AkLink @route='authenticated.storeknox.review-logs'>
diff --git a/app/components/storeknox/inventory/pending-review/index.scss b/app/components/storeknox/inventory/pending-review/index.scss
index 3cd377dc0..49f1b54df 100644
--- a/app/components/storeknox/inventory/pending-review/index.scss
+++ b/app/components/storeknox/inventory/pending-review/index.scss
@@ -20,10 +20,5 @@
 }
 
 .divider {
-  width: 1px;
-  height: 40px;
-  background-color: var(
-    --storeknox-inventory-pending-review-header-divider-background-color
-  );
   margin: 0 0.35em;
 }
diff --git a/app/styles/_component-variables.scss b/app/styles/_component-variables.scss
index b757afd07..06f06832f 100644
--- a/app/styles/_component-variables.scss
+++ b/app/styles/_component-variables.scss
@@ -722,9 +722,6 @@ body {
   --appmonitoring-settings-header-filter-option-hover-background: var(
     --hover-light-background
   );
-  --appmonitoring-settings-header-divider-background-color: var(
-    --neutral-grey-200
-  );
   --appmonitoring-settings-header-clear-filter-color: var(--neutral-grey-600);
   --appmonitoring-settings-header-clear-filter-hover-color: var(--primary-main);
 
@@ -764,7 +761,6 @@ body {
   --sbom-app-list-header-filter-option-hover-background: var(
     --hover-light-background
   );
-  --sbom-app-list-header-divider-background-color: var(--neutral-grey-200);
   --sbom-app-list-header-clear-filter-color: var(--neutral-grey-600);
   --sbom-app-list-header-clear-filter-hover-color: var(--primary-main);
 
@@ -1307,9 +1303,6 @@ body {
   --file-compare-list-skeleton-loader-breadcrumbs-seperator-color: var(
     --neutral-grey-500
   );
-  --file-compare-list-skeleton-loader-divider-background-color: var(
-    --border-color-2
-  );
 
   // variables for user-login
   --user-login-footer-background-color: var(--neutral-grey-100);
@@ -1559,7 +1552,6 @@ body {
   --project-list-header-filter-option-hover-background: var(
     --hover-light-background
   );
-  --project-list-header-divider-background-color: var(--neutral-grey-200);
   --project-list-header-clear-filter-color: var(--neutral-grey-600);
   --project-list-header-clear-filter-hover-color: var(--primary-main);
 
@@ -1695,9 +1687,6 @@ body {
     --success-main
   );
   --storeknox-inventory-pending-review-reject-button-color: var(--error-main);
-  --storeknox-inventory-pending-review-header-divider-background-color: var(
-    --neutral-grey-200
-  );
 
   // variables for storeknox/discover/requested-apps/table
   --storeknox-discover-requested-apps-table-row-color: var(--common-white);