feat: initial iteration on building out a UI

frontend/package.json

@@ -10,6 +10,7 @@
   },
   "private": true,
   "dependencies": {
+    "@apollo/client": "3.10.8",
     "@angular/animations": "^17.3.0",
     "@angular/cdk": "^17.0.0",
     "@angular/common": "^17.3.0",
@@ -23,7 +24,11 @@
     "@fundamental-ngx/core": "^0.50.0",
     "@fundamental-ngx/i18n": "0.50.0",
     "@sap-theming/theming-base-content": "^11.15.0",
+    "@luigi-project/client-support-angular": "^2.13.0",
+    "apollo-angular": "7.0.2",
     "fundamental-styles": "0.37.0",
+    "graphql": "16.9.0",
+    "graphql-sse": "^2.5.2",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

frontend/src/app/account-list/account-list.component.html

@@ -0,0 +1,63 @@
+<div class="overlay">
+  <fd-dynamic-page size="large" ariaLabel="Example Dynamic Page" [autoResponsive]="false">
+    <fd-dynamic-page-header title="Account List"
+      subtitle="This page displays the created Accounts on in your Environment">
+      <!-- breadcrumb content -->
+      <fd-dynamic-page-breadcrumb>
+        <fd-breadcrumb>
+          <fd-breadcrumb-item>
+            <a fd-link href="#">Accounts</a>
+          </fd-breadcrumb-item>
+        </fd-breadcrumb>
+      </fd-dynamic-page-breadcrumb>
+      <fd-dynamic-page-global-actions>
+        <fd-toolbar fdType="transparent" [clearBorder]="true">
+          <button fd-toolbar-item fd-button fdCompact fdType="emphasized" label="Create Account" title="Create"></button>
+          <fd-toolbar-separator></fd-toolbar-separator>
+        </fd-toolbar>
+      </fd-dynamic-page-global-actions>
+    </fd-dynamic-page-header>
+    <fd-dynamic-page-content cdkScrollable>
+      <div *ngIf="(accounts | async) as accountList">
+      <table fd-table aria-label="Default" *ngIf="accountList.length > 0">
+        <thead fd-table-header>
+            <tr fd-table-row>
+                <th fd-table-cell>Name</th>
+            </tr>
+        </thead>
+        <tbody fd-table-body  >
+
+                <tr fd-table-row *ngFor="let row of accountList;">
+                    <td fd-table-cell>
+                        <a fd-link href="#">{{ row.metadata.name }}</a>
+                    </td>
+                    <!-- <td fd-table-cell>
+                        <p fd-table-text maxWidth="250px" [noWrap]="true">
+                            {{ row.column2 }}
+                        </p>
+                    </td>
+                    <td fd-table-cell>
+                        <p fd-table-text maxWidth="250px">
+                            {{ row.column3 }}
+                        </p>
+                    </td>
+                    <td fd-table-cell>{{ row.date }}</td>
+                    <td fd-table-cell><fd-icon [glyph]="row.type"></fd-icon></td> -->
+                </tr>
+        </tbody>
+    </table>
+    <div [style.width.%]="100" [style.display]="'flex'" [style.justify-content]="'center'" *ngIf="accountList.length == 0">
+      <figure fd-illustrated-message [svgConfig]="sceneConfig" svgAriaLabel="Illustration label">
+          <figcaption fd-illustrated-message-figcaption>
+              <h3 fd-illustrated-message-title>No Accounts so far</h3>
+              <p fd-illustrated-message-text>Create your first Account!</p>
+          </figcaption>
+          <fd-illustrated-message-actions>
+              <button fd-button label="Create"></button>
+          </fd-illustrated-message-actions>
+      </figure>
+  </div>
+</div>
+    </fd-dynamic-page-content>
+  </fd-dynamic-page>
+</div>

frontend/src/app/account-list/account-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountListComponent } from './account-list.component';
+
+describe('AccountListComponent', () => {
+  let component: AccountListComponent;
+  let fixture: ComponentFixture<AccountListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AccountListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AccountListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/account-list/account-list.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from "@angular/core";
+import { FundamentalNgxCoreModule, IllustratedMessageModule } from "@fundamental-ngx/core";
+import { AccountService } from "../services/account-service.service";
+import { BehaviorSubject, Observable } from "rxjs";
+import { Account } from "../models/account";
+import { CommonModule } from "@angular/common";
+
+@Component({
+  selector: "app-account-list",
+  standalone: true,
+  imports: [FundamentalNgxCoreModule, CommonModule,IllustratedMessageModule],
+  templateUrl: "./account-list.component.html",
+  styleUrl: "./account-list.component.scss",
+})
+export class AccountListComponent implements OnInit {
+  constructor(private accountService: AccountService){}
+
+  sceneConfig = {
+      scene: { url: 'assets/images/sapIllus-Scene-NoSearchResults.svg', id: 'sapIllus-Scene-NoSearchResults' },
+      dialog: { url: 'assets/images/sapIllus-Dialog-NoSearchResults.svg', id: 'sapIllus-Dialog-NoSearchResults' }
+  };
+
+
+  accounts: Observable<Account[]> = new BehaviorSubject([]);
+
+  ngOnInit(): void {
+    this.accounts = this.accountService.getAccounts()
+    this.accounts.subscribe(res => console.log(res))
+  }
+}

frontend/src/app/apollo-factory.ts

@@ -0,0 +1,44 @@
+import { Injectable } from "@angular/core";
+import { ApolloLink, InMemoryCache } from "@apollo/client";
+import { setContext } from "@apollo/client/link/context";
+import { apiurl } from "./graphql.config";
+import { PortalLuigiContextService } from "./services/luigi-context.service";
+import { HttpLink } from 'apollo-angular/http';
+import { first } from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ApolloFactory {
+  constructor(private luigiContextService:PortalLuigiContextService){}
+
+
+  createApollo(httpLink: HttpLink) {
+    const basic = setContext((operation, context) => ({
+      headers: {
+        Accept: 'charset=utf-8',
+      },
+    }));
+
+    const auth = setContext((operation, context) => {
+      let ctx = this.luigiContextService.getContext()
+      if (ctx.token === null) {
+        return {};
+      } else {
+        return {
+          headers: {
+            Authorization: `Bearer ${ctx.token}`,
+          },
+        };
+      }
+    });
+
+    const link = ApolloLink.from([basic, auth, httpLink.create({ uri: apiurl })]);
+    const cache = new InMemoryCache();
+
+    return {
+      link,
+      cache,
+    };
+  }
+}