Feat: Clear select option

frontend/src/components/v2/Select/Select.tsx

@@ -36,61 +36,73 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
     ref
   ): JSX.Element => {
     return (
-      <SelectPrimitive.Root {...props} disabled={isDisabled}>
-        <SelectPrimitive.Trigger
-          ref={ref}
-          className={twMerge(
-            `inline-flex items-center justify-between rounded-md
-            bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-200`,
-            className,
-            isDisabled && "cursor-not-allowed opacity-50"
-          )}
-        >
-          <SelectPrimitive.Value placeholder={placeholder}>
-            {props.icon ? <FontAwesomeIcon icon={props.icon} /> : placeholder}
-          </SelectPrimitive.Value>
+      <div className="flex items-center space-x-2">
+        <SelectPrimitive.Root
+          {...props}
+          onValueChange={(value) => {
+            if (!props.onValueChange) return;
 
-          <SelectPrimitive.Icon className="ml-3">
-            <FontAwesomeIcon
-              icon={faCaretDown}
-              size="sm"
-              className={twMerge(isDisabled && "opacity-30")}
-            />
-          </SelectPrimitive.Icon>
-        </SelectPrimitive.Trigger>
-        <SelectPrimitive.Portal>
-          <SelectPrimitive.Content
+            const newValue = value === "EMPTY-VALUE" ? "" : value;
+            props.onValueChange(newValue);
+          }}
+          disabled={isDisabled}
+        >
+          <SelectPrimitive.Trigger
+            ref={ref}
             className={twMerge(
-              "relative top-1 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
-              position === "popper" && "max-h-72",
-              dropdownContainerClassName
+              `inline-flex items-center justify-between rounded-md
+            bg-mineshaft-900 px-3 py-2 font-inter text-sm font-normal text-bunker-200 outline-none focus:bg-mineshaft-700/80 data-[placeholder]:text-mineshaft-200`,
+              className,
+              isDisabled && "cursor-not-allowed opacity-50"
             )}
-            position={position}
-            style={{ width: "var(--radix-select-trigger-width)" }}
           >
-            <SelectPrimitive.ScrollUpButton>
-              <div className="flex items-center justify-center">
-                <FontAwesomeIcon icon={faCaretUp} size="sm" />
-              </div>
-            </SelectPrimitive.ScrollUpButton>
-            <SelectPrimitive.Viewport className="p-1">
-              {isLoading ? (
-                <div className="flex items-center justify-center">
-                  <Spinner size="xs" />
-                  <span className="ml-2 text-xs text-gray-500">Loading...</span>
-                </div>
-              ) : (
-                children
+            <div className="flex items-center space-x-2">
+              {props.icon && <FontAwesomeIcon icon={props.icon} />}
+              <SelectPrimitive.Value placeholder={placeholder} />
+            </div>
+
+            <SelectPrimitive.Icon className="ml-3">
+              <FontAwesomeIcon
+                icon={faCaretDown}
+                size="sm"
+                className={twMerge(isDisabled && "opacity-30")}
+              />
+            </SelectPrimitive.Icon>
+          </SelectPrimitive.Trigger>
+          <SelectPrimitive.Portal>
+            <SelectPrimitive.Content
+              className={twMerge(
+                "relative top-1 z-[100] overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-900 font-inter text-bunker-100 shadow-md",
+                position === "popper" && "max-h-72",
+                dropdownContainerClassName
               )}
-            </SelectPrimitive.Viewport>
-            <SelectPrimitive.ScrollDownButton>
-              <div className="flex items-center justify-center">
-                <FontAwesomeIcon icon={faCaretDown} size="sm" />
-              </div>
-            </SelectPrimitive.ScrollDownButton>
-          </SelectPrimitive.Content>
-        </SelectPrimitive.Portal>
-      </SelectPrimitive.Root>
+              position={position}
+              style={{ width: "var(--radix-select-trigger-width)" }}
+            >
+              <SelectPrimitive.ScrollUpButton>
+                <div className="flex items-center justify-center">
+                  <FontAwesomeIcon icon={faCaretUp} size="sm" />
+                </div>
+              </SelectPrimitive.ScrollUpButton>
+              <SelectPrimitive.Viewport className="p-1">
+                {isLoading ? (
+                  <div className="flex items-center justify-center">
+                    <Spinner size="xs" />
+                    <span className="ml-2 text-xs text-gray-500">Loading...</span>
+                  </div>
+                ) : (
+                  children
+                )}
+              </SelectPrimitive.Viewport>
+              <SelectPrimitive.ScrollDownButton>
+                <div className="flex items-center justify-center">
+                  <FontAwesomeIcon icon={faCaretDown} size="sm" />
+                </div>
+              </SelectPrimitive.ScrollDownButton>
+            </SelectPrimitive.Content>
+          </SelectPrimitive.Portal>
+        </SelectPrimitive.Root>
+      </div>
     );
   }
 );
@@ -114,7 +126,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
           outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
           isSelected && "bg-primary",
           isDisabled &&
-          "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",
+            "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",
           className
         )}
         ref={forwardedRef}
@@ -129,3 +141,45 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
 );
 
 SelectItem.displayName = "SelectItem";
+
+export type SelectClearProps = Omit<SelectItemProps, "disabled" | "value"> & {
+  onClear: () => void;
+  selectValue: string;
+};
+
+export const SelectClear = forwardRef<HTMLDivElement, SelectClearProps>(
+  (
+    { children, className, isSelected, isDisabled, onClear, selectValue, ...props },
+    forwardedRef
+  ) => {
+    return (
+      <SelectPrimitive.Item
+        {...props}
+        value="EMPTY-VALUE"
+        onSelect={() => onClear()}
+        onClick={() => onClear()}
+        className={twMerge(
+          `relative mb-0.5 flex
+          cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
+          outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-700/80`,
+          isSelected && "bg-primary",
+          isDisabled &&
+            "cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600",
+          className
+        )}
+        ref={forwardedRef}
+      >
+        <div
+          className={twMerge(
+            "absolute left-3.5 text-primary",
+            selectValue === "" ? "visible" : "hidden"
+          )}
+        >
+          <FontAwesomeIcon icon={faCheck} />
+        </div>
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      </SelectPrimitive.Item>
+    );
+  }
+);
+SelectClear.displayName = "SelectClear";

frontend/src/components/v2/Select/index.tsx

@@ -1,2 +1,2 @@
 export type { SelectItemProps, SelectProps } from "./Select";
-export { Select, SelectItem } from "./Select";
+export { Select, SelectClear, SelectItem } from "./Select";

frontend/src/views/admin/DashboardPage/DashboardPage.tsx

@@ -13,6 +13,7 @@ import {
   FormControl,
   Input,
   Select,
+  SelectClear,
   SelectItem,
   Switch,
   Tab,
@@ -68,7 +69,8 @@ export const AdminDashboardPage = () => {
     }
   });
 
-  const signupMode = watch("signUpMode");
+  const signUpMode = watch("signUpMode");
+  const defaultAuthOrgId = watch("defaultAuthOrgId");
 
   const { user, isLoading: isUserLoading } = useUser();
   const { orgs } = useOrganization();
@@ -90,14 +92,7 @@ export const AdminDashboardPage = () => {
 
   const onFormSubmit = async (formData: TDashboardForm) => {
     try {
-      const {
-        signUpMode,
-        allowedSignUpDomain,
-        trustSamlEmails,
-        trustLdapEmails,
-        trustOidcEmails,
-        defaultAuthOrgId
-      } = formData;
+      const { allowedSignUpDomain, trustSamlEmails, trustLdapEmails, trustOidcEmails } = formData;
 
       await updateServerConfig({
         defaultAuthOrgId: defaultAuthOrgId || null,
@@ -175,7 +170,7 @@ export const AdminDashboardPage = () => {
                     )}
                   />
                 </div>
-                {signupMode === "anyone" && (
+                {signUpMode === "anyone" && (
                   <div className="flex flex-col justify-start">
                     <div className="mb-4 text-xl font-semibold text-mineshaft-100">
                       Restrict signup by email domain(s)
@@ -222,19 +217,22 @@ export const AdminDashboardPage = () => {
                         isError={Boolean(error)}
                       >
                         <Select
+                          placeholder="Allow all organizations"
                           className="w-full bg-mineshaft-700"
                           dropdownContainerClassName="bg-mineshaft-800"
                           defaultValue={field.value ?? " "}
-                          onValueChange={(e) => {
-                            if (e === "EMPTY") {
-                              onChange("");
-                              return;
-                            }
-                            onChange(e);
-                          }}
+                          onValueChange={(e) => onChange(e)}
                           {...field}
                         >
-                          <SelectItem value="EMPTY">Select organization...</SelectItem>
+                          <SelectClear
+                            selectValue={defaultAuthOrgId}
+                            onClear={() => {
+                              console.log("clearing");
+                              onChange("");
+                            }}
+                          >
+                            Allow all organizations
+                          </SelectClear>
                           {organizations.data?.map((org) => (
                             <SelectItem key={org.id} value={org.id}>
                               {org.name}