web:create event types

web/src/common/components/Button/Button.module.css

@@ -1,3 +1,3 @@
 .root {
-  cursor: pointer;
+  cursor: pointer !important;
 }

web/src/common/components/Input/Input.tsx

@@ -27,8 +27,17 @@ type ButtonType =
 
 export const Input = forwardRef<HTMLInputElement, Props>(
   function Input(props, ref) {
-    const { onChange, error, id, name, placeholder, label, type, required } =
-      props;
+    const {
+      onChange,
+      onInput,
+      error,
+      id,
+      name,
+      placeholder,
+      label,
+      type,
+      required,
+    } = props;
     return (
       <Flex direction="column" gap="1">
         {label && (
@@ -49,6 +58,7 @@ export const Input = forwardRef<HTMLInputElement, Props>(
           name={name}
           required={required}
           onChange={onChange}
+          onInput={onInput}
           className={styles.input}
           placeholder={placeholder}
           type={type as ButtonType}
@@ -63,5 +73,5 @@ export const Input = forwardRef<HTMLInputElement, Props>(
         )}
       </Flex>
     );
-  },
+  }
 );

web/src/common/components/InputArea/InputArea.module.css

@@ -0,0 +1,6 @@
+.input {
+  /* Fix radix's input issue */
+  input[type="date"] {
+    display: block;
+  }
+}

web/src/common/components/InputArea/InputArea.tsx

@@ -0,0 +1,47 @@
+import * as Label from "@radix-ui/react-label";
+import { Flex, Text, TextArea } from "@radix-ui/themes";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+import styles from "./InputArea.module.css";
+
+interface Props extends ComponentPropsWithoutRef<"textarea"> {
+  label?: string;
+  error?: string;
+  "data-testid"?: string;
+}
+
+export const InputArea = forwardRef<HTMLTextAreaElement, Props>(
+  function InputArea(props, ref) {
+    const { onChange, error, id, name, placeholder, label, required } = props;
+    return (
+      <Flex direction="column" gap="1">
+        {label && (
+          <Label.Root htmlFor={name}>
+            <Text weight="bold" size="2">
+              {label}
+            </Text>
+            {required && (
+              <Text color="red" weight="bold" size="2">
+                *
+              </Text>
+            )}
+          </Label.Root>
+        )}
+        <TextArea
+          id={id}
+          ref={ref}
+          name={name}
+          required={required}
+          onChange={onChange}
+          className={styles.input}
+          placeholder={placeholder}
+          data-testid={props["data-testid"]}
+        />
+        {error && (
+          <Text size="2" color="red">
+            {error}
+          </Text>
+        )}
+      </Flex>
+    );
+  }
+);

web/src/main.tsx

@@ -19,6 +19,7 @@ import {
   RouterProvider,
 } from "react-router-dom";
 import { config } from "./config";
+import { CreateEventTypePage } from "./views/Dashboard/CreateEventTypePage";
 
 const basePath = config.basePath;
 
@@ -46,6 +47,10 @@ const router = createBrowserRouter([
         path: "event-types",
         element: <EventTypesPage />,
       },
+      {
+        path: "event-types/create",
+        element: <CreateEventTypePage />,
+      },
       {
         path: "event-types/:eventTypeId",
         element: <EventTypePage />,
@@ -65,5 +70,5 @@ createRoot(document.getElementById("root")!).render(
         <RouterProvider router={router} />
       </Theme>
     </HelmetProvider>
-  </StrictMode>,
+  </StrictMode>
 );

web/src/modules/ApiKeys/CreateApiKey/CreateApiKey.tsx

@@ -67,10 +67,10 @@ export function CreateApiKey({ onSuccess }: Props) {
 
           <Flex direction="column" gap="2">
             <Input
-              label="Name"
               required
-              name="name"
               id="name"
+              name="name"
+              label="Name"
               onChange={f.handleChange}
               error={f.errors.name}
             />

web/src/modules/ListEventTypes/ListEventTypes.tsx

@@ -67,7 +67,6 @@ export function ListEventTypes() {
                 </Link>
               </Table.RowHeaderCell>
               <Table.RowHeaderCell>
-                {eventType.description.length}
                 {eventType.description.length > 70
                   ? `${eventType.description.substring(0, 67).trimEnd()}...`
                   : eventType.description}

web/src/paths.ts

@@ -1,9 +1,11 @@
 import { useParams } from "react-router-dom";
 import { config } from "./config";
 
-export function getPaths(environment: string) {
+export function getPaths(env: string) {
   return {
-    dashboardHomepage: `${config.basePath}/${environment}`,
+    dashboardHomepage: `${config.basePath}/${env}`,
+    eventTypes: `${config.basePath}/${env}/event-types`,
+    createEventType: `${config.basePath}/${env}/event-types/create`,
   };
 }
 

web/src/views/Dashboard/CreateEventTypePage.tsx

@@ -0,0 +1,95 @@
+import { Alert } from "@@/common/components/Alert/Alert";
+import { Button } from "@@/common/components/Button/Button";
+import { Input } from "@@/common/components/Input/Input";
+import { InputArea } from "@@/common/components/InputArea/InputArea";
+import { PageMeta } from "@@/common/components/PageMeta/PageMeta";
+import { PageTitle } from "@@/common/components/PageTitle/PageTitle";
+import { apiClients, getApiError } from "@@/common/libs/backendapi/browser";
+import { usePaths } from "@@/paths";
+import { Flex, Grid } from "@radix-ui/themes";
+import { useFormik } from "formik";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import * as yup from "yup";
+
+export function CreateEventTypePage() {
+  const paths = usePaths();
+  const navigate = useNavigate();
+  const [error, setError] = useState("");
+
+  const f = useFormik({
+    initialValues,
+    validateOnChange: false,
+    validationSchema,
+    onSubmit: async (values) => {
+      console.log(values);
+      try {
+        await apiClients().EventTypes.createEventType(values);
+        navigate(paths.urls.eventTypes);
+      } catch (error) {
+        setError(getApiError(error));
+      }
+    },
+  });
+
+  return (
+    <form onSubmitCapture={f.handleSubmit}>
+      <PageMeta title="Create event type" />
+
+      <Flex justify="between" mb="4">
+        <PageTitle title="Create event type" />
+      </Flex>
+
+      <Flex direction="column" gap="2" mb="4">
+        <Input
+          required
+          id="name"
+          name="name"
+          label="Name"
+          error={f.errors.name}
+          onChange={f.handleChange}
+        />
+        <InputArea
+          id="description"
+          label="Description"
+          name="description"
+          onChange={f.handleChange}
+          error={f.errors.description}
+        />
+      </Flex>
+
+      <Grid gap="2" justify="between" columns="2" width="200px" mb="4">
+        <Button
+          type="button"
+          color="gray"
+          variant="outline"
+          disabled={f.isSubmitting}
+          onClick={() => navigate(paths.urls.eventTypes)}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="submit"
+          loading={f.isSubmitting}
+          disabled={f.isSubmitting}
+        >
+          Save
+        </Button>
+      </Grid>
+
+      {error && <Alert color="red">{error}</Alert>}
+    </form>
+  );
+}
+
+function validationSchema() {
+  return yup.object().shape({
+    name: yup.string().required(),
+    description: yup.string().optional(),
+  });
+}
+
+const initialValues = {
+  name: "",
+  description: "",
+};

web/src/views/Dashboard/EventTypesPage.tsx

@@ -1,14 +1,22 @@
 import { PageMeta } from "@@/common/components/PageMeta/PageMeta";
 import { PageTitle } from "@@/common/components/PageTitle/PageTitle";
+
 import { ListEventTypes } from "@@/modules/ListEventTypes/ListEventTypes";
-import { Flex } from "@radix-ui/themes";
+import { usePaths } from "@@/paths";
+import { Button, Flex } from "@radix-ui/themes";
+import { useNavigate } from "react-router-dom";
 
 export default function EventTypesPage() {
+  const navigate = useNavigate();
+  const paths = usePaths();
   return (
     <>
       <PageMeta title="Event types" />
       <Flex justify="between" mb="4">
         <PageTitle title="Event types" />
+        <Button onClick={() => navigate(paths.urls.createEventType)}>
+          Create event type
+        </Button>
       </Flex>
 
       <ListEventTypes />