added vulnerable api request response download raw button

appknox · Dec 12, 2024 · cbb6c51 · cbb6c51
1 parent fde4df5
commit cbb6c51
Show file tree

Hide file tree

Showing 16 changed files with 234 additions and 172 deletions.
diff --git a/app/components/ak-divider/index.hbs b/app/components/ak-divider/index.hbs
@@ -1,11 +1,21 @@
 {{! @glint-nocheck : or}}
-{{#let (element (or @tag 'hr')) as |Tag|}}
-  <Tag
+{{#if this.isVertical}}
+  <div
     data-test-ak-divider
     ...attributes
     local-class='
+    ak-divider-vertical-color-{{or @color "light"}}
+    ak-divider-direction-vertical'
+  />
+{{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,17 @@
 .ak-divider-color-dark {
   border-color: var(--ak-divider-color-dark);
 }
+
+.ak-divider-direction-vertical {
+  width: 1px;
+  height: auto;
+  align-self: stretch;
+}
+
+.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,7 +1,7 @@
 {{#if this.me.org.is_admin}}
   {{#if (or @analysis.isRisky @analysis.isOverriddenAsPassed)}}
     <AkStack @spacing='1.5'>
-      <div local-class='divider' />
+      <AkDivider @color='dark' @direction='vertical' />
 
       <AkTooltip
         @arrow={{true}}

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'>
+                out of
+              </AkTypography>
+              <AkTypography @variant='subtitle1'>
+                {{pgc.totalItems}}
+                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 'downloadRawFile'}}
+          >
+            <AkIconButton
+              {{on 'click' (perform this.downloadRawText)}}
+              @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;
 }
diff --git a/app/components/file-details/vulnerability-analysis-details/findings/index.ts b/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;
@@ -42,14 +40,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 +63,13 @@ export default class FileDetailsVulnerabilityAnalysisDetailsFindingsComponent ex
     );
   }
 
+  get rawText() {
+    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 +95,27 @@ export default class FileDetailsVulnerabilityAnalysisDetailsFindingsComponent ex
     this.customVulnerableFindings = customVulnerableFindings;
     this.vulnerableApiFindings = vulnerableApiFindings;
   });
+
+  downloadRawText = task(async () => {
+    // Create a Blob with the raw text
+    const blob = new Blob([this.rawText], { type: 'text/plain' });
+
+    // Create a download link
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+
+    // Generate a filename
+    const timestamp = new Date().toISOString().replace(/:/g, '-').split('.')[0];
+    link.download = `analysis_raw_text_${timestamp}.txt`;
+
+    // Append to body, click, and remove
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    // Clean up the URL object
+    URL.revokeObjectURL(link.href);
+  });
 }
 
 declare module '@glint/environment-ember-loose/registry' {