Added new option to enable/disable option to share secrets with anyone

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingAllowShareToAnyone/SecretSharingAllowShareToAnyone.tsx

@@ -0,0 +1,58 @@
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Switch } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+
+export const SecretSharingAllowShareToAnyone = () => {
+  const { currentOrg } = useOrganization();
+  const { mutateAsync } = useUpdateOrg();
+
+  const handleSecretSharingToggle = async (value: boolean) => {
+    try {
+      if (!currentOrg?.id) return;
+
+      await mutateAsync({
+        orgId: currentOrg.id,
+        secretShareSendToAnyone: value
+      });
+
+      createNotification({
+        text: `Successfully ${value ? "enabled" : "disabled"} secret sharing to members outside of this organization`,
+        type: "success"
+      });
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: (err as { response: { data: { message: string } } }).response.data.message,
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
+      <div className="py-4">
+        <div className="mb-2 flex justify-between">
+          <h3 className="text-md text-mineshaft-100">
+            Allow sharing secrets to members outside of this organization
+          </h3>
+          <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+            {(isAllowed) => (
+              <Switch
+                id="enable-secret-sharing-outside-org"
+                onCheckedChange={(value) => handleSecretSharingToggle(value)}
+                isChecked={currentOrg?.secretShareSendToAnyone ?? false}
+                isDisabled={!isAllowed}
+              />
+            )}
+          </OrgPermissionCan>
+        </div>
+        <p className="text-sm text-mineshaft-300">
+          If enabled, team members will be able to share secrets to members outside of this
+          organization
+        </p>
+      </div>
+    </div>
+  );
+};

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingAllowShareToAnyone/index.tsx

@@ -0,0 +1 @@
+export { SecretSharingAllowShareToAnyone } from "./SecretSharingAllowShareToAnyone";

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingSettingsGeneralTab/SecretSharingSettingsGeneralTab.tsx

@@ -0,0 +1,9 @@
+import { SecretSharingAllowShareToAnyone } from "../SecretSharingAllowShareToAnyone";
+
+export const SecretSharingSettingsGeneralTab = () => {
+  return (
+    <div className="w-full">
+      <SecretSharingAllowShareToAnyone />
+    </div>
+  );
+};

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingSettingsGeneralTab/index.tsx

@@ -0,0 +1 @@
+export { SecretSharingSettingsGeneralTab } from "./SecretSharingSettingsGeneralTab";

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingSettingsTabGroup/SecretSharingSettingsTabGroup.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useSearch } from "@tanstack/react-router";
+
+import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+
+import { SecretSharingSettingsGeneralTab } from "../SecretSharingSettingsGeneralTab";
+
+export const SecretSharingSettingsTabGroup = () => {
+  const search = useSearch({
+    from: ROUTE_PATHS.Organization.SecretSharingSettings.id
+  });
+  const tabs = [
+    {
+      name: "General",
+      key: "tab-secret-sharing-general",
+      component: SecretSharingSettingsGeneralTab
+    }
+  ];
+
+  const [selectedTab, setSelectedTab] = useState(search.selectedTab || tabs[0].key);
+
+  return (
+    <Tabs value={selectedTab} onValueChange={setSelectedTab}>
+      <TabList>
+        {tabs.map((tab) => (
+          <Tab value={tab.key} key={tab.key}>
+            {tab.name}
+          </Tab>
+        ))}
+      </TabList>
+      {tabs.map(({ key, component: Component }) => (
+        <TabPanel value={key} key={`tab-panel-${key}`}>
+          <Component />
+        </TabPanel>
+      ))}
+    </Tabs>
+  );
+};

frontend/src/pages/organization/SecretSharingSettingsPage/components/SecretSharingSettingsTabGroup/index.tsx

@@ -0,0 +1 @@
+export { SecretSharingSettingsTabGroup } from "./SecretSharingSettingsTabGroup";

frontend/src/pages/organization/SecretSharingSettingsPage/components/index.tsx

@@ -0,0 +1 @@
+export { SecretSharingSettingsTabGroup } from "./SecretSharingSettingsTabGroup";