Refactor collection creation UI (#6485)

* Iteration, before functional component

* Use react-hook-form, shared form for new and edit

* Avoid negative margin on input prefix

* Centered now default for modals

app/components/InputSelectPermission.tsx

@@ -3,33 +3,31 @@ import { useTranslation } from "react-i18next";
 import { $Diff } from "utility-types";
 import { CollectionPermission } from "@shared/types";
 import { EmptySelectValue } from "~/types";
-import InputSelect, { Props, Option } from "./InputSelect";
+import InputSelect, { Props, Option, InputSelectRef } from "./InputSelect";
 
-export default function InputSelectPermission(
+function InputSelectPermission(
   props: $Diff<
     Props,
     {
       options: Array<Option>;
       ariaLabel: string;
     }
-  >
+  >,
+  ref: React.RefObject<InputSelectRef>
 ) {
   const { value, onChange, ...rest } = props;
   const { t } = useTranslation();
   const handleChange = React.useCallback(
     (value) => {
-      if (value === EmptySelectValue) {
-        value = null;
-      }
-
-      onChange?.(value);
+      onChange?.(value === EmptySelectValue ? null : value);
     },
     [onChange]
   );
 
   return (
     <InputSelect
-      label={t("Default access")}
+      ref={ref}
+      label={t("Permission")}
       options={[
         {
           label: t("Can edit"),
@@ -51,3 +49,5 @@ export default function InputSelectPermission(
     />
   );
 }
+
+export default React.forwardRef(InputSelectPermission);