dast automation p1 dynamic scan page refactor

appknox · Sep 23, 2024 · 801c791 · 801c791
1 parent 7d09763
commit 801c791
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 35 deletions.
diff --git a/app/components/api-filter/index.hbs b/app/components/api-filter/index.hbs
@@ -22,7 +22,7 @@
   <AkStack class='mt-2' @spacing='1.5' @width='full' {{style maxWidth='750px'}}>
     <AkTextField
       data-test-apiFilter-apiEndpointInput
-      @formControlClass='w-10/12'
+      @formControlClass='w-9/12'
       @placeholder={{t 'templates.enterAPIEndpoint'}}
       @value={{this.newUrlFilter}}
       @helperText={{t 'templates.enterEndpoint'}}

diff --git a/...s/file-details/dynamic-scan/action/drawer/device-pref-table/filter-selected-item/index.ts b/...s/file-details/dynamic-scan/action/drawer/device-pref-table/filter-selected-item/index.ts
@@ -1,12 +1,12 @@
 import Component from '@glimmer/component';
 
 interface SecurityAnalysisListFilterSelectedItemArgs {
-  extra: Record<'selectedItem' | 'iconName', string>;
+  extra: Record<'selectedOptionLabel' | 'iconName', string>;
 }
 
 export default class SecurityAnalysisListFilterSelectedItemComponent extends Component<SecurityAnalysisListFilterSelectedItemArgs> {
   get selectedItem() {
-    return this.args.extra?.selectedItem;
+    return this.args.extra?.selectedOptionLabel;
   }
 
   get iconName() {

diff --git a/app/components/file-details/dynamic-scan/action/drawer/device-pref-table/index.hbs b/app/components/file-details/dynamic-scan/action/drawer/device-pref-table/index.hbs
@@ -13,21 +13,23 @@
     </AkTypography>
 
     <AkSelect
-      @selected={{this.selectedDevicePrefFilter}}
+      @selected={{this.selectedDevicePrefFilterKey}}
       @options={{this.devicePreferenceTypes}}
       @onChange={{this.setDevicePrefFilter}}
       @verticalPosition='auto'
       @triggerClass={{this.triggerClass}}
       @selectedItemComponent='file-details/dynamic-scan/action/drawer/device-pref-table/filter-selected-item'
       @extra={{hash
-        selectedItem=this.selectedDevicePrefFilter
+        selectedOptionLabel=(this.getSelectedFilterOptionLabel
+          this.selectedDevicePrefFilterKey
+        )
         iconName='filter-list'
       }}
       {{style width='200px'}}
       data-test-fileDetails-dynamicScanDrawer-manualDast-devicePrefTable-filterSelect
       as |dPrefFilter|
     >
-      {{dPrefFilter}}
+      {{this.getSelectedFilterOptionLabel dPrefFilter}}
     </AkSelect>
   </AkStack>
 

diff --git a/app/components/file-details/dynamic-scan/action/drawer/device-pref-table/index.ts b/app/components/file-details/dynamic-scan/action/drawer/device-pref-table/index.ts
@@ -14,6 +14,15 @@ import type Store from '@ember-data/store';
 
 import styles from './index.scss';
 
+enum AvailableManualDeviceModelKeyMap {
+  ALL_AVAILABLE_DEVICES = 'all',
+  DEVICES_WITH_SIM = 'hasSim',
+  DEVICES_WITH_VPN = 'hasVpn',
+  DEVICES_WITH_LOCK = 'hasPinLock',
+}
+
+type DevicePrefFilterKey = keyof typeof AvailableManualDeviceModelKeyMap;
+
 export interface FileDetailsDynamicScanDrawerDevicePrefTableSignature {
   Args: {
     dpContext: DevicePreferenceContext;
@@ -33,15 +42,8 @@ export default class FileDetailsDynamicScanDrawerDevicePrefTableComponent extend
   @tracked offset = 0;
 
   @tracked filteredManualDevices: ProjectAvailableDeviceModel[] = [];
-  @tracked selectedDevicePrefFilter = 'All Available Device';
-
-  availableManualDeviceModelKeyMap = {
-    'All Available Device': 'all',
-    'Devices with Sim': 'hasSim',
-    'Devices with VPN': 'hasVpn',
-    'Devices with Pin Lock': 'hasPinLock',
-    'Reserved Devices': 'isReserved',
-  };
+  @tracked selectedDevicePrefFilterKey: DevicePrefFilterKey =
+    'ALL_AVAILABLE_DEVICES';
 
   get allAvailableManualDevices() {
     return this.args.allAvailableManualDevices;
@@ -86,7 +88,7 @@ export default class FileDetailsDynamicScanDrawerDevicePrefTableComponent extend
   }
 
   get showAllManualDevices() {
-    return this.selectedDevicePrefFilter === 'All Available Device';
+    return this.selectedDevicePrefFilterKey === 'ALL_AVAILABLE_DEVICES';
   }
 
   get currentDevicesInView() {
@@ -101,12 +103,23 @@ export default class FileDetailsDynamicScanDrawerDevicePrefTableComponent extend
     return data;
   }
 
+  get selectedFilterKeyLabelMap() {
+    return {
+      ALL_AVAILABLE_DEVICES: this.intl.t(
+        'modalCard.dynamicScan.allAvailableDevices'
+      ),
+      DEVICES_WITH_SIM: this.intl.t('modalCard.dynamicScan.devicesWithSim'),
+      DEVICES_WITH_VPN: this.intl.t('modalCard.dynamicScan.devicesWithVPN'),
+      DEVICES_WITH_LOCK: this.intl.t('modalCard.dynamicScan.devicesWithLock'),
+    };
+  }
+
   get devicePreferenceTypes() {
     return [
-      this.intl.t('modalCard.dynamicScan.allAvailableDevices'),
-      this.intl.t('modalCard.dynamicScan.devicesWithSim'),
-      this.intl.t('modalCard.dynamicScan.devicesWithVPN'),
-      this.intl.t('modalCard.dynamicScan.devicesWithLock'),
+      'ALL_AVAILABLE_DEVICES' as const,
+      'DEVICES_WITH_SIM' as const,
+      'DEVICES_WITH_VPN' as const,
+      'DEVICES_WITH_LOCK' as const,
     ];
   }
 
@@ -124,10 +137,12 @@ export default class FileDetailsDynamicScanDrawerDevicePrefTableComponent extend
       : this.filteredManualDevices.length;
   }
 
-  @action setDevicePrefFilter(
-    opt: keyof typeof this.availableManualDeviceModelKeyMap
-  ) {
-    this.selectedDevicePrefFilter = opt;
+  @action getSelectedFilterOptionLabel(opt: DevicePrefFilterKey) {
+    return this.selectedFilterKeyLabelMap[opt];
+  }
+
+  @action setDevicePrefFilter(opt: DevicePrefFilterKey) {
+    this.selectedDevicePrefFilterKey = opt;
 
     this.goToPage({ limit: this.limit, offset: 0 });
 
@@ -154,17 +169,15 @@ export default class FileDetailsDynamicScanDrawerDevicePrefTableComponent extend
     this.offset = offset;
   }
 
-  filterAvailableDevices = task(
-    async (filter: keyof typeof this.availableManualDeviceModelKeyMap) => {
-      const modelFilterKey = this.availableManualDeviceModelKeyMap[
-        filter
-      ] as keyof ProjectAvailableDeviceModel;
+  filterAvailableDevices = task(async (filterkey: DevicePrefFilterKey) => {
+    const modelFilterKey = AvailableManualDeviceModelKeyMap[
+      filterkey
+    ] as keyof ProjectAvailableDeviceModel;
 
-      this.filteredManualDevices = this.allAvailableManualDevices.filter(
-        (dev) => filter === 'All Available Device' || dev[modelFilterKey]
-      );
-    }
-  );
+    this.filteredManualDevices = this.allAvailableManualDevices.filter(
+      (dev) => filterkey === 'ALL_AVAILABLE_DEVICES' || dev[modelFilterKey]
+    );
+  });
 }
 
 declare module '@glint/environment-ember-loose/registry' {

diff --git a/app/styles/_component-variables.scss b/app/styles/_component-variables.scss
@@ -1873,7 +1873,9 @@ body {
   --license-detail-primary-light: var(--primary-main-10);
 
   // variables for file-details/dynamic-scan/page-wrapper
-  --file-details-dynamic-scan-page-wrapper-background-color: var(--background-light);
+  --file-details-dynamic-scan-page-wrapper-background-color: var(
+    --background-light
+  );
 
   // variables for file-details/dynamic-scan/header
   --file-details-dynamic-scan-header-background-color: var(--background-light);