added ak-select-before-option

appknox · Jan 2, 2024 · fa07be6 · fa07be6
1 parent a456f5e
commit fa07be6
Show file tree

Hide file tree

Showing 20 changed files with 184 additions and 27 deletions.
diff --git a/app/components/ak-select-before-option/index.hbs b/app/components/ak-select-before-option/index.hbs
@@ -0,0 +1,14 @@
+<AkTypography
+  @variant='subtitle1'
+  local-class='before-option-label'
+>{{this.beforeOptionLabel}}</AkTypography>
+
+{{#if this.beforeOptionSearch}}
+  <div local-class='before-option-search'>
+    <AkTextField @placeholder={{@searchPlaceholder}} {{on 'input' @onInput}}>
+      <:leftAdornment>
+        <AkIcon @iconName='search' @color='textSecondary' />
+      </:leftAdornment>
+    </AkTextField>
+  </div>
+{{/if}}
diff --git a/app/components/ak-select-before-option/index.scss b/app/components/ak-select-before-option/index.scss
@@ -0,0 +1,25 @@
+.before-option-label {
+  height: 35px;
+  display: flex;
+  align-items: center;
+  padding-left: 1em !important;
+  border-bottom: 1px solid var(--ak-select-before-option-border-color);
+}
+
+.before-option-search {
+  border-bottom: 1px solid var(--ak-select-before-option-border-color);
+  :global(.ak-form-control) {
+    :global(.ak-text-field-root) {
+      :global(.ak-text-field-left-adornment) {
+        margin-left: 0.8em;
+      }
+      :global(.ak-text-input) {
+        height: 35px;
+        font-size: 12px;
+      }
+      :global(.ak-text-input-outlined) {
+        border: 0;
+      }
+    }
+  }
+}
diff --git a/app/components/ak-select-before-option/index.ts b/app/components/ak-select-before-option/index.ts
@@ -0,0 +1,25 @@
+// ak-select-before-option.ts
+import Component from '@glimmer/component';
+import { Select } from 'ember-power-select/components/power-select';
+
+interface AkSelectBeforeOptionArgs {
+  searchPlaceholder?: string;
+  extra?: Record<string, unknown>;
+  onInput?: (term: string, select: Select, e: Event) => string | false | void;
+}
+
+export default class AkSelectBeforeOptionComponent extends Component<AkSelectBeforeOptionArgs> {
+  get beforeOptionLabel() {
+    return this.args.extra?.['beforeOptionLabel'];
+  }
+
+  get beforeOptionSearch() {
+    return this.args.extra?.['beforeOptionSearch'];
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    AkSelectBeforeOption: typeof AkSelectBeforeOptionComponent;
+  }
+}
diff --git a/app/components/ak-select/index.hbs b/app/components/ak-select/index.hbs
@@ -39,7 +39,15 @@
         @verticalPosition={{or @verticalPosition 'below'}}
         @searchEnabled={{@searchEnabled}}
         @searchPlaceholder={{@searchPlaceholder}}
+        @extra={{hash
+          beforeOptionLabel=@beforeOptionLabel
+          beforeOptionSearch=@searchEnabled
+        }}
         @search={{@search}}
+        @beforeOptionsComponent='{{if
+          @beforeOptions
+          "ak-select-before-option"
+        }}'
         data-test-power-select
         as |option|
       >

diff --git a/app/components/ak-select/index.ts b/app/components/ak-select/index.ts
@@ -29,6 +29,9 @@ interface AkSelectNamedArgs<O> extends PowerSelectArgs {
   options: O[];
   searchPlaceholder?: string;
   searchEnabled?: boolean;
+  beforeOptions?: boolean;
+  beforeOptionLabel?: string;
+  onInput?: (term: string, select: Select, e: Event) => string | false | void;
 }
 
 export interface AkSelectSignature<O> {

diff --git a/app/components/ak-svg/android-icon.hbs b/app/components/ak-svg/android-icon.hbs
@@ -0,0 +1,24 @@
+<svg
+  width='18'
+  height='18'
+  viewBox='0 0 18 18'
+  fill='none'
+  xmlns='http://www.w3.org/2000/svg'
+>
+  <path
+    d='M2.95474 12.8141C2.17596 12.8145 1.54315 12.1809 1.54301 11.4022L1.54272 7.07956C1.54244 6.30163 2.17512 5.66811 2.95291 5.66797C3.33105 5.66769 3.68515 5.81436 3.95205 6.08098C4.21896 6.34761 4.36577 6.70227 4.36605 7.07928L4.36563 11.4021C4.36662 11.7788 4.22022 12.1332 3.95346 12.3997C3.6874 12.6669 3.33232 12.814 2.95474 12.8141ZM2.95362 6.04724C2.38366 6.04695 1.92171 6.51003 1.92157 7.07956L1.92227 11.4018C1.92241 11.9733 2.38521 12.4346 2.9546 12.4351C3.52512 12.4344 3.98721 11.9732 3.98665 11.402V7.079C3.98637 6.50961 3.52385 6.04695 2.95362 6.04724Z'
+    fill='white'
+  />
+  <path
+    d='M14.0262 6.26151L13.6468 6.26137L4.34882 6.26263L3.96928 6.26277L3.96899 5.88323C3.96815 4.3251 4.81696 2.87596 6.20732 2.01984L5.66676 1.03307C5.60067 0.917477 5.58407 0.771087 5.6226 0.637212C5.6617 0.503337 5.75409 0.388165 5.8777 0.322352C5.94928 0.281852 6.03674 0.259352 6.12506 0.259493C6.31659 0.259493 6.49195 0.363415 6.58448 0.531321L7.15021 1.56196C7.73563 1.34723 8.35368 1.23768 8.99226 1.23782C9.63998 1.23754 10.2611 1.34709 10.8491 1.56281L11.414 0.530477C11.5049 0.362993 11.6816 0.258649 11.8728 0.25879C11.9589 0.258649 12.0448 0.279602 12.1205 0.320384C12.2474 0.389993 12.336 0.501227 12.375 0.636087C12.4138 0.770102 12.3982 0.911571 12.3303 1.03434L11.79 2.02054C13.1781 2.87849 14.0259 4.32651 14.0258 5.88196L14.0262 6.26151ZM11.2776 2.16595L11.998 0.850399C12.0364 0.781633 12.0113 0.693602 11.9419 0.655493C11.8714 0.617384 11.7845 0.643399 11.7472 0.712446L11.0194 2.04135C10.4071 1.76938 9.72154 1.61652 8.9969 1.61723C8.27381 1.61652 7.58953 1.76882 6.97907 2.03981L6.25049 0.713852C6.21295 0.643962 6.1252 0.618368 6.05657 0.656899C5.98668 0.694305 5.96095 0.782196 5.9999 0.850821L6.7206 2.16538C5.30451 2.89579 4.3477 4.28657 4.34854 5.88337L13.6464 5.88224C13.6468 4.28601 12.6917 2.89804 11.2776 2.16595ZM6.88218 4.19896C6.66829 4.19854 6.49363 4.02445 6.49363 3.80929C6.49363 3.59512 6.66801 3.4192 6.8826 3.4192C7.09818 3.41906 7.27256 3.59512 7.27284 3.80929C7.27298 4.02416 7.09818 4.19882 6.88218 4.19896ZM11.116 4.19812C10.9011 4.1984 10.7257 4.02445 10.7262 3.80845C10.7262 3.59456 10.9008 3.41863 11.1161 3.41779C11.33 3.41849 11.5054 3.5947 11.5052 3.80859C11.5052 4.02388 11.3307 4.19826 11.116 4.19812ZM7.27185 17.741C6.49378 17.7409 5.86054 17.1081 5.8604 16.3294L5.86012 14.4216L5.48915 14.422C5.09301 14.4221 4.7212 14.2681 4.44178 13.9886C4.16193 13.7093 4.00767 13.3371 4.00823 12.9406L4.00682 6.24309V5.86326H4.38637L13.6146 5.86185L13.9943 5.86157V6.24112L13.9953 12.9395C13.9954 13.7564 13.3308 14.4211 12.5142 14.421L12.141 14.4213L12.1414 16.3284C12.1414 17.1066 11.5083 17.7402 10.7305 17.7402C10.3535 17.741 9.9997 17.5945 9.73237 17.3272C9.46504 17.0605 9.31781 16.7062 9.31795 16.3293V14.4213H8.68359V16.3289C8.68331 17.1072 8.05035 17.7411 7.27185 17.741Z'
+    fill='white'
+  />
+  <path
+    d='M4.38816 12.9408C4.3876 13.5507 4.87993 14.043 5.4894 14.0429H6.23935L6.24019 16.33C6.24005 16.8996 6.70271 17.3624 7.27168 17.3625C7.84205 17.3625 8.30415 16.8991 8.30358 16.3292L8.30372 14.0428L9.69718 14.0423L9.69704 16.3293C9.6976 16.899 10.1608 17.3624 10.7296 17.3612C11.3 17.3616 11.7624 16.8983 11.7623 16.3285L11.7616 14.0421L12.5143 14.0419C13.1217 14.0421 13.6157 13.5486 13.6157 12.9398L13.6144 6.24116L4.38647 6.24285L4.38816 12.9408ZM15.0463 12.8129C14.2678 12.813 13.6345 12.1803 13.6347 11.4015L13.6336 7.07901C13.6338 6.30037 14.2661 5.66699 15.0442 5.66699C15.8232 5.66685 16.4569 6.30009 16.4567 7.07859L16.4572 11.4008C16.4573 12.1791 15.8246 12.813 15.0463 12.8129ZM15.0449 6.04654C14.4749 6.04598 14.0131 6.50877 14.0131 7.07901L14.0135 11.4014C14.0138 11.9722 14.4756 12.434 15.046 12.4336C15.6161 12.4334 16.0775 11.9722 16.0779 11.401L16.0768 7.07873C16.0766 6.50835 15.6151 6.04626 15.0449 6.04654Z'
+    fill='white'
+  />
+  <path
+    d='M2.95368 6.04713C2.38372 6.04685 1.92177 6.50993 1.92163 7.07946L1.92233 11.4017C1.92247 11.9732 2.38471 12.4345 2.9548 12.4343C3.52518 12.4343 3.98727 11.9731 3.98671 11.4019V7.0789C3.98643 6.50951 3.52391 6.04685 2.95368 6.04713ZM11.2776 2.1656L11.998 0.850057C12.0364 0.781291 12.0112 0.693822 11.9416 0.654869C11.8713 0.617604 11.7845 0.642916 11.7472 0.712104L11.0195 2.04143C10.4072 1.7689 9.72196 1.61618 8.9969 1.61688C8.2738 1.61618 7.58882 1.76848 6.97907 2.03946L6.25049 0.71351C6.21266 0.643619 6.12547 0.618307 6.05671 0.656416C5.98668 0.694244 5.96094 0.781854 5.9999 0.850479L6.7206 2.16518C5.30451 2.89545 4.34769 4.28623 4.34854 5.88303L13.6464 5.8819C13.6468 4.28567 12.6917 2.8977 11.2776 2.1656ZM6.88218 4.19862C6.66829 4.1982 6.49363 4.0241 6.49363 3.80895C6.49363 3.59478 6.66772 3.41871 6.8826 3.41885C7.09818 3.41871 7.27255 3.59478 7.27283 3.80895C7.27297 4.02382 7.09818 4.19848 6.88218 4.19862ZM11.116 4.19778C10.9011 4.19806 10.7262 4.02382 10.7262 3.8081C10.727 3.59435 10.9008 3.41829 11.1161 3.41745C11.33 3.41815 11.5054 3.59435 11.5052 3.80824C11.5055 4.02354 11.3307 4.19792 11.116 4.19778ZM4.38651 6.24218L4.38805 12.9409C4.38763 13.5502 4.88052 14.0421 5.48943 14.0421L6.23938 14.0424L6.24022 16.3295C6.24008 16.899 6.70302 17.362 7.27171 17.362C7.84208 17.362 8.30418 16.8986 8.30432 16.3288L8.30375 14.0422L9.69721 14.0418L9.69777 16.3288C9.69777 16.8979 10.1608 17.3618 10.7297 17.3607C11.3001 17.3611 11.7624 16.8978 11.7623 16.3279L11.7616 14.0415L12.5142 14.041C13.1217 14.0412 13.6159 13.5488 13.6161 12.9393L13.6149 6.24063L4.38651 6.24218ZM16.0772 7.07792C16.0771 6.50768 15.6151 6.04559 15.0449 6.04587C14.4749 6.04531 14.0131 6.5081 14.0131 7.07834L14.014 11.4009C14.0138 11.9715 14.4756 12.4328 15.046 12.4329C15.6161 12.4328 16.0778 11.9715 16.0779 11.4003L16.0772 7.07792Z'
+    fill='#A4C439'
+  />
+</svg>
diff --git a/app/components/ak-svg/ios-icon.hbs b/app/components/ak-svg/ios-icon.hbs
@@ -0,0 +1,12 @@
+<svg
+  width='18'
+  height='18'
+  viewBox='0 0 18 18'
+  fill='none'
+  xmlns='http://www.w3.org/2000/svg'
+>
+  <path
+    d='M13.768 9.54618C13.7924 12.1899 16.0875 13.0698 16.1128 13.0811C16.0934 13.1429 15.7462 14.3349 14.9038 15.5658C14.1757 16.63 13.4198 17.6903 12.2294 17.7126C11.0597 17.7339 10.6835 17.0187 9.34603 17.0187C8.00897 17.0187 7.59117 17.6903 6.48375 17.7339C5.33456 17.7775 4.45945 16.5829 3.72525 15.5227C2.22506 13.3537 1.07854 9.3936 2.61797 6.72046C3.38268 5.39296 4.74956 4.55245 6.23301 4.53079C7.36139 4.50927 8.42648 5.28988 9.11625 5.28988C9.80559 5.28988 11.0999 4.35107 12.4606 4.48888C13.0303 4.51265 14.6292 4.71895 15.6559 6.22195C15.5733 6.27327 13.7482 7.33584 13.768 9.54618ZM11.5696 3.05409C12.1796 2.31566 12.5902 1.28741 12.4783 0.264648C11.5988 0.299945 10.5354 0.850633 9.90473 1.58877C9.33942 2.24226 8.84442 3.28851 8.97787 4.29102C9.95817 4.36696 10.9594 3.79293 11.5696 3.05409Z'
+    fill='black'
+  />
+</svg>
diff --git a/app/components/ak-text-field/index.hbs b/app/components/ak-text-field/index.hbs
@@ -1,5 +1,9 @@
 {{! @glint-nocheck: or}}
-<div class='{{@formControlClass}}' local-class='ak-form-control'>
+<div
+  class='{{@formControlClass}}'
+  local-class='ak-form-control'
+  class='ak-form-control'
+>
   {{#if @label}}
     <AkTypography
       @variant={{@labelTypographyVariant}}
@@ -15,13 +19,14 @@
   {{/if}}
 
   <div
-    class={{@textFieldRootClass}}
+    class='{{@textFieldRootClass}} ak-text-field-root'
     local-class='ak-text-field-root {{if @label "ak-form-label-spacing"}}'
   >
     {{#if (has-block 'leftAdornment')}}
       <div
         data-test-ak-text-field-left-adornment
         local-class='ak-text-field-left-adornment'
+        class='ak-text-field-left-adornment'
       >
         {{yield to='leftAdornment'}}
       </div>
@@ -31,6 +36,7 @@
       data-test-text-input
       id={{this.id}}
       local-class='ak-text-input'
+      class='ak-text-input'
       @type={{or @type 'text'}}
       @value={{@value}}
       required={{@required}}
@@ -55,6 +61,7 @@
       aria-hidden='true'
       data-test-text-input-outlined
       local-class='ak-text-input-outlined {{if @error "ak-error-text-input"}}'
+      class='ak-text-input-outlined'
     ></fieldset>
   </div>
 

diff --git a/app/components/file-compare/file-overview/file-details/index.hbs b/app/components/file-compare/file-overview/file-details/index.hbs
@@ -34,14 +34,15 @@
   </AkStack>
 
   <AkStack @spacing='1'>
-    <div
-      local-class='platform-{{@file.project.platformIconClass}}'
-      data-test-fileCompare-fileOverview-platformIcon
-    >
-      <AkIcon @iconName={{@file.project.platformIconClass}} />
-    </div>
+    <div data-test-fileCompare-fileOverview-platformIcon>
+      {{#if @file.project.isIos}}
+        <AkSvg::IosIcon />
+      {{/if}}
 
-    {{! <AkSvg::AmPlaystoreLogo /> }}
+      {{#if @file.project.isAndroid}}
+        <AkSvg::AndroidIcon />
+      {{/if}}
+    </div>
 
     {{#if @file.submission.url}}
       <AkTooltip

diff --git a/app/components/file-compare/file-overview/tags/index.hbs b/app/components/file-compare/file-overview/tags/index.hbs
@@ -32,7 +32,7 @@
         @variant='body2'
         data-test-fileCompare-fileOverview-tags-empty
       >
-        {{t 'fileCompare.noTagsMessage' htmlSafe=true}}
+        {{t 'fileCompare.noTagsMessage'}}
       </AkTypography>
     {{/if}}
   </AkStack>

diff --git a/app/components/file-compare/file-overview/tags/index.scss b/app/components/file-compare/file-overview/tags/index.scss
@@ -7,3 +7,7 @@
   background-color: var(--file-compare-file-overview-background-grey);
   border-radius: 4px;
 }
+
+.text-nowrap {
+  white-space: nowrap;
+}
diff --git a/app/components/project-list/index.hbs b/app/components/project-list/index.hbs
@@ -10,7 +10,7 @@
         @width='full'
         @justifyContent='space-between'
         @alignItems='center'
-        class='p-2'
+        local-class='header-home-page-title'
       >
         <AkStack @direction='column' @spacing='0.5'>
           <AkTypography @variant='h5'>{{t 'allProjects'}}</AkTypography>
@@ -22,7 +22,7 @@
 
         <div local-class='search-input-conntainer-width'>
           <AkTextField
-            @placeholder='Search by Package Name'
+            @placeholder={{t 'searchQuery'}}
             @value={{this.query}}
             {{on 'input' this.onQueryChange}}
             local-class='search-package-name-input'
@@ -50,23 +50,25 @@
         @alignItems='center'
         @justifyContent='space-between'
         @width='full'
-        class='px-2 py-1'
+        local-class='header-home-page-sorting-filter'
       >
-        <AkStack @spacing='1'>
+        <AkStack>
           <AkSelect
             @onChange={{this.filterPlatform}}
             @options={{this.platformObjects}}
             @selected={{this.selectedPlatform}}
             @verticalPosition='auto'
             @triggerClass='filter-input'
             @dropdownClass='filter-input-dropdown'
+            @beforeOptions={{true}}
+            @beforeOptionLabel='Platform'
             {{style width='auto'}}
             data-test-pagination-select
             as |platformObject|
           >
             <AkStack @spacing='1' class='select-stack'>
               <AkStack
-                @spacing='0.5'
+                @spacing='1'
                 @alignItems='center'
                 class='prefix-selected-item'
               >
@@ -75,8 +77,7 @@
                   @size='small'
                   @color='primary'
                 />
-                {{t 'platform'}}
-                -
+                {{t 'platform'}}&nbsp; -
               </AkStack>
 
               <AkStack @alignItems='center' class='prefix-options'>
@@ -103,12 +104,14 @@
             @onChange={{this.onSelectTeam}}
             @onOpen={{this.onOpenTFilter}}
             @tagName='div'
-            class='select-team-class'
+            @beforeOptions={{true}}
+            @beforeOptionLabel='Team'
+            local-class='select-team-class'
             as |team|
           >
-            <AkStack @spacing='0.5' class='select-stack'>
+            <AkStack @spacing='1' class='select-stack'>
               <AkStack
-                @spacing='0.5'
+                @spacing='1'
                 @alignItems='center'
                 class='prefix-selected-item'
               >
@@ -117,12 +120,11 @@
                   @size='small'
                   @color='primary'
                 />
-                {{t 'team'}}
-                -
+                {{t 'team'}}&nbsp; -
               </AkStack>
 
               <AkStack @alignItems='center' class='prefix-options'>
-                {{#if (eq this.platform platformObject.value)}}
+                {{#if (eq this.selectedTeamName team.name)}}
                   <AkIcon @iconName='radio-button-checked' @color='success' />
                 {{else}}
                   <AkIcon @iconName='radio-button-unchecked' />
@@ -141,11 +143,13 @@
           @verticalPosition='below'
           @triggerClass='filter-input'
           @dropdownClass='filter-input-dropdown'
+          @beforeOptions={{true}}
+          @beforeOptionLabel='Sort By'
           {{style width='auto'}}
           data-test-pagination-select
           as |sortingKeyObject|
         >
-          <AkStack @spacing='0.5' @alignItems='center' class='select-stack'>
+          <AkStack @spacing='1' @alignItems='center' class='select-stack'>
             <AkIcon
               @iconName='sort'
               @size='small'

diff --git a/app/components/project-list/index.js b/app/components/project-list/index.js
@@ -61,6 +61,8 @@ export default class ProjectListComponent extends Component {
     name: 'All',
   };
 
+  @tracked selectedTeamName = 'All';
+
   constructor() {
     super(...arguments);
 
@@ -225,6 +227,9 @@ export default class ProjectListComponent extends Component {
 
   @action onSelectTeam(team) {
     this.selectedTeam = team;
+
+    this.selectedTeamName = team.name;
+
     this.team = team?.id || '';
 
     this.projectService.fetchProjects.perform(

diff --git a/app/components/project-list/index.scss b/app/components/project-list/index.scss
@@ -60,3 +60,15 @@
   background-color: var(--project-list-header-background-color);
   border: 1px solid var(--project-list-header-border-color);
 }
+
+.header-home-page-title {
+  padding: 1em 1.285em;
+}
+
+.header-home-page-sorting-filter {
+  padding: 0.785em 1.285em;
+}
+
+.select-team-class {
+  padding-left: 0.714em;
+}
diff --git a/app/models/project.ts b/app/models/project.ts
@@ -111,6 +111,14 @@ export default class ProjectModel extends ModelBaseMixin {
     }
   }
 
+  get isAndroid() {
+    return this.platform === ENUMS.PLATFORM.ANDROID;
+  }
+
+  get isIos() {
+    return this.platform === ENUMS.PLATFORM.IOS;
+  }
+
   get isAPIScanEnabled() {
     const platform = this.platform;
     return [ENUMS.PLATFORM.ANDROID, ENUMS.PLATFORM.IOS].includes(platform);

diff --git a/app/styles/_component-variables.scss b/app/styles/_component-variables.scss
@@ -93,6 +93,9 @@ body {
   --ak-select-trigger-disabled-background: var(--disabled-background-textfield);
   --ak-select-trigger-arrow-color: var(--text-primary);
 
+  // variables for ak-select-before-option
+  --ak-select-before-option-border-color: var(--neutral-grey-100);
+
   // variables for ak-modal
   --ak-modal-zIndex: var(--zIndex-modal);
   --ak-modal-backdrop-overlay-background: var(--backdrop-overlay-background);

diff --git a/app/styles/_global-styles.scss b/app/styles/_global-styles.scss
@@ -1564,7 +1564,7 @@ div[class^='_c-notification__container'] {
     background-color: $white !important;
     display: flex;
     align-items: center;
-    padding: 0.5em !important;
+    padding: 0.5em 0.75em !important;
   }
 
   .ember-power-select-options {

diff --git a/translations/en.json b/translations/en.json
@@ -333,7 +333,7 @@
     "summary1": "You are comparing file of ID",
     "summary2": "with file of ID",
     "nameOfTestCase": "Name of Test Case",
-    "noTagsMessage": "<em>No tags available.</em>",
+    "noTagsMessage": "No Tags Available",
     "selectAFile": "Select a File",
     "selectCompareFile": "Select One More File ID",
     "fileSelection": "File Selection",