fix: use dropdown instead of switch

frontend/src/views/ShareSecretPage/components/AddShareSecretModal.tsx

@@ -21,7 +21,6 @@ import {
   SecretInput,
   Select,
   SelectItem,
-  Switch
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { useTimedReset } from "@app/hooks";
@@ -62,7 +61,8 @@ const expirationUnitsAndActions = [
 ];
 
 const schema = yup.object({
-  value: yup.string().max(1000).required().label("Shared Secret Value"),
+  value: yup.string().max(10000).required().label("Shared Secret Value"),
+  expiryOption: yup.string().optional().label("Expiration Option").default("Time"),
   expiresAfterViews: yup.number().min(1).optional().label("Expires After Views"),
   expiresInValue: yup.number().min(1).optional().label("Expiration Value"),
   expiresInUnit: yup.string().optional().label("Expiration Unit")
@@ -90,7 +90,7 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
   const createSharedSecret = useCreateSharedSecret();
   const { currentOrg } = useOrganization();
   const [newSharedSecret, setnewSharedSecret] = useState("");
-  const [expiryOption, setExpiryOption] = useState<"time" | "views">("time");
+  const [expiryOption, setExpiryOption] = useState<"Time" | "Views">("Time");
   const hasSharedSecret = Boolean(newSharedSecret);
   const [isUrlCopied, , setIsUrlCopied] = useTimedReset<boolean>({
     initialState: false
@@ -134,8 +134,8 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
         iv,
         tag,
         hashedHex,
-        expiresAt: expiryOption === "time" ? expiresAt : undefined,
+        expiresAt: expiryOption === "Time" ? expiresAt : undefined,
-        expiresAfterViews: expiryOption === "views" ? expiresAfterViews : undefined
+        expiresAfterViews: expiryOption === "Views" ? expiresAfterViews : undefined
       });
       setnewSharedSecret(
         `${window.location.origin}/shared/secret/${id}?key=${encodeURIComponent(
@@ -197,26 +197,37 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
                 </FormControl>
               )}
             />
-            <div>
+            <div className="flex w-full flex-row">
-              <p className="mb-2 flex items-center text-sm font-normal text-mineshaft-400">
+              <div className="flex w-1/5">
-                Set Expiry Based On
+                <Controller
-              </p>
+                  control={control}
-              <div className="mb-4 flex w-full flex-row justify-start">
+                  name="expiryOption"
-                <p className="mb-0.5 mr-1 flex items-center text-sm font-normal text-mineshaft-400">
+                  defaultValue="Time"
-                  Time
+                  render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                </p>
+                    <FormControl
-                <Switch
+                      label="Expire On"
-                  id="expiryOption"
+                      errorText={error?.message}
-                  onCheckedChange={(value) => setExpiryOption(value ? "views" : "time")}
+                      isError={Boolean(error)}
-                  isChecked={expiryOption === "views"}
+                    >
+                      <Select
+                        defaultValue={field.value}
+                        {...field}
+                        onValueChange={(e: "Time" | "Views") => setExpiryOption(e)}
+                        value={expiryOption}
+                        className="w-full"
+                      >
+                        {["Time", "Views"].map((unit) => (
+                          <SelectItem value={unit} key={unit}>
+                            {unit}
+                          </SelectItem>
+                        ))}
+                      </Select>
+                    </FormControl>
+                  )}
                 />
-                <p className="mb-0.5 ml-3 flex items-center text-sm font-normal text-mineshaft-400">
-                  Views
-                </p>
               </div>
-            </div>
+              <div className="flex w-4/5">
-            <div>
+                {expiryOption === "Views" ? (
-              {expiryOption === "views" ? (
                   <Controller
                     control={control}
                     name="expiresAfterViews"
@@ -233,7 +244,7 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
                     )}
                   />
                 ) : (
-                <div className="flex w-full flex-row justify-end">
+                  <div className="flex w-full">
                     <div className="w-3/5">
                       <Controller
                         control={control}
@@ -280,6 +291,7 @@ export const AddShareSecretModal = ({ popUp, handlePopUpToggle }: Props) => {
                   </div>
                 )}
               </div>
+            </div>
             <div className="flex items-center">
               <Button
                 className="mr-4"