fix: add secret settings tab to secret sharing page

This commit is contained in:
Scott Wilson
2025-10-21 09:45:21 -07:00
parent b6694b0356
commit bd57640313
16 changed files with 34 additions and 165 deletions
@@ -6,11 +6,13 @@ import { ROUTE_PATHS } from "@app/const/routes";
import { useOrganization } from "@app/context";
import { RequestSecretTab } from "./components/RequestSecret/RequestSecretTab";
import { SecretSharingSettingsTab } from "./components/SecretSharingSettings/SecretSharingSettingsTab";
import { ShareSecretTab } from "./components/ShareSecret/ShareSecretTab";
enum SecretSharingPageTabs {
ShareSecret = "share-secret",
RequestSecret = "request-secret"
RequestSecret = "request-secret",
Settings = "settings"
}
export const ShareSecretSection = () => {
@@ -46,6 +48,11 @@ export const ShareSecretSection = () => {
<Tab variant={tabVariant} value={SecretSharingPageTabs.RequestSecret}>
Request Secrets
</Tab>
{!isSubOrganization && (
<Tab variant={tabVariant} value={SecretSharingPageTabs.Settings}>
Settings
</Tab>
)}
</TabList>
<TabPanel value={SecretSharingPageTabs.ShareSecret}>
<ShareSecretTab />
@@ -53,6 +60,9 @@ export const ShareSecretSection = () => {
<TabPanel value={SecretSharingPageTabs.RequestSecret}>
<RequestSecretTab />
</TabPanel>
<TabPanel value={SecretSharingPageTabs.Settings}>
<SecretSharingSettingsTab />
</TabPanel>
</Tabs>
</div>
);
@@ -0,0 +1,21 @@
import { OrgPermissionSubjects } from "@app/context";
import { OrgPermissionSecretShareAction } from "@app/context/OrgPermissionContext/types";
import { withPermission } from "@app/hoc";
import { OrgSecretShareLimitSection } from "./OrgSecretShareLimitSection";
import { SecretSharingAllowShareToAnyone } from "./SecretSharingAllowShareToAnyone";
export const SecretSharingSettingsTab = withPermission(
() => {
return (
<div className="w-full">
<SecretSharingAllowShareToAnyone />
<OrgSecretShareLimitSection />
</div>
);
},
{
action: OrgPermissionSecretShareAction.ManageSettings,
subject: OrgPermissionSubjects.SecretShare
}
);
@@ -1,40 +0,0 @@
import { Helmet } from "react-helmet";
import { useTranslation } from "react-i18next";
import { PageHeader } from "@app/components/v2";
import { useOrganization } from "@app/context";
import {
OrgPermissionSecretShareAction,
OrgPermissionSubjects
} from "@app/context/OrgPermissionContext/types";
import { withPermission } from "@app/hoc";
import { SecretSharingSettingsTabGroup } from "./components";
export const SecretSharingSettingsPage = withPermission(
() => {
const { t } = useTranslation();
const { isSubOrganization } = useOrganization();
return (
<>
<Helmet>
<title>{t("common.head-title", { title: "Secret Share Settings" })}</title>
</Helmet>
<div className="flex w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-8xl">
<PageHeader
scope={isSubOrganization ? "namespace" : "org"}
title="Secret Share Settings"
/>
<SecretSharingSettingsTabGroup />
</div>
</div>
</>
);
},
{
action: OrgPermissionSecretShareAction.ManageSettings,
subject: OrgPermissionSubjects.SecretShare
}
);
@@ -1 +0,0 @@
export { OrgSecretShareLimitSection } from "./OrgSecretShareLimitSection";
@@ -1 +0,0 @@
export { SecretSharingAllowShareToAnyone } from "./SecretSharingAllowShareToAnyone";
@@ -1,11 +0,0 @@
import { OrgSecretShareLimitSection } from "../OrgSecretShareLimitSection";
import { SecretSharingAllowShareToAnyone } from "../SecretSharingAllowShareToAnyone";
export const SecretSharingSettingsGeneralTab = () => {
return (
<div className="w-full">
<SecretSharingAllowShareToAnyone />
<OrgSecretShareLimitSection />
</div>
);
};
@@ -1 +0,0 @@
export { SecretSharingSettingsGeneralTab } from "./SecretSharingSettingsGeneralTab";
@@ -1,39 +0,0 @@
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>
);
};
@@ -1 +0,0 @@
export { SecretSharingSettingsTabGroup } from "./SecretSharingSettingsTabGroup";
@@ -1 +0,0 @@
export { SecretSharingSettingsTabGroup } from "./SecretSharingSettingsTabGroup";
@@ -1,30 +0,0 @@
import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
import { zodValidator } from "@tanstack/zod-adapter";
import { z } from "zod";
import { SecretSharingSettingsPage } from "./SecretSharingSettingsPage";
const SettingsPageQueryParams = z.object({
selectedTab: z.string().catch("")
});
export const Route = createFileRoute(
"/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/settings"
)({
component: SecretSharingSettingsPage,
validateSearch: zodValidator(SettingsPageQueryParams),
search: {
middlewares: [stripSearchParams({ selectedTab: "" })]
},
context: () => ({
breadcrumbs: [
{
label: "Secret Sharing",
link: linkOptions({ to: "/organization/secret-sharing" })
},
{
label: "Settings"
}
]
})
});