feat: works, but still need adjustments

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasForm.tsx

@@ -0,0 +1,87 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button, Input } from '@chakra-ui/react';
+
+import style from './UrlAliasPanel.module.scss';
+
+export type UrlAliasFormValues = {
+  alias?: string;
+  pathAndParams?: string;
+  enabled?: boolean;
+};
+
+interface UrlAliasFormProps {
+  alias?: string;
+  enabled?: boolean;
+  pathAndParams?: string;
+  onCancel: () => void;
+  onSubmit: (values: UrlAliasFormValues) => Promise<void>;
+  submitError: string | null;
+}
+
+export default function UrlAliasForm({
+  onSubmit,
+  onCancel,
+  submitError,
+  alias,
+  enabled,
+  pathAndParams,
+}: UrlAliasFormProps) {
+  const {
+    handleSubmit,
+    register,
+    formState: { isSubmitting, isValid },
+    setFocus,
+  } = useForm<UrlAliasFormValues>({
+    defaultValues: { alias, pathAndParams, enabled },
+    values: { alias, pathAndParams, enabled },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  useEffect(() => {
+    setFocus('alias');
+  }, [setFocus]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className={style.form}>
+      <div className={style.formInput}>
+        <Input
+          variant='ontime-filled'
+          size='sm'
+          maxLength={50}
+          placeholder='Alias'
+          autoComplete='off'
+          {...register('alias')}
+        />
+      </div>
+      <div className={style.formInput}>
+        <Input
+          variant='ontime-filled'
+          size='sm'
+          maxLength={100}
+          placeholder='Path and params'
+          autoComplete='off'
+          {...register('pathAndParams')}
+        />
+      </div>
+      <div className={style.actionButtons}>
+        <Button onClick={onCancel} variant='ontime-ghosted' size='sm'>
+          Cancel
+        </Button>
+        <Button
+          isDisabled={!isValid}
+          type='submit'
+          isLoading={isSubmitting}
+          variant='ontime-filled'
+          padding='0 2em'
+          size='sm'
+        >
+          Update
+        </Button>
+      </div>
+      {submitError && <span className={style.error}>{submitError}</span>}
+    </form>
+  );
+}

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasListItem.tsx

@@ -4,6 +4,8 @@ import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHoriz
 
 import { updateAliases } from '../../../../common/api/ontimeApi';
 
+import UrlAliasForm, { UrlAliasFormValues } from './UrlAliasForm';
+
 interface UrlAliasListItemProps {
   alias: string;
   enabled: boolean;
@@ -29,6 +31,18 @@ export default function UrlAliasListItem({ alias, enabled, pathAndParams, onRefe
     setIsEditing(!isEditing);
   }, [isEditing]);
 
+  const handleSubmitUpdate = useCallback(
+    async (values: UrlAliasFormValues) => {
+      try {
+        await updateAliases(values);
+        await onRefetch();
+      } catch (error) {
+        // some error handling here
+      }
+    },
+    [onRefetch],
+  );
+
   const handleRenderAliases = useMemo(() => {
     if (!isEditing) {
       return (
@@ -56,18 +70,22 @@ export default function UrlAliasListItem({ alias, enabled, pathAndParams, onRefe
         </>
       );
     } else {
-      // Return a form
-      return null;
+      return (
+        <td colSpan={99}>
+          <UrlAliasForm
+            alias={alias}
+            enabled={enabled}
+            pathAndParams={pathAndParams}
+            onCancel={handleToggleEditMode}
+            onSubmit={handleSubmitUpdate}
+            submitError=''
+          />
+        </td>
+      );
     }
-  }, [alias, enabled, handleToggle, handleToggleEditMode, isEditing, pathAndParams]);
+  }, [alias, enabled, handleSubmitUpdate, handleToggle, handleToggleEditMode, isEditing, pathAndParams]);
 
-  return (
-    <tr key={alias}>
-      {handleRenderAliases}
-      {/* <td>{new Date(updatedAt).toLocaleString()}</td>
-      <td className={style.actionButton}></td> */}
-    </tr>
-  );
+  return <tr key={alias}>{handleRenderAliases}</tr>;
 }
 
 function ActionMenu({ onChangeEditMode }: { onChangeEditMode: () => void }) {

apps/client/src/features/app-settings/panel/url-alias-panel/UrlAliasPanel.module.scss

@@ -0,0 +1,18 @@
+.form {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.formInput {
+  flex: 2;
+  padding-right: 1rem;
+}
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 1rem;
+}