wip

src/lib/api/api.model.ts

@@ -51,14 +51,14 @@ export interface ApplicationListItem {
   id: string;
   displayName: string;
   userId: string;
-  lastUsed: string;
+  lastUsed?: string;
   authorizedScopes: ReadonlyArray<string>;
 }
 
 export interface Application {
   displayName: string;
   userId: string;
-  lastUsed: string;
+  lastUsed?: string;
   authorizedScopes: ReadonlyArray<string>;
   authorizedGw2Accounts: ReadonlyArray<ApplicationGw2Account>;
 }

src/pages/account/applications-detail.tsx

@@ -1,5 +1,5 @@
 import {
-  Alert, Box, Button, ColumnLayout, Container, ContentLayout, Header, Spinner,
+  Alert, Box, Button, ColumnLayout, Container, ContentLayout, Header, Spinner, StatusIndicator,
 } from '@cloudscape-design/components';
 import React, { useEffect, useState } from 'react';
 import { useHref, useNavigate, useParams } from 'react-router-dom';
@@ -119,7 +119,7 @@ function Overview({ id, application }: { id: string, application: Application })
         <Copy copyText={id}><Box variant={'samp'} fontSize={'body-s'}>{application.userId}</Box></Copy>
       </ValueWithLabel>
       <ValueWithLabel label={'Last Used'}>
-        <Box>{i18n.dateTime(new Date(application.lastUsed))}</Box>
+        <Box>{application.lastUsed !== undefined ? i18n.dateTime(new Date(application.lastUsed)) : <StatusIndicator type={'info'}>Never</StatusIndicator>}</Box>
       </ValueWithLabel>
     </KeyValuePairs>
   );

src/pages/account/applications.tsx

@@ -1,7 +1,7 @@
 import {
   Box,
   ContentLayout,
-  Header,
+  Header, StatusIndicator,
 } from '@cloudscape-design/components';
 import React, { useEffect, useState } from 'react';
 import { useHref } from 'react-router-dom';
@@ -40,7 +40,13 @@ function buildColumnDefinitions(i18n: I18nFormats) {
     {
       id: 'last_used',
       header: 'Last Used',
-      cell: (v) => i18n.dateTime(new Date(v.lastUsed)),
+      cell: (v) => {
+        if (v.lastUsed === undefined) {
+          return <StatusIndicator type={'info'}>Never</StatusIndicator>;
+        }
+
+        return i18n.dateTime(new Date(v.lastUsed));
+      },
       sortingField: 'lastUsed',
     },
     {

src/pages/developer/applications-detail.tsx

@@ -28,7 +28,7 @@ import { useI18n } from '../../components/util/context/i18n';
 import { usePreferences } from '../../components/util/state/use-preferences';
 import { expectSuccess } from '../../lib/api/api';
 import {
-  ApprovalStatus, DevApplication, DevApplicationUser, PagedResponse,
+  ApprovalStatus, DevApplication, DevApplicationClientListItem, DevApplicationUser, PagedResponse,
 } from '../../lib/api/api.model';
 import { I18nFormats } from '../../lib/i18n/i18n-strings';
 import { OAUTH2_SCOPES } from '../../lib/oauth2.model';
@@ -61,19 +61,15 @@ export function DevApplicationsDetail() {
 
   let overview: React.ReactNode;
   let clients: React.ReactNode;
-  let users: React.ReactNode;
   if (isLoading) {
     overview = <Spinner size={'large'} />;
     clients = <Container variant={'stacked'}><Spinner size={'large'} /></Container>;
-    users = <Container variant={'stacked'}><Spinner size={'large'} /></Container>;
   } else if (devApplication === undefined) {
     overview = <Box>Failed to load</Box>;
     clients = <Container variant={'stacked'}><Box>Failed to load</Box></Container>;
-    users = <Container variant={'stacked'}><Box>Failed to load</Box></Container>;
   } else {
     overview = <Overview id={id} devApplication={devApplication} />;
     clients = <ClientTable id={id} devApplication={devApplication} />;
-    users = <UserTable id={id} devApplication={devApplication} />;
   }
 
   return (
@@ -122,7 +118,7 @@ export function DevApplicationsDetail() {
         <ColumnLayout columns={1}>
           <Container variant={'stacked'}>{overview}</Container>
           {clients}
-          {users}
+          <UserTable id={id} clients={devApplication?.clients ?? []} />
         </ColumnLayout>
       </ContentLayout>
     </>
@@ -313,7 +309,7 @@ function visibleByDefault(id: string): boolean {
   return id !== 'id';
 }
 
-function UserTable({ id, devApplication }: { id: string; devApplication: DevApplication }) {
+function UserTable({ id, clients }: { id: string; clients: ReadonlyArray<DevApplicationClientListItem> }) {
   const i18n = useI18n();
   const { apiClient } = useHttpClient();
   const { notification } = useAppControls();
@@ -415,7 +411,7 @@ function UserTable({ id, devApplication }: { id: string; devApplication: DevAppl
               pages: [],
             }));
           }}
-          clientIds={devApplication.clients.map((v) => [v.id, v.displayName])}
+          clientIds={clients.map((v) => [v.id, v.displayName])}
           disabled={isLoading}
         />
       }

vite.config.ts

@@ -19,6 +19,7 @@ function localTarget(target: string): ProxyOptions {
 const proxyConfig: Record<string, string | ProxyOptions> = {
   '/api/': localTarget('http://127.0.0.1:9000'),
   '/api-v2/': localTarget('http://127.0.0.1:8090'),
+  '/api-app/': localTarget('http://127.0.0.1:8090'),
   '/auth/': localTarget('http://127.0.0.1:9000'),
   '/oauth2/': localTarget('http://127.0.0.1:9000'),
   '/.well-known/oauth-authorization-server': localTarget('http://127.0.0.1:9000'),