feat(console): create resource page (#343)

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

@@ -0,0 +1,32 @@
+@use '@/scss/underscore' as _;
+
+.card {
+  padding: _.unit(8);
+  max-width: 800px;
+}
+
+.headline {
+  display: flex;
+  justify-content: space-between;
+
+  > *:not(:first-child) {
+    margin-left: _.unit(3);
+  }
+
+  > svg {
+    cursor: pointer;
+  }
+}
+
+.form {
+  margin-top: _.unit(8);
+}
+
+.textField {
+  @include _.form-text-field;
+}
+
+.submit {
+  margin-top: _.unit(8);
+  text-align: right;
+}

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

@@ -0,0 +1,65 @@
+import { Resource } from '@logto/schemas';
+import ky from 'ky';
+import React from 'react';
+import { useForm } from 'react-hook-form';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import CardTitle from '@/components/CardTitle';
+import FormField from '@/components/FormField';
+import TextInput from '@/components/TextInput';
+import Close from '@/icons/Close';
+
+import * as styles from './index.module.scss';
+
+type FormData = {
+  name: string;
+  indicator: string;
+};
+
+type Props = {
+  onClose?: (createdApiResource?: Resource) => void;
+};
+
+const CreateForm = ({ onClose }: Props) => {
+  const { handleSubmit, register } = useForm<FormData>();
+
+  const onSubmit = handleSubmit(async (data) => {
+    try {
+      const createdApiResource = await ky.post('/api/resources', { json: data }).json<Resource>();
+      onClose?.(createdApiResource);
+    } catch (error: unknown) {
+      console.error(error);
+    }
+  });
+
+  return (
+    <Card className={styles.card}>
+      <div className={styles.headline}>
+        <CardTitle title="api_resources.create" subtitle="api_resources.subtitle" />
+        <Close onClick={() => onClose?.()} />
+      </div>
+      <form className={styles.form} onSubmit={onSubmit}>
+        <FormField
+          isRequired
+          title="admin_console.api_resources.api_name"
+          className={styles.textField}
+        >
+          <TextInput {...register('name', { required: true })} />
+        </FormField>
+        <FormField
+          isRequired
+          title="admin_console.api_resources.api_identifier"
+          className={styles.textField}
+        >
+          <TextInput {...register('indicator', { required: true })} />
+        </FormField>
+        <div className={styles.submit}>
+          <Button htmlType="submit" title="admin_console.api_resources.create" size="large" />
+        </div>
+      </form>
+    </Card>
+  );
+};
+
+export default CreateForm;

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

@@ -1,6 +1,8 @@
 import { Resource } from '@logto/schemas';
-import React from 'react';
+import { conditional } from '@silverhand/essentials/lib/utilities/conditional.js';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import Modal from 'react-modal';
 import useSWR from 'swr';
 
 import Button from '@/components/Button';
@@ -9,20 +11,43 @@ import CardTitle from '@/components/CardTitle';
 import CopyToClipboard from '@/components/CopyToClipboard';
 import ImagePlaceholder from '@/components/ImagePlaceholder';
 import ItemPreview from '@/components/ItemPreview';
+import * as modalStyles from '@/scss/modal.module.scss';
 import { RequestError } from '@/swr';
 
+import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
 
 const ApiResources = () => {
+  const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { data, error } = useSWR<Resource[], RequestError>('/api/resources');
+  const { data, error, mutate } = 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" />
+        <Button
+          title="admin_console.api_resources.create"
+          onClick={() => {
+            setIsCreateFormOpen(true);
+          }}
+        />
+        <Modal
+          isOpen={isCreateFormOpen}
+          className={modalStyles.content}
+          overlayClassName={modalStyles.overlay}
+        >
+          <CreateForm
+            onClose={(createdApiResource) => {
+              setIsCreateFormOpen(false);
+
+              if (createdApiResource) {
+                void mutate(conditional(data && [...data, createdApiResource]));
+              }
+            }}
+          />
+        </Modal>
       </div>
       <table className={styles.table}>
         <thead>

packages/console/src/scss/_underscore.scss

@@ -14,3 +14,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+@mixin form-text-field {
+  width: 556px;
+}