[OGUI-1711/12] Token Panel update and revocation workflow implementation

Tokenization/backend/index.js

@@ -17,10 +17,49 @@ import { HttpServer } from '@aliceo2/web-ui';
 const http = new HttpServer({port: 8080, allow: '*'});
 
 const fakeTokens = new Map([
-    [1, {tokenId: 1, validity: 'good'}],
-    [2, {tokenId: 2, validity: 'bad'}],
+    [1, {
+        tokenId: 1,
+        last4chars: 'abcd',
+        serviceFrom: 'Service 1',
+        serviceTo: 'Service 2',
+        exp: '2026-01-12T11:31:12',
+        issuer: 'central-system',
+        iat: '2025-10-01T10:00:00',
+        permissions: ['GET', 'POST']
+    }],
+    [2, {
+        tokenId: 2,
+        last4chars: 'wxyz',
+        serviceFrom: 'Service 3',
+        serviceTo: 'Service 4',
+        exp: '2025-11-15T08:45:30',
+        issuer: 'admin-portal',
+        iat: '2025-09-15T14:22:10',
+        permissions: ['GET']
+    }],
+    [3, {
+        tokenId: 3,
+        last4chars: 'efgh',
+        serviceFrom: 'Service 2',
+        serviceTo: 'Service 1',
+        exp: '2026-03-20T16:30:00',
+        issuer: 'central-system',
+        iat: '2025-10-02T09:15:00',
+        permissions: ['GET', 'POST', 'PUT', 'DELETE']
+    }],
+    [4, {
+        tokenId: 4,
+        last4chars: '1234',
+        serviceFrom: 'Service 1',
+        serviceTo: 'Service 3',
+        exp: '2026-02-05T12:00:00',
+        issuer: 'api-gateway',
+        iat: '2025-09-25T11:30:45',
+        permissions: ['GET', 'PUT']
+    }]
 ]);
 
+
 const fakeLogs = new Map([
     [1, []],
     [2, [

Tokenization/webapp/app/components/tokens/action-block.tsx

@@ -0,0 +1,51 @@
+/**
+ * @license
+ * Copyright 2019-2020 CERN and copyright holders of ALICE O2.
+ * See http://alice-o2.web.cern.ch/copyright for details of the copyright holders.
+ * All rights not expressly granted are reserved.
+ *
+ * This software is distributed under the terms of the GNU General Public
+ * License v3 (GPL Version 3), copied verbatim in the file "COPYING".
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import React from 'react';
+import { IconDelete } from '~/ui/icon';
+
+interface DeleteDialogState {
+  isOpen: boolean;
+  tokenId: string;
+}
+
+interface ActionBlockProps {
+  tokenId: string;
+  setActionDeleteWindow: React.Dispatch<React.SetStateAction<DeleteDialogState>>;
+}
+
+/**
+ * Action block component that provides token actions such as delete
+ */
+export default function ActionBlock({ tokenId, setActionDeleteWindow }: ActionBlockProps) {
+  const handleDelete = () => {
+    setActionDeleteWindow({
+      isOpen: true,
+      tokenId: tokenId,
+    });
+  };
+
+  return (
+    <div>
+      <button
+        className="bg-danger btn-sm"
+        onClick={handleDelete}
+        aria-label={`Delete token ${tokenId}`}
+        title="Delete token"
+      >
+        <IconDelete />
+      </button>
+    </div>
+  );
+}

Tokenization/webapp/app/components/tokens/token.ts

@@ -13,6 +13,12 @@
  */
 
 export interface Token {
-  tokenId: number;
-  validity: 'good' | 'bad';
+  tokenId: string ;
+  serviceFrom: string;
+  serviceTo: string;
+  exp: string;
+  last4chars: string;
+  issuer: string;
+  iat: string;
+  permissions: string[];
 }

Tokenization/webapp/app/routes/tokens/details.tsx

@@ -72,9 +72,26 @@ export const clientLoader = async ({ params }: Route.ClientLoaderArgs): Promise<
  * @param props.loaderData.logs - Promise that resolves to the logs array
  */
 export default function Details({ loaderData: { token, logs } }: Route.ComponentProps) {
+
+  const { tokenId, last4chars, issuer, iat, serviceFrom, serviceTo, exp } = token;
+  const expirationDate = exp.split('T').reverse().join(' - ');
+
+  const fields = [
+    { label: 'Last 4 token characters', value: last4chars },
+    { label: 'Issuer', value: issuer },
+    { label: 'Issued at', value: iat },
+    { label: 'Subject', value: serviceFrom },
+    { label: 'Audience', value: serviceTo },
+    { label: 'Expires at', value: expirationDate },
+  ];
+
   return <>
-    <h1>Token {token.tokenId} details</h1>
-    <p>The token has a {token.validity} validity.</p>
+    <h1>Token {tokenId} details</h1>
+    {fields.map((f) => (
+      <p key={f.label}>
+        {f.label}: <strong>{f.value ?? '—'}</strong>
+      </p>
+    ))}
     <h2>Logs</h2>
     <Suspense fallback={<Spinner size={2} align={'left'} />}>
       <Await resolve={logs} errorElement={<div><em>Failed to load the logs</em></div>}>

Tokenization/webapp/app/routes/tokens/overview.tsx

@@ -16,10 +16,12 @@ import type { Token } from '../../components/tokens/token';
 
 import { Link } from 'react-router';
 import { useState } from 'react';
-import { Tab } from '@mui/material';
+import { Tab, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material';
 
+import ActionBlock from '~/components/tokens/action-block';
 import { useSetHeader } from '~/ui/header/headerContext';
 import { TabsNavbar } from '~/ui/navbar';
+import { useAuth } from '~/hooks/session';
 
 /**
  * Client loader that fetches all tokens from the API.
@@ -34,6 +36,12 @@ export const clientLoader = async (): Promise<Token[]> => {
   return response.json();
 };
 
+// Interfejs stanu dla okna dialogowego usuwania tokena
+interface DeleteDialogState {
+  isOpen: boolean;
+  tokenId: string;
+}
+
 // Will be changed in next PR
 /**
  * Table component that displays a list of tokens with their ID and validity.
@@ -42,20 +50,81 @@ export const clientLoader = async (): Promise<Token[]> => {
  * @param tokens - Array of tokens to display
  */
 function TokenTable({ tokens }: { tokens: Token[] }) {
-  return  <table className={'table'}>
-    <thead>
-      <tr>
-        <th>ID</th>
-        <th>validity</th>
-      </tr>
-    </thead>
-    <tbody>
-      {tokens.map((token: Token) => <tr key={token.tokenId}>
-        <td><Link to={`/tokens/${token.tokenId}`}>{token.tokenId}</Link></td>
-        <td className={token.validity === 'bad' ? 'danger' : ''}>{token.validity}</td>
-      </tr>)}
-    </tbody>
-  </table>;
+  const theaders = ['ID', 'Service From', 'Service To', 'Expires at', 'Actions'];
+
+  // State for dialog window
+  const [deleteDialog, setDeleteDialog] = useState<DeleteDialogState>({
+    isOpen: false,
+    tokenId: '',
+  });
+
+  const auth = useAuth('admin');
+
+  // Function to handle delete confirmation -> will be updated in next PR
+  const handleConfirmDelete = async () => {
+    if (auth) {
+      // eslint-disable-next-line no-console
+      console.log('Token Deleted');
+    }
+    setDeleteDialog({ isOpen: false, tokenId: '' });
+  };
+
+  const handleCloseDialog = () => {
+    setDeleteDialog({ isOpen: false, tokenId: '' });
+  };
+
+  return (
+    <>
+      <table className={'table'}>
+        <thead>
+          <tr>
+            {theaders.map((content, index) => <th key={index}>{content}</th>)}
+          </tr>
+        </thead>
+        <tbody>
+          {tokens.map((token: Token) => (
+            <tr key={token.tokenId}>
+              <td><Link to={`/tokens/${token.tokenId}`}>{token.tokenId}</Link></td>
+              <td>{token.serviceFrom}</td>
+              <td>{token.serviceTo}</td>
+              <td>{token.exp.split('T').reverse().join(' - ')}</td>
+              <td>
+                <ActionBlock
+                  tokenId={token.tokenId}
+                  setActionDeleteWindow={setDeleteDialog}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <Dialog
+        open={deleteDialog.isOpen}
+        onClose={handleCloseDialog}
+        aria-labelledby="delete-token-dialog-title"
+        aria-describedby="delete-token-dialog-description"
+      >
+        <DialogTitle id="delete-token-dialog-title">
+          Confirm Token Deletion
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText id="delete-token-dialog-description">
+            Are you sure you want to delete token with ID: {deleteDialog.tokenId}?
+            This action cannot be undone.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialog} color="primary">
+            Cancel
+          </Button>
+          <Button onClick={handleConfirmDelete} color="error" variant="contained" autoFocus>
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
 }
 
 /**