--wip-- [skip ci]

app/adapters/service-account.ts

@@ -0,0 +1,15 @@
+import CommonDRFAdapter from './commondrf';
+import { underscore } from '@ember/string';
+import type ModelRegistry from 'ember-data/types/registries/model';
+
+export default class ServiceAccountAdapter extends CommonDRFAdapter {
+  pathForType(type: keyof ModelRegistry) {
+    return underscore(super.pathForType(type));
+  }
+}
+
+declare module 'ember-data/types/registries/adapter' {
+  export default interface AdapterRegistry {
+    'service-account': ServiceAccountAdapter;
+  }
+}

app/components/ak-tabs/item/index.hbs

@@ -14,12 +14,11 @@
   data-test-ak-tab-item
   as |It|
 >
-
-  <It.leftIcon local-class='ak-tab-icon'>
-    {{#if (has-block 'tabIcon')}}
+  {{#if (has-block 'tabIcon')}}
+    <It.leftIcon local-class='ak-tab-icon'>
       {{yield to='tabIcon'}}
-    {{/if}}
-  </It.leftIcon>
+    </It.leftIcon>
+  {{/if}}
 
   {{yield}}
 

app/components/organization-name-header/index.scss

@@ -3,6 +3,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 1em;
+  background-color: var(--organization-name-header-background-color);
   border: 1px solid var(--organization-name-header-border-color);
   border-radius: var(--organization-name-header-border-radius);
   box-sizing: border-box;

app/components/organization-name-header/index.ts

@@ -0,0 +1,62 @@
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+import type MeService from 'irene/services/me';
+import type OrganizationModel from 'irene/models/organization';
+
+interface OrganizationNameHeaderSignature {
+  Args: {
+    organization: OrganizationModel;
+  };
+  Blocks: {
+    actionBtn: [{ openEditOrgNameModal: () => void }];
+  };
+}
+
+export default class OrganizationNameHeaderComponent extends Component<OrganizationNameHeaderSignature> {
+  @service declare me: MeService;
+
+  @tracked showAddEditModal = false;
+  @tracked editModal = false;
+
+  get orgNameDoesNotExist() {
+    return this.args.organization.name === '';
+  }
+
+  get isAddBtnDisabled() {
+    return !this.me.get('org')?.get('is_owner');
+  }
+
+  get userType() {
+    return this.me.get('org')?.get('is_owner')
+      ? 'owner'
+      : this.me.get('org')?.get('is_admin')
+        ? 'admin'
+        : 'member';
+  }
+
+  @action
+  handleAddOrgNameClick() {
+    this.editModal = false;
+    this.showAddEditModal = true;
+  }
+
+  @action
+  handleEditOrgName() {
+    this.editModal = true;
+    this.showAddEditModal = true;
+  }
+
+  @action
+  handleCancel() {
+    this.showAddEditModal = false;
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    OrganizationNameHeader: typeof OrganizationNameHeaderComponent;
+  }
+}

app/components/organization/service-account/empty/index.hbs

@@ -0,0 +1,18 @@
+<AkStack
+  @alignItems='center'
+  @justifyContent='center'
+  @direction='column'
+  @spacing='1'
+  class='py-7 px-4'
+>
+  <AkSvg::ProjectListEmpty />
+
+  <AkTypography @variant='h5' class='mt-4'>
+    No service account has created
+  </AkTypography>
+
+  <AkTypography @align='center'>
+    Create a service account by clicking on "<strong>Create</strong>" button
+  </AkTypography>
+
+</AkStack>

app/components/organization/service-account/empty/index.ts

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+export default class OrganizationServiceAccountEmptyComponent extends Component {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Organization::ServiceAccount::Empty': typeof OrganizationServiceAccountEmptyComponent;
+  }
+}

app/components/organization/service-account/list/action/index.hbs

@@ -0,0 +1,11 @@
+<AkStack @justifyContent='center' @alignItems='center' @spacing='1'>
+  <AkIconButton>
+    <AnalysisRisk::OverrideDetailsIcon />
+  </AkIconButton>
+
+  <div local-class='divider' />
+
+  <AkIconButton>
+    <AkIcon @iconName='more-vert' />
+  </AkIconButton>
+</AkStack>

app/components/organization/service-account/list/action/index.scss

@@ -0,0 +1,7 @@
+.divider {
+  width: 1px;
+  height: 22px;
+  background-color: var(
+    --file-details-vulnerability-analysis-details-edit-analysis-button-divider-color
+  );
+}

app/components/organization/service-account/list/action/index.ts

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import type ServiceAccountModel from 'irene/models/service-account';
+
+export interface OrganizationServiceAccountListExpiryOnSignature {
+  Args: {
+    serviceAccount: ServiceAccountModel;
+  };
+}
+
+export default class OrganizationServiceAccountListExpiryOnComponent extends Component<OrganizationServiceAccountListExpiryOnSignature> {}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Organization::ServiceAccount::List::Action': typeof OrganizationServiceAccountListExpiryOnComponent;
+    'organization/service-account/list/action': typeof OrganizationServiceAccountListExpiryOnComponent;
+  }
+}

app/components/organization/service-account/list/expiry-on/index.hbs

@@ -0,0 +1,9 @@
+<AkChip
+  @variant='semi-filled'
+  @label={{this.expiryChipDetails.label}}
+  @color={{this.expiryChipDetails.color}}
+>
+  <:icon>
+    <AkIcon @iconName='{{this.expiryChipDetails.icon}}' />
+  </:icon>
+</AkChip>

app/components/organization/service-account/list/expiry-on/index.ts

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+import dayjs from 'dayjs';
+import type ServiceAccountModel from 'irene/models/service-account';
+
+export interface OrganizationServiceAccountListExpiryOnSignature {
+  Args: {
+    serviceAccount: ServiceAccountModel;
+  };
+}
+
+export default class OrganizationServiceAccountListExpiryOnComponent extends Component<OrganizationServiceAccountListExpiryOnSignature> {
+  get expiryChipDetails() {
+    const serviceAccount = this.args.serviceAccount;
+    const noExpiry = serviceAccount.expiry === null;
+
+    return {
+      label: noExpiry
+        ? 'No Expiry'
+        : dayjs(serviceAccount.expiry).format('DD MMM YYYY'),
+      icon: noExpiry ? 'warning' : 'event',
+      color: noExpiry ? ('warn' as const) : ('default' as const),
+    };
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Organization::ServiceAccount::List::ExpiryOn': typeof OrganizationServiceAccountListExpiryOnComponent;
+    'organization/service-account/list/expiry-on': typeof OrganizationServiceAccountListExpiryOnComponent;
+  }
+}

app/components/organization/service-account/list/index.hbs

@@ -0,0 +1,95 @@
+<div local-class='service-account-container'>
+  <AkStack
+    class='p-2'
+    @alignItems='center'
+    @justifyContent='space-between'
+    @spacing='1.5'
+  >
+    <AkStack @direction='column' @spacing='0.5'>
+      <AkTypography @variant='subtitle1'>
+        All Service Account
+      </AkTypography>
+
+      <AkTypography @variant='body2' @color='textSecondary'>
+        Lorem ipsum dolor sit amet consectetur. Amet habitant
+      </AkTypography>
+    </AkStack>
+
+    <AkStack @alignItems='center' @spacing='2.5'>
+      <AkFormControlLabel @label='Show System Created'>
+        <AkCheckbox
+          data-test-inactive-user-checkbox
+          @checked={{@queryParams.show_system_created}}
+          @onChange={{this.handleShowSystemCreated}}
+        />
+      </AkFormControlLabel>
+
+      <div local-class='divider' />
+
+      <AkButton>
+        Create
+      </AkButton>
+    </AkStack>
+  </AkStack>
+
+  <AkPaginationProvider
+    @results={{this.serviceAccountList}}
+    @onItemPerPageChange={{this.handleItemPerPageChange}}
+    @totalItems={{this.totalServiceAccountCount}}
+    @nextAction={{this.handleNextPrevAction}}
+    @prevAction={{this.handleNextPrevAction}}
+    @itemPerPageOptions={{array 10 25 50}}
+    @defaultLimit={{this.limit}}
+    @offset={{this.offset}}
+    as |pgc|
+  >
+    {{#if this.fetchServiceAccounts.isRunning}}
+      <AkDivider @color='dark' />
+
+      <Organization::ServiceAccount::Loading />
+    {{else if this.hasNoServiceAccount}}
+      <AkDivider @color='dark' />
+
+      <Organization::ServiceAccount::Empty />
+    {{else}}
+      <div class='mb-2'>
+        <AkTable as |t|>
+          <t.head
+            data-test-serviceAccountList-thead
+            @columns={{this.columns}}
+          />
+          <t.body @rows={{this.serviceAccountList}} as |b|>
+            <b.row data-test-serviceAccountList-row as |r|>
+              <r.cell data-test-serviceAccountList-cell as |value|>
+                {{#if r.columnValue.component}}
+                  {{#let (component r.columnValue.component) as |Component|}}
+                    <Component @serviceAccount={{r.rowValue}} />
+                  {{/let}}
+                {{else}}
+                  <AkTypography @noWrap={{true}} title={{value}}>
+                    {{value}}
+                  </AkTypography>
+                {{/if}}
+              </r.cell>
+            </b.row>
+          </t.body>
+        </AkTable>
+      </div>
+
+      <AkPagination
+        @disableNext={{pgc.disableNext}}
+        @nextAction={{pgc.nextAction}}
+        @disablePrev={{pgc.disablePrev}}
+        @prevAction={{pgc.prevAction}}
+        @endItemIdx={{pgc.endItemIdx}}
+        @startItemIdx={{pgc.startItemIdx}}
+        @itemPerPageOptions={{pgc.itemPerPageOptions}}
+        @onItemPerPageChange={{pgc.onItemPerPageChange}}
+        @selectedOption={{pgc.selectedOption}}
+        @tableItemLabel={{t 'exports'}}
+        @perPageTranslation={{t 'recordPerPage'}}
+        @totalItems={{pgc.totalItems}}
+      />
+    {{/if}}
+  </AkPaginationProvider>
+</div>

app/components/organization/service-account/list/index.scss

@@ -0,0 +1,14 @@
+.service-account-container {
+  margin-top: 1.5em;
+  background-color: var(--background-main);
+  border: 1px solid var(--border-color-1);
+  box-sizing: border-box;
+
+  .divider {
+    width: 1px;
+    height: 34px;
+    background-color: var(
+      --file-details-vulnerability-analysis-details-edit-analysis-button-divider-color
+    );
+  }
+}