feat(console): api resources list page (#322)

packages/console/src/pages/ApiResources/index.module.scss

@@ -0,0 +1,23 @@
+@use '@/scss/underscore' as _;
+
+.headline {
+  display: flex;
+  justify-content: space-between;
+}
+
+.table {
+  margin-top: _.unit(6);
+  width: 100%;
+
+  tbody tr.clickable {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-table-row-selected);
+    }
+  }
+}
+
+.apiResourceName {
+  width: 360px;
+}

packages/console/src/pages/ApiResources/index.tsx

@@ -1,9 +1,61 @@
+import { Resource } from '@logto/schemas';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
 
+import Button from '@/components/Button';
 import Card from '@/components/Card';
+import CardTitle from '@/components/CardTitle';
+import CopyToClipboard from '@/components/CopyToClipboard';
+import ImagePlaceholder from '@/components/ImagePlaceholder';
+import ItemPreview from '@/components/ItemPreview';
+import { RequestError } from '@/swr';
+
+import * as styles from './index.module.scss';
 
 const ApiResources = () => {
-  return <Card>ApiResources</Card>;
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { data, error } = useSWR<Resource[], RequestError>('/api/resources');
+  const isLoading = !data && !error;
+
+  return (
+    <Card>
+      <div className={styles.headline}>
+        <CardTitle title="api_resources.title" subtitle="api_resources.subtitle" />
+        <Button disabled title="admin_console.api_resources.create" />
+      </div>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <td className={styles.apiResourceName}>{t('api_resources.api_name')}</td>
+            <td>{t('api_resources.api_identifier')}</td>
+          </tr>
+        </thead>
+        <tbody>
+          {error && (
+            <tr>
+              <td colSpan={2}>error occured: {error.metadata.code}</td>
+            </tr>
+          )}
+          {isLoading && (
+            <tr>
+              <td colSpan={2}>loading</td>
+            </tr>
+          )}
+          {data?.map(({ id, name, indicator }) => (
+            <tr key={id} className={styles.clickable}>
+              <td>
+                <ItemPreview title={name} icon={<ImagePlaceholder />} />
+              </td>
+              <td>
+                <CopyToClipboard value={indicator} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Card>
+  );
 };
 
 export default ApiResources;

packages/phrases/src/locales/en.ts

@@ -46,6 +46,13 @@ const translation = {
         tranditional: 'Tranditional Web App',
       },
     },
+    api_resources: {
+      title: 'API Resources',
+      subtitle: 'Define APIs that you can consume from your authorized applications.',
+      create: 'Create API Resource',
+      api_name: 'API Name',
+      api_identifier: 'API Identifier',
+    },
   },
 };
 

packages/phrases/src/locales/zh-cn.ts

@@ -48,6 +48,13 @@ const translation = {
         tranditional: 'Tranditional Web App',
       },
     },
+    api_resources: {
+      title: 'API Resources',
+      subtitle: 'Define APIs that you can consume from your authorized applications.',
+      create: 'Create API Resource',
+      api_name: 'API Name',
+      api_identifier: 'API Identifier',
+    },
   },
 };