added vulnerable api request response download raw button

appknox · Dec 17, 2024 · 21d167a · 21d167a
1 parent 454094c
commit 21d167a
Show file tree

Hide file tree

Showing 16 changed files with 279 additions and 203 deletions.
diff --git a/app/components/ak-divider/index.hbs b/app/components/ak-divider/index.hbs
@@ -1,11 +1,24 @@
 {{! @glint-nocheck : or}}
-{{#let (element (or @tag 'hr')) as |Tag|}}
-  <Tag
-    data-test-ak-divider
-    ...attributes
-    local-class='
+{{#if this.isVertical}}
+  {{#let (element (or @tag 'div')) as |Tag|}}
+    <Tag
+      data-test-ak-divider
+      ...attributes
+      local-class='
+      ak-divider-vertical-color-{{or @color "light"}}
+      ak-divider-direction-vertical'
+    />
+  {{/let}}
+
+{{else}}
+  {{#let (element (or @tag 'hr')) as |Tag|}}
+    <Tag
+      data-test-ak-divider
+      ...attributes
+      local-class='
       ak-divider-root 
       ak-divider-variant-{{or @variant "fullWidth"}} 
       ak-divider-color-{{or @color "light"}}'
-  />
-{{/let}}
+    />
+  {{/let}}
+{{/if}}
diff --git a/app/components/ak-divider/index.scss b/app/components/ak-divider/index.scss
@@ -20,3 +20,16 @@
 .ak-divider-color-dark {
   border-color: var(--ak-divider-color-dark);
 }
+
+.ak-divider-direction-vertical {
+  width: 1px;
+  height: 100%;
+}
+
+.ak-divider-vertical-color-light {
+  background-color: var(--ak-divider-color-light);
+}
+
+.ak-divider-vertical-color-dark {
+  background-color: var(--ak-divider-color-dark);
+}
diff --git a/app/components/ak-divider/index.stories.js b/app/components/ak-divider/index.stories.js
@@ -52,3 +52,23 @@ Default.args = {
   variant: 'fullWidth',
   color: 'light',
 };
+
+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">
+      <AkTypography @color="textSecondary" @gutterBottom={{true}}>A</AkTypography>
+        <AkDivider @color={{this.color}} @direction={{this.direction}} />
+      <AkTypography @color="textSecondary" @gutterBottom={{true}}>B</AkTypography>
+    </div>
+  `,
+  context: { ...args },
+});
+
+export const Vertical = VerticalTemplate.bind({});
+
+Vertical.args = {
+  color: 'dark',
+  direction: 'vertical',
+};
diff --git a/app/components/ak-divider/index.ts b/app/components/ak-divider/index.ts
@@ -6,11 +6,16 @@ export interface AkDividerSignature {
     tag?: string;
     variant?: 'fullWidth' | 'middle';
     color?: 'light' | 'dark';
+    direction?: 'horizontal' | 'vertical';
   };
   Blocks: { default: [] };
 }
 
-export default class AkDividerComponent extends Component<AkDividerSignature> {}
+export default class AkDividerComponent extends Component<AkDividerSignature> {
+  get isVertical() {
+    return this.args.direction === 'vertical';
+  }
+}
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {

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
@@ -1,31 +1,27 @@
 {{#if this.me.org.is_admin}}
   {{#if (or @analysis.isRisky @analysis.isOverriddenAsPassed)}}
-    <AkStack @spacing='1.5'>
-      <div local-class='divider' />
-
-      <AkTooltip
-        @arrow={{true}}
-        @placement='bottom'
-        @title={{if
-          @analysis.isOverriddenRisk
-          (t 'overrideDetails')
-          (t 'editAnalysis')
-        }}
+    <AkTooltip
+      @arrow={{true}}
+      @placement='bottom'
+      @title={{if
+        @analysis.isOverriddenRisk
+        (t 'overrideDetails')
+        (t 'editAnalysis')
+      }}
+    >
+      <AkIconButton
+        aria-label='edit analysis button'
+        @variant='outlined'
+        {{on 'click' this.openEditAnalysisDrawer}}
+        data-test-analysisDetails-editAnalysisBtn
       >
-        <AkIconButton
-          aria-label='edit analysis button'
-          @variant='outlined'
-          {{on 'click' this.openEditAnalysisDrawer}}
-          data-test-analysisDetails-editAnalysisBtn
-        >
-          {{#if @analysis.isOverriddenRisk}}
-            <AnalysisRisk::OverrideDetailsIcon />
-          {{else}}
-            <AkIcon @iconName='edit' />
-          {{/if}}
-        </AkIconButton>
-      </AkTooltip>
-    </AkStack>
+        {{#if @analysis.isOverriddenRisk}}
+          <AnalysisRisk::OverrideDetailsIcon />
+        {{else}}
+          <AkIcon @iconName='edit' />
+        {{/if}}
+      </AkIconButton>
+    </AkTooltip>
 
     <AnalysisRisk::OverrideEditDrawer
       @dataModel={{this.analysisDataModel}}

diff --git a/app/components/file-details/vulnerability-analysis-details/edit-analysis-button/index.scss b/app/components/file-details/vulnerability-analysis-details/edit-analysis-button/index.scss
diff --git a/...ts/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.scss b/...ts/file-details/vulnerability-analysis-details/findings/custom-vulnerabilities/index.scss
@@ -29,7 +29,7 @@
 
   .analysis-content-title {
     position: sticky;
-    top: calc(172px + 1.5em);
+    top: calc(132px + 1.5em);
     z-index: 1;
     padding: 1em;
     border: 1px solid

diff --git a/app/components/file-details/vulnerability-analysis-details/findings/index.hbs b/app/components/file-details/vulnerability-analysis-details/findings/index.hbs
@@ -31,65 +31,62 @@
           {{t 'vulnerableApis'}}
         </AkTypography>
 
-        <AkStack @spacing='1' @alignItems='center'>
+        <AkStack @spacing='2' @alignItems='center'>
           <AkStack
             local-class='counter-container'
-            @spacing='0.5'
-            @alignItems='flex-end'
+            @spacing='3'
+            @alignItems='center'
           >
-            <AkTypography @variant='subtitle1'>
-              {{pgc.startItemIdx}}
-            </AkTypography>
-            <AkTypography @variant='body2'>
-              out of
-            </AkTypography>
-            <AkTypography @variant='subtitle1'>
-              {{pgc.totalItems}}
-              APIs'
-            </AkTypography>
-          </AkStack>
-
-          <AkButton
-            data-test-analysisDetails-vulFinding-pagination-prevBtn
-            @disabled={{pgc.disablePrev}}
-            @leftIconClass={{this.classes.prevButtonIconClass}}
-            @color='neutral'
-            @variant='outlined'
-            local-class='ak-pagination-prev-button'
-            {{on 'click' pgc.prevAction}}
-          >
-            <:leftIcon>
+            <AkIconButton
+              data-test-analysisDetails-vulFinding-pagination-prevBtn
+              disabled={{pgc.disablePrev}}
+              local-class='ak-pagination-prev-button'
+              {{on 'click' pgc.prevAction}}
+            >
               <AkIcon
                 @iconName='arrow-left'
                 {{style fontSize='1.28rem !important'}}
               />
-            </:leftIcon>
-
-            <:default>
-              {{t 'previous'}}
-            </:default>
-          </AkButton>
+            </AkIconButton>
 
-          <AkButton
-            data-test-analysisDetails-vulFinding-pagination-nextBtn
-            @disabled={{pgc.disableNext}}
-            @color='neutral'
-            @variant='outlined'
-            @rightIconClass={{this.classes.nextButtonIconClass}}
-            local-class='ak-pagination-next-button'
-            {{on 'click' pgc.nextAction}}
-          >
-            <:default>
-              {{t 'next'}}
-            </:default>
+            <AkStack @spacing='0.5' @alignItems='center'>
+              <AkTypography @variant='subtitle1'>
+                {{pgc.startItemIdx}}
+              </AkTypography>
+              <AkTypography @variant='body2'>
+                {{t 'outOf'}}
+              </AkTypography>
+              <AkTypography @variant='subtitle1'>
+                {{pgc.totalItems}}
+                {{t 'apis'}}
+              </AkTypography>
+            </AkStack>
 
-            <:rightIcon>
+            <AkIconButton
+              data-test-analysisDetails-vulFinding-pagination-nextBtn
+              disabled={{pgc.disableNext}}
+              local-class='ak-pagination-next-button'
+              {{on 'click' pgc.nextAction}}
+            >
               <AkIcon
                 @iconName='arrow-right'
                 {{style fontSize='1.28rem !important'}}
               />
-            </:rightIcon>
-          </AkButton>
+            </AkIconButton>
+          </AkStack>
+
+          <AkTooltip
+            @arrow={{true}}
+            @placement='bottom'
+            @title={{t 'downloadRawApiFindings'}}
+          >
+            <AkIconButton
+              {{on 'click' (perform this.downloadApiFindingsPayload)}}
+              @variant='outlined'
+            >
+              <AkIcon @variant='outlined' @iconName='file-download' />
+            </AkIconButton>
+          </AkTooltip>
         </AkStack>
       </AkStack>
 

diff --git a/app/components/file-details/vulnerability-analysis-details/findings/index.scss b/app/components/file-details/vulnerability-analysis-details/findings/index.scss
@@ -31,7 +31,7 @@
 
   .analysis-content-title {
     position: sticky;
-    top: calc(172px + 1.5em);
+    top: calc(132px + 1.5em);
     z-index: 1;
     padding: 1em;
     background-color: var(
@@ -54,14 +54,6 @@
   }
 }
 
-.ak-pagination-button-prev-icon {
-  margin-right: 0.214em;
-}
-
-.ak-pagination-button-next-icon {
-  margin-left: 0.214em;
-}
-
 .ak-pagination-select {
   height: 30px !important;
 }
@@ -75,20 +67,30 @@
   min-width: unset;
   padding-left: 0.143em;
   padding-right: 0.857em;
+
+  &:hover, 
+  &:disabled {
+    background-color: var(
+      --file-details-vulnerability-analysis-details-pagination-button-background-color
+    ) !important;
+  }
 }
 
-.ak-pagination-prev-button,
 .ak-pagination-next-button {
-  padding-left: 0.357em;
-  padding-right: 0.357em;
+  border-left: 1px solid var(--file-details-vulnerability-analysis-details-border-color-2);
+  border-radius: 0px !important;
+}
+
+.ak-pagination-prev-button {
+  border-right: 1px solid var(--file-details-vulnerability-analysis-details-border-color-2);
+  border-radius: 0px !important;
 }
 
 .counter-container {
-  padding: 0.3em 0.75em;
   border: 1px solid
-    var(--file-details-vulnerability-analysis-details-border-color);
+    var(--file-details-vulnerability-analysis-details-border-color-2);
+  border-radius: var(--file-details-vulnerability-analysis-details-border-radius);
   background-color: var(
     --file-details-vulnerability-analysis-details-code-background-color
   );
-  margin-right: 1em;
 }