added vulnerable api request response download raw button

app/components/ak-divider/index.hbs

@@ -1,11 +1,12 @@
 {{! @glint-nocheck : or}}
-{{#let (element (or @tag 'hr')) as |Tag|}}
+{{#let (element (or @tag (if this.isVertical 'div' '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"}}'
+      ak-divider-root
+      ak-divider-variant-{{or @variant "fullWidth"}}
+      ak-divider-color-{{or @color "light"}}
+      ak-divider-direction-{{or @direction "horizontal"}}'
   />
 {{/let}}

app/components/ak-divider/index.scss

@@ -1,16 +1,40 @@
 .ak-divider-root {
   flex-shrink: 0;
-  border-width: 0px 0px thin;
   border-style: solid;
+
+  &.ak-divider-direction-horizontal {
+    border-width: 0px 0px thin;
+  }
+
+  &.ak-divider-direction-vertical {
+    flex-shrink: unset;
+    border-width: 0px thin 0px 0px;
+  }
 }
 
 .ak-divider-variant-fullWidth {
-  width: 100%;
   margin: 0px;
+
+  &.ak-divider-direction-horizontal {
+    width: 100%;
+  }
+
+  &.ak-divider-direction-vertical {
+    height: 100%;
+  }
 }
 
 .ak-divider-variant-middle {
   margin: 0 1em;
+
+  &.ak-divider-direction-horizontal {
+    width: 100%;
+  }
+
+  &.ak-divider-direction-vertical {
+    margin: 1em 0;
+    height: 80%;
+  }
 }
 
 .ak-divider-color-light {
@@ -19,4 +43,4 @@
 
 .ak-divider-color-dark {
   border-color: var(--ak-divider-color-dark);
-}
+}

app/components/ak-divider/index.stories.js

@@ -52,3 +52,24 @@ 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}} @variant={{this.variant}} />
+      <AkTypography @color="textSecondary" @gutterBottom={{true}}>B</AkTypography>
+    </div>
+  `,
+  context: { ...args },
+});
+
+export const Vertical = VerticalTemplate.bind({});
+
+Vertical.args = {
+  color: 'dark',
+  direction: 'vertical',
+  variant: 'fullWidth',
+};

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 {

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'>
-      <div local-class='divider' />
+    <AkStack @spacing='1.5' {{style height='100%'}}>
+      <AkDivider @direction='vertical' @color='dark' />
 
       <AkTooltip
         @arrow={{true}}

app/components/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

app/components/file-details/vulnerability-analysis-details/findings/index.hbs

@@ -31,65 +31,64 @@
           {{t 'vulnerableApis'}}
         </AkTypography>
 
-        <AkStack @spacing='1' @alignItems='center'>
+        <AkStack @spacing='1.5' @alignItems='center' {{style height='30px'}}>
           <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>
+            </AkIconButton>
 
-            <:default>
-              {{t 'previous'}}
-            </:default>
-          </AkButton>
-
-          <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>
+
+          <AkDivider @direction='vertical' @color='dark' />
+
+          <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>
 

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;
 }

app/components/file-details/vulnerability-analysis-details/findings/index.ts

@@ -14,8 +14,6 @@ import {
   type VulnerableApiFinding,
 } from 'irene/utils/parse-vulnerable-api-finding';
 
-import styles from './index.scss';
-
 export interface FileDetailsVulnerabilityAnalysisDetailsFindingsSignature {
   Args: {
     analysis: AnalysisModel;
@@ -30,6 +28,7 @@ export default class FileDetailsVulnerabilityAnalysisDetailsFindingsComponent ex
 
   @service('notifications') declare notify: NotificationService;
   @service declare intl: IntlService;
+  @service('browser/window') declare window: Window;
 
   noop() {}
 
@@ -42,14 +41,6 @@ export default class FileDetailsVulnerabilityAnalysisDetailsFindingsComponent ex
     this.parseCustomAndApiVulnerableFindings.perform();
   }
 
-  get classes() {
-    return {
-      selectClass: styles['ak-pagination-select'],
-      prevButtonIconClass: styles['ak-pagination-button-prev-icon'],
-      nextButtonIconClass: styles['ak-pagination-button-next-icon'],
-    };
-  }
-
   get analysis() {
     return this.args.analysis;
   }
@@ -73,6 +64,13 @@ export default class FileDetailsVulnerabilityAnalysisDetailsFindingsComponent ex
     );
   }
 
+  get apiFindingsRawPayload() {
+    return this.analysis.findings
+      .map((finding) => finding.description)
+      .filter(Boolean)
+      .join('\n');
+  }
+
   @action
   handlePrevNextClick({ limit, offset }: { limit: number; offset: number }) {
     this.limit = limit;
@@ -98,6 +96,29 @@ export default class FileDetailsVulnerabilityAnalysisDetailsFindingsComponent ex
     this.customVulnerableFindings = customVulnerableFindings;
     this.vulnerableApiFindings = vulnerableApiFindings;
   });
+
+  downloadApiFindingsPayload = task(async () => {
+    // Create a Blob with the raw text
+    const blob = new Blob([this.apiFindingsRawPayload], { type: 'text/plain' });
+
+    // Create a download link
+    const link = this.window.document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+
+    const analysisId = this.analysis.id;
+
+    // Generate a filename
+    const timestamp = new Date().getTime();
+    link.download = `analysis_api_findings_${analysisId}_${timestamp}.txt`;
+
+    // Append to body, click, and remove
+    this.window.document.body.appendChild(link);
+    link.click();
+    this.window.document.body.removeChild(link);
+
+    // Clean up the URL object
+    URL.revokeObjectURL(link.href);
+  });
 }
 
 declare module '@glint/environment-ember-loose/registry' {