From 2c402fbbb6219d2c3d65624a874f4d7ca549c0ee Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Wed, 27 Nov 2024 01:31:11 +0400 Subject: [PATCH 01/35] Update NavHeader.tsx --- .../src/components/navigation/NavHeader.tsx | 50 +++++++++++++++++-- 1 file changed, 45 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx index 715d8c51d..59f97a1a5 100644 --- a/frontend/src/components/navigation/NavHeader.tsx +++ b/frontend/src/components/navigation/NavHeader.tsx @@ -1,11 +1,15 @@ +import { ParsedUrlQuery } from "querystring"; + import Link from "next/link"; import { useRouter } from "next/router"; -import { faAngleRight, faLock } from "@fortawesome/free-solid-svg-icons"; +import { faAngleRight, faCheck, faCopy, faLock } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useOrganization, useWorkspace } from "@app/context"; +import { useToggle } from "@app/hooks"; -import { Select, SelectItem, Tooltip } from "../v2"; +import { createNotification } from "../notifications"; +import { IconButton, Select, SelectItem, Tooltip } from "../v2"; type Props = { pageName: string; @@ -50,6 +54,9 @@ export default function NavHeader({ }: Props): JSX.Element { const { currentWorkspace } = useWorkspace(); const { currentOrg } = useOrganization(); + + const [isCopied, { timedToggle: toggleIsCopied }] = useToggle(false); + const router = useRouter(); const secretPathSegments = secretPath.split("/").filter(Boolean); @@ -132,8 +139,10 @@ export default function NavHeader({ )} {isFolderMode && secretPathSegments?.map((folderName, index) => { - const query = { ...router.query }; - query.secretPath = `/${secretPathSegments.slice(0, index + 1).join("/")}`; + const query: ParsedUrlQuery & { secretPath: string } = { + ...router.query, + secretPath: `/${secretPathSegments.slice(0, index + 1).join("/")}` + }; return (
{index + 1 === secretPathSegments?.length ? ( - {folderName} +
+ {folderName} + + { + if (isCopied) return; + + navigator.clipboard.writeText(query.secretPath); + + createNotification({ + text: "Copied secret path to clipboard", + type: "info" + }); + + toggleIsCopied(2000); + }} + className="hover:bg-bunker-100/10" + > + + + +
) : ( Date: Wed, 27 Nov 2024 15:37:17 -0800 Subject: [PATCH 02/35] improvement: refactor sidebar project select to support filtering with UI adjustments --- .../v2/FilterableSelect/FilterableSelect.tsx | 8 +- frontend/src/layouts/AppLayout/AppLayout.tsx | 182 +-------------- .../ProjectSelect/ProjectSelect.tsx | 214 ++++++++++++++++++ .../components/ProjectSelect/index.ts | 1 + 4 files changed, 228 insertions(+), 177 deletions(-) create mode 100644 frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx create mode 100644 frontend/src/layouts/AppLayout/components/ProjectSelect/index.ts diff --git a/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx b/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx index 450b58aef..0f1fd61e5 100644 --- a/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx +++ b/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx @@ -32,7 +32,13 @@ export const FilterableSelect = ({ }) }} tabSelectsValue={tabSelectsValue} - components={{ DropdownIndicator, ClearIndicator, MultiValueRemove, Option }} + components={{ + DropdownIndicator, + ClearIndicator, + MultiValueRemove, + Option, + ...props.components + }} classNames={{ container: () => "w-full font-inter", control: ({ isFocused }) => diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx index 2d12b3eda..8c4f8e1c8 100644 --- a/frontend/src/layouts/AppLayout/AppLayout.tsx +++ b/frontend/src/layouts/AppLayout/AppLayout.tsx @@ -10,7 +10,6 @@ import { useTranslation } from "react-i18next"; import Link from "next/link"; import { useRouter } from "next/router"; import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons"; -import { faStar } from "@fortawesome/free-regular-svg-icons"; import { faAngleDown, faArrowLeft, @@ -22,15 +21,11 @@ import { faInfo, faMobile, faPlus, - faQuestion, - faStar as faSolidStar + faQuestion } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"; -import { twMerge } from "tailwind-merge"; -import { createNotification } from "@app/components/notifications"; -import { OrgPermissionCan } from "@app/components/permissions"; import { tempLocalStorage } from "@app/components/utilities/checks/tempLocalStorage"; import SecurityClient from "@app/components/utilities/SecurityClient"; import { @@ -39,20 +34,9 @@ import { DropdownMenuContent, DropdownMenuItem, Menu, - MenuItem, - Select, - SelectItem, - UpgradePlanModal + MenuItem } from "@app/components/v2"; -import { NewProjectModal } from "@app/components/v2/projects/NewProjectModal"; -import { - OrgPermissionActions, - OrgPermissionSubjects, - useOrganization, - useSubscription, - useUser, - useWorkspace -} from "@app/context"; +import { useOrganization, useSubscription, useUser, useWorkspace } from "@app/context"; import { usePopUp, useToggle } from "@app/hooks"; import { useGetAccessRequestsCount, @@ -62,11 +46,9 @@ import { useSelectOrganization } from "@app/hooks/api"; import { MfaMethod } from "@app/hooks/api/auth/types"; -import { Workspace } from "@app/hooks/api/types"; -import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation"; -import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries"; import { AuthMethod } from "@app/hooks/api/users/types"; import { InsecureConnectionBanner } from "@app/layouts/AppLayout/components/InsecureConnectionBanner"; +import { ProjectSelect } from "@app/layouts/AppLayout/components/ProjectSelect"; import { navigateUserToOrg } from "@app/views/Login/Login.utils"; import { Mfa } from "@app/views/Login/Mfa"; import { CreateOrgModal } from "@app/views/Org/components"; @@ -108,23 +90,10 @@ export const AppLayout = ({ children }: LayoutProps) => { const { workspaces, currentWorkspace } = useWorkspace(); const { orgs, currentOrg } = useOrganization(); - const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg?.id!); - const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites(); const [shouldShowMfa, toggleShowMfa] = useToggle(false); const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL); const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {}); - const workspacesWithFaveProp = useMemo( - () => - workspaces - .map((w): Workspace & { isFavorite: boolean } => ({ - ...w, - isFavorite: Boolean(projectFavorites?.includes(w.id)) - })) - .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite)), - [workspaces, projectFavorites] - ); - const { user } = useUser(); const { subscription } = useSubscription(); const workspaceId = currentWorkspace?.id || ""; @@ -137,17 +106,9 @@ export const AppLayout = ({ children }: LayoutProps) => { return (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0); }, [secretApprovalReqCount, accessApprovalRequestCount]); - const isAddingProjectsAllowed = subscription?.workspaceLimit - ? subscription.workspacesUsed < subscription.workspaceLimit - : true; - const infisicalPlatformVersion = process.env.NEXT_PUBLIC_INFISICAL_PLATFORM_VERSION; - const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ - "addNewWs", - "upgradePlan", - "createOrg" - ] as const); + const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const); const { t } = useTranslation(); @@ -230,38 +191,6 @@ export const AppLayout = ({ children }: LayoutProps) => { putUserInOrg(); }, [router.query.id]); - const addProjectToFavorites = async (projectId: string) => { - try { - if (currentOrg?.id) { - await updateUserProjectFavorites({ - orgId: currentOrg?.id, - projectFavorites: [...(projectFavorites || []), projectId] - }); - } - } catch (err) { - createNotification({ - text: "Failed to add project to favorites.", - type: "error" - }); - } - }; - - const removeProjectFromFavorites = async (projectId: string) => { - try { - if (currentOrg?.id) { - await updateUserProjectFavorites({ - orgId: currentOrg?.id, - projectFavorites: [...(projectFavorites || []).filter((entry) => entry !== projectId)] - }); - } - } catch (err) { - createNotification({ - text: "Failed to remove project from favorites.", - type: "error" - }); - } - }; - if (shouldShowMfa) { return (
@@ -448,97 +377,7 @@ export const AppLayout = ({ children }: LayoutProps) => { )} {!router.asPath.includes("org") && (!router.asPath.includes("personal") && currentWorkspace ? ( -
-

- Project -

- -
+ ) : (
@@ -816,15 +655,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
- handlePopUpToggle("addNewWs", isOpen)} - /> - handlePopUpToggle("upgradePlan", isOpen)} - text="You have exceeded the number of projects allowed on the free plan." - /> handlePopUpToggle("createOrg", false)} diff --git a/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx new file mode 100644 index 000000000..9300a3e93 --- /dev/null +++ b/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx @@ -0,0 +1,214 @@ +import { useMemo } from "react"; +import { components, MenuProps, OptionProps } from "react-select"; +import { faStar } from "@fortawesome/free-regular-svg-icons"; +import { faEye, faPlus, faStar as faSolidStar } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { twMerge } from "tailwind-merge"; + +import { createNotification } from "@app/components/notifications"; +import { OrgPermissionCan } from "@app/components/permissions"; +import { Button, FilterableSelect, UpgradePlanModal } from "@app/components/v2"; +import { NewProjectModal } from "@app/components/v2/projects"; +import { + OrgPermissionActions, + OrgPermissionSubjects, + useOrganization, + useSubscription, + useWorkspace +} from "@app/context"; +import { usePopUp } from "@app/hooks"; +import { useUpdateUserProjectFavorites } from "@app/hooks/api/users/mutation"; +import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries"; +import { Workspace } from "@app/hooks/api/workspace/types"; + +type TWorkspaceWithFaveProp = Workspace & { isFavorite: boolean }; + +const ProjectsMenu = ({ children, ...props }: MenuProps) => { + return ( + + {children} +
+
+ + {(isAllowed) => ( + + )} + +
+ + ); +}; + +const ProjectOption = ({ + isSelected, + children, + data, + ...props +}: OptionProps) => { + const { currentOrg } = useOrganization(); + const { mutateAsync: updateUserProjectFavorites } = useUpdateUserProjectFavorites(); + const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg?.id!); + + const removeProjectFromFavorites = async (projectId: string) => { + try { + await updateUserProjectFavorites({ + orgId: currentOrg!.id, + projectFavorites: [...(projectFavorites || []).filter((entry) => entry !== projectId)] + }); + } catch (err) { + createNotification({ + text: "Failed to remove project from favorites.", + type: "error" + }); + } + }; + + const addProjectToFavorites = async (projectId: string) => { + try { + await updateUserProjectFavorites({ + orgId: currentOrg!.id, + projectFavorites: [...(projectFavorites || []), projectId] + }); + } catch (err) { + createNotification({ + text: "Failed to add project to favorites.", + type: "error" + }); + } + }; + return ( + +
+ {isSelected && ( + + )} +

{children}

+ {data.isFavorite ? ( + { + e.stopPropagation(); + await removeProjectFromFavorites(data.id); + }} + /> + ) : ( + { + e.stopPropagation(); + await addProjectToFavorites(data.id); + }} + /> + )} +
+ + ); +}; + +export const ProjectSelect = () => { + const { workspaces, currentWorkspace } = useWorkspace(); + const { currentOrg } = useOrganization(); + const { data: projectFavorites } = useGetUserProjectFavorites(currentOrg?.id!); + + const { subscription } = useSubscription(); + + const isAddingProjectsAllowed = subscription?.workspaceLimit + ? subscription.workspacesUsed < subscription.workspaceLimit + : true; + + const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ + "addNewWs", + "upgradePlan" + ] as const); + + const { options, value } = useMemo(() => { + const projectOptions = workspaces + .map((w): Workspace & { isFavorite: boolean } => ({ + ...w, + isFavorite: Boolean(projectFavorites?.includes(w.id)) + })) + .sort((a, b) => Number(b.isFavorite) - Number(a.isFavorite)); + + const currentOption = projectOptions.find((option) => option.id === currentWorkspace?.id); + + if (!currentOption) { + return { + options: projectOptions, + value: null + }; + } + + return { + options: [ + currentOption, + ...projectOptions.filter((option) => option.id !== currentOption.id) + ], + value: currentOption + }; + }, [workspaces, projectFavorites, currentWorkspace]); + + return ( +
+

Project

+ + option.data.name.toLowerCase().includes(inputValue.toLowerCase()) + } + getOptionLabel={(option) => option.name} + getOptionValue={(option) => option.id} + onChange={(newValue) => { + // hacky use of null as indication to create project + if (!newValue) { + if (isAddingProjectsAllowed) { + handlePopUpOpen("addNewWs"); + } else { + handlePopUpOpen("upgradePlan"); + } + return; + } + + const project = newValue as TWorkspaceWithFaveProp; + localStorage.setItem("projectData.id", project.id); + // this is not using react query because react query in overview is throwing error when envs are not exact same count + // to reproduce change this back to router.push and switch between two projects with different env count + // look into this on dashboard revamp + window.location.assign(`/project/${project.id}/secrets/overview`); + }} + options={options} + components={{ + Option: ProjectOption, + Menu: ProjectsMenu + }} + /> + handlePopUpToggle("upgradePlan", isOpen)} + text="You have exceeded the number of projects allowed on the free plan." + /> + + handlePopUpToggle("addNewWs", isOpen)} + /> +
+ ); +}; diff --git a/frontend/src/layouts/AppLayout/components/ProjectSelect/index.ts b/frontend/src/layouts/AppLayout/components/ProjectSelect/index.ts new file mode 100644 index 000000000..d0be7c203 --- /dev/null +++ b/frontend/src/layouts/AppLayout/components/ProjectSelect/index.ts @@ -0,0 +1 @@ +export * from "./ProjectSelect"; From 57261cf0c89087af49df8d286c66b55cb05ee1b5 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Wed, 27 Nov 2024 15:42:07 -0800 Subject: [PATCH 03/35] improvement: adjust contrast for selected project --- .../AppLayout/components/ProjectSelect/ProjectSelect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx index 9300a3e93..07add98bb 100644 --- a/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx +++ b/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx @@ -91,7 +91,7 @@ const ProjectOption = ({ isSelected={isSelected} data={data} {...props} - className={twMerge(props.className, isSelected && "bg-mineshaft-600")} + className={twMerge(props.className, isSelected && "bg-mineshaft-500")} >
{isSelected && ( From afdc70442326c58e2e788ba6d223a39394cd3dc8 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Wed, 27 Nov 2024 17:50:42 -0800 Subject: [PATCH 04/35] improvement: improve select styling --- .../src/components/v2/FilterableSelect/FilterableSelect.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx b/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx index 0f1fd61e5..ad51f565d 100644 --- a/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx +++ b/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx @@ -59,13 +59,13 @@ export const FilterableSelect = ({ indicatorSeparator: () => "bg-bunker-400", dropdownIndicator: () => "text-bunker-200 p-1", menu: () => - "mt-2 border text-sm text-mineshaft-200 thin-scrollbar bg-mineshaft-900 border-mineshaft-600 rounded-md", + "mt-2 p-2 border text-sm text-mineshaft-200 thin-scrollbar bg-mineshaft-900 border-mineshaft-600 rounded-md", groupHeading: () => "ml-3 mt-2 mb-1 text-mineshaft-400 text-sm", option: ({ isFocused, isSelected }) => twMerge( isFocused && "bg-mineshaft-700 active:bg-mineshaft-600", isSelected && "text-mineshaft-200", - "hover:cursor-pointer text-xs px-3 py-2" + "hover:cursor-pointer mb-1 rounded text-xs px-3 py-2" ), noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md" }} From 9df9f4a5da580b4bc6f55f3bdc06cb057e84b1fd Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Wed, 27 Nov 2024 17:54:00 -0800 Subject: [PATCH 05/35] improvement: adjust add project button margins --- .../ProjectSelect/ProjectSelect.tsx | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx index 07add98bb..fb5dec26a 100644 --- a/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx +++ b/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx @@ -27,24 +27,22 @@ const ProjectsMenu = ({ children, ...props }: MenuProps) return ( {children} -
-
- - {(isAllowed) => ( - - )} - -
+
+ + {(isAllowed) => ( + + )} + ); }; From 5495ffd78e9a0152717f43726d9e132a08886c56 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 09:44:20 -0800 Subject: [PATCH 06/35] improvement: update add group to project modal to use filterable selects --- .../src/ee/services/license/license-fns.ts | 2 +- .../components/GroupsSection/GroupModal.tsx | 175 +++++++++--------- 2 files changed, 84 insertions(+), 93 deletions(-) diff --git a/backend/src/ee/services/license/license-fns.ts b/backend/src/ee/services/license/license-fns.ts index 70c299564..accab79b5 100644 --- a/backend/src/ee/services/license/license-fns.ts +++ b/backend/src/ee/services/license/license-fns.ts @@ -33,7 +33,7 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({ oidcSSO: false, scim: false, ldap: false, - groups: false, + groups: true, status: null, trial_end: null, has_used_trial: true, diff --git a/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx b/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx index 3ece05497..ef1c89e58 100644 --- a/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx +++ b/frontend/src/views/Project/MembersPage/components/GroupsTab/components/GroupsSection/GroupModal.tsx @@ -5,7 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; import { createNotification } from "@app/components/notifications"; -import { Button, FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2"; +import { Button, FilterableSelect, FormControl, Modal, ModalContent } from "@app/components/v2"; import { useOrganization, useWorkspace } from "@app/context"; import { useAddGroupToWorkspace, @@ -16,8 +16,8 @@ import { import { UsePopUpState } from "@app/hooks/usePopUp"; const schema = z.object({ - id: z.string(), - role: z.string() + group: z.object({ id: z.string(), name: z.string() }), + role: z.object({ slug: z.string(), name: z.string() }) }); export type FormData = z.infer; @@ -27,7 +27,9 @@ type Props = { handlePopUpToggle: (popUpName: keyof UsePopUpState<["group"]>, state?: boolean) => void; }; -export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => { +// TODO: update backend to support adding multiple roles at once + +const Content = ({ popUp, handlePopUpToggle }: Props) => { const { currentOrg } = useOrganization(); const { currentWorkspace } = useWorkspace(); @@ -59,12 +61,12 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => { resolver: zodResolver(schema) }); - const onFormSubmit = async ({ id, role }: FormData) => { + const onFormSubmit = async ({ group, role }: FormData) => { try { await addGroupToWorkspaceMutateAsync({ projectId: currentWorkspace?.id || "", - groupId: id, - role: role || undefined + groupId: group.id, + role: role.slug || undefined }); reset(); @@ -82,95 +84,84 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => { } }; + return filteredGroupMembershipOrgs.length ? ( +
+ ( + + option.id} + getOptionLabel={(option) => option.name} + options={filteredGroupMembershipOrgs} + placeholder="Select group..." + /> + + )} + /> + ( + + option.slug} + getOptionLabel={(option) => option.name} + options={roles} + placeholder="Select role..." + /> + + )} + /> +
+ + +
+ + ) : ( +
+
+ All groups in your organization have already been added to this project. +
+ + + +
+ ); +}; + +export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => { return ( { - handlePopUpToggle("group", isOpen); - reset(); - }} + onOpenChange={(isOpen) => handlePopUpToggle("group", isOpen)} > - - {filteredGroupMembershipOrgs.length ? ( -
- ( - - - - )} - /> - ( - - - - )} - /> -
- - -
- - ) : ( -
-
- All groups in your organization have already been added to this project. -
- - - -
- )} + +
); From 9c03144f19d066e6252fd05d860f7c1832dd27bf Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 10:03:45 -0800 Subject: [PATCH 07/35] improvement: use filterable multi-select for add users to project role select --- .../MembersTab/components/AddMemberModal.tsx | 100 +++--------------- 1 file changed, 16 insertions(+), 84 deletions(-) diff --git a/frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx b/frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx index fd0b13172..ed8271973 100644 --- a/frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx +++ b/frontend/src/views/Project/MembersPage/components/MembersTab/components/AddMemberModal.tsx @@ -2,24 +2,11 @@ import { useMemo } from "react"; import { Controller, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import Link from "next/link"; -import { faCheckCircle, faChevronDown } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; -import { twMerge } from "tailwind-merge"; import { z } from "zod"; import { createNotification } from "@app/components/notifications"; -import { - Button, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - FilterableSelect, - FormControl, - Modal, - ModalContent -} from "@app/components/v2"; +import { Button, FilterableSelect, FormControl, Modal, ModalContent } from "@app/components/v2"; import { useOrganization, useWorkspace } from "@app/context"; import { useAddUsersToOrg, @@ -33,7 +20,7 @@ import { UsePopUpState } from "@app/hooks/usePopUp"; const addMemberFormSchema = z.object({ orgMemberships: z.array(z.object({ label: z.string().trim(), value: z.string().trim() })).min(1), - projectRoleSlugs: z.array(z.string().trim().min(1)).min(1) + projectRoleSlugs: z.array(z.object({ slug: z.string().trim(), name: z.string().trim() })).min(1) }); type TAddMemberForm = z.infer; @@ -64,7 +51,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => { formState: { isSubmitting, errors } } = useForm({ resolver: zodResolver(addMemberFormSchema), - defaultValues: { orgMemberships: [], projectRoleSlugs: [ProjectMembershipRole.Member] } + defaultValues: { orgMemberships: [], projectRoleSlugs: [] } }); const { mutateAsync: addMembersToProject } = useAddUsersToOrg(); @@ -94,7 +81,7 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => { { slug: currentWorkspace.slug, id: currentWorkspace.id, - projectRoleSlug: projectRoleSlugs + projectRoleSlug: projectRoleSlugs.map((role) => role.slug) } ] }); @@ -172,78 +159,23 @@ export const AddMemberModal = ({ popUp, handlePopUpToggle }: Props) => { ( + render={({ field: { onChange, value }, fieldState: { error } }) => ( - - - {roles && roles.length > 0 ? ( -
- {/* eslint-disable-next-line no-nested-ternary */} - {selectedRoleSlugs.length === 1 - ? roles.find((role) => role.slug === selectedRoleSlugs[0])?.name - : selectedRoleSlugs.length === 0 - ? "Select at least one role" - : `${selectedRoleSlugs.length} roles selected`} - -
- ) : ( -
- No roles found -
- )} - - - {roles && roles.length > 0 ? ( - roles.map((role) => { - const isSelected = selectedRoleSlugs.includes(role.slug); - - return ( - roles.length > 1 && event.preventDefault()} - onClick={() => { - if (selectedRoleSlugs.includes(String(role.slug))) { - field.onChange( - selectedRoleSlugs.filter( - (roleSlug: string) => roleSlug !== String(role.slug) - ) - ); - } else { - field.onChange([...selectedRoleSlugs, role.slug]); - } - }} - key={`role-slug-${role.slug}`} - icon={ - isSelected ? ( - - ) : ( -
- ) - } - iconPos="left" - className="w-[28.4rem] text-sm" - > - {role.name} - - ); - }) - ) : ( -
- )} - - + option.slug} + getOptionLabel={(option) => option.name} + /> )} /> From d131314de00c72f9c8ebd3ec2b1d31c20fd06a87 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 10:21:52 -0800 Subject: [PATCH 08/35] improvement: filter select for invite users to org --- .../src/ee/services/license/license-fns.ts | 2 +- .../OrgMembersSection/AddOrgMemberModal.tsx | 37 ++++++++----------- 2 files changed, 17 insertions(+), 22 deletions(-) diff --git a/backend/src/ee/services/license/license-fns.ts b/backend/src/ee/services/license/license-fns.ts index accab79b5..70c299564 100644 --- a/backend/src/ee/services/license/license-fns.ts +++ b/backend/src/ee/services/license/license-fns.ts @@ -33,7 +33,7 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({ oidcSSO: false, scim: false, ldap: false, - groups: true, + groups: false, status: null, trial_end: null, has_used_trial: true, diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx index 74aa5d7c2..2b90276de 100644 --- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx +++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx @@ -45,7 +45,7 @@ const addMemberFormSchema = z.object({ ) .default([]), projectRoleSlug: z.string().min(1).default(DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG), - organizationRoleSlug: z.string().min(1).default(DEFAULT_ORG_AND_PROJECT_MEMBER_ROLE_SLUG) + organizationRole: z.object({ name: z.string(), slug: z.string() }) }); type TAddMemberForm = z.infer; @@ -87,16 +87,16 @@ export const AddOrgMemberModal = ({ useEffect(() => { if (organizationRoles) { reset({ - organizationRoleSlug: isCustomOrgRole(currentOrg?.defaultMembershipRole!) - ? organizationRoles?.find((role) => role.id === currentOrg?.defaultMembershipRole)?.slug! - : currentOrg?.defaultMembershipRole + organizationRole: isCustomOrgRole(currentOrg?.defaultMembershipRole!) + ? organizationRoles?.find((role) => role.id === currentOrg?.defaultMembershipRole) + : organizationRoles?.find((role) => role.slug === currentOrg?.defaultMembershipRole) }); } }, [organizationRoles]); const onAddMembers = async ({ emails, - organizationRoleSlug, + organizationRole, projects: selectedProjects, projectRoleSlug }: TAddMemberForm) => { @@ -138,7 +138,7 @@ export const AddOrgMemberModal = ({ const { data } = await addUsersMutateAsync({ organizationId: currentOrg?.id, inviteeEmails: emails.split(",").map((email) => email.trim()), - organizationRoleSlug, + organizationRoleSlug: organizationRole.slug, projects: selectedProjects.map(({ id }) => ({ id, projectRoleSlug: [projectRoleSlug] })) }); @@ -207,27 +207,22 @@ export const AddOrgMemberModal = ({ ( + name="organizationRole" + render={({ field: { value, onChange }, fieldState: { error } }) => ( -
- -
+ option.slug} + getOptionLabel={(option) => option.name} + value={value} + onChange={onChange} + /> )} /> From 9ca58894f0805291aa1d5d504d6bb7fb5a4f8a7e Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 11:07:14 -0800 Subject: [PATCH 09/35] improvement: filter select for create identity role --- .../IdentitySection/IdentityModal.tsx | 53 +++++++++---------- 1 file changed, 25 insertions(+), 28 deletions(-) diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx index 4b71aaea3..badab9a3c 100644 --- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx +++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx @@ -9,27 +9,24 @@ import { z } from "zod"; import { createNotification } from "@app/components/notifications"; import { Button, + FilterableSelect, FormControl, FormLabel, IconButton, Input, Modal, - ModalContent, - Select, - SelectItem + ModalContent } from "@app/components/v2"; import { useOrganization } from "@app/context"; +import { isCustomOrgRole } from "@app/helpers/roles"; import { useCreateIdentity, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api"; -import { - // IdentityAuthMethod, - useAddIdentityUniversalAuth -} from "@app/hooks/api/identities"; +import { useAddIdentityUniversalAuth } from "@app/hooks/api/identities"; import { UsePopUpState } from "@app/hooks/usePopUp"; const schema = z .object({ - name: z.string(), - role: z.string(), + name: z.string().min(1, "Required"), + role: z.object({ slug: z.string(), name: z.string() }), metadata: z .object({ key: z.string().trim().min(1), @@ -101,13 +98,15 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => { if (identity) { reset({ name: identity.name, - role: identity?.customRole?.slug ?? identity.role, + role: identity?.customRole ?? roles.find((role) => role.slug === identity.role), metadata: identity.metadata }); } else { reset({ name: "", - role: roles[0].slug + role: isCustomOrgRole(currentOrg?.defaultMembershipRole!) + ? roles?.find((role) => role.id === currentOrg?.defaultMembershipRole) + : roles?.find((role) => role.slug === currentOrg?.defaultMembershipRole) }); } }, [popUp?.identity?.data, roles]); @@ -126,7 +125,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => { await updateMutateAsync({ identityId: identity.identityId, name, - role: role || undefined, + role: role.slug || undefined, organizationId: orgId, metadata }); @@ -137,7 +136,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => { const { id: createdId } = await createMutateAsync({ name, - role: role || undefined, + role: role.slug || undefined, organizationId: orgId, metadata }); @@ -184,7 +183,10 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => { reset(); }} > - +
{ ( + render={({ field: { onChange, value }, fieldState: { error } }) => ( - + option.slug} + getOptionLabel={(option) => option.name} + /> )} /> From 8b3af92d23619cb84f4606f6e8da7235bfe5d1be Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 11:55:48 -0800 Subject: [PATCH 10/35] improvement: edit user role filterable select --- frontend/src/views/Org/UserPage/UserPage.tsx | 3 +- .../components/UserDetailsSection.tsx | 1 + .../components/UserOrgMembershipModal.tsx | 56 ++++++++++--------- 3 files changed, 34 insertions(+), 26 deletions(-) diff --git a/frontend/src/views/Org/UserPage/UserPage.tsx b/frontend/src/views/Org/UserPage/UserPage.tsx index ad0f66d6e..2b3817bcd 100644 --- a/frontend/src/views/Org/UserPage/UserPage.tsx +++ b/frontend/src/views/Org/UserPage/UserPage.tsx @@ -148,7 +148,8 @@ export const UserPage = withPermission( onClick={() => handlePopUpOpen("orgMembership", { membershipId: membership.id, - role: membership.role + role: membership.role, + roleId: membership.roleId }) } disabled={!isAllowed} diff --git a/frontend/src/views/Org/UserPage/components/UserDetailsSection.tsx b/frontend/src/views/Org/UserPage/components/UserDetailsSection.tsx index d439c7ecd..6939eca17 100644 --- a/frontend/src/views/Org/UserPage/components/UserDetailsSection.tsx +++ b/frontend/src/views/Org/UserPage/components/UserDetailsSection.tsx @@ -100,6 +100,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) => handlePopUpOpen("orgMembership", { membershipId: membership.id, role: membership.role, + roleId: membership.roleId, metadata: membership.metadata }); }} diff --git a/frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx b/frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx index 57c8cebb2..9362881a4 100644 --- a/frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx +++ b/frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx @@ -1,5 +1,6 @@ import { useEffect } from "react"; import { Controller, useFieldArray, useForm } from "react-hook-form"; +import { SingleValue } from "react-select"; import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; @@ -8,21 +9,21 @@ import { z } from "zod"; import { createNotification } from "@app/components/notifications"; import { Button, + FilterableSelect, FormControl, FormLabel, IconButton, Input, Modal, - ModalContent, - Select, - SelectItem + ModalContent } from "@app/components/v2"; import { useOrganization, useSubscription } from "@app/context"; +import { isCustomOrgRole } from "@app/helpers/roles"; import { useGetOrgRoles, useUpdateOrgMembership } from "@app/hooks/api"; import { UsePopUpState } from "@app/hooks/usePopUp"; const schema = z.object({ - role: z.string(), + role: z.object({ name: z.string(), slug: z.string() }), metadata: z .object({ key: z.string().trim().min(1), @@ -45,7 +46,7 @@ export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpTogg const { currentOrg } = useOrganization(); const orgId = currentOrg?.id || ""; - const { data: roles } = useGetOrgRoles(orgId); + const { data: roles = [] } = useGetOrgRoles(orgId); const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership(); @@ -66,6 +67,7 @@ export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpTogg const popUpData = popUp?.orgMembership?.data as { membershipId: string; role: string; + roleId?: string; metadata: { key: string; value: string }[]; }; @@ -73,13 +75,18 @@ export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpTogg if (!roles?.length) return; if (popUpData) { + console.log("roles", roles, popUpData.roleId); reset({ - role: popUpData.role, + role: popUpData.roleId + ? roles?.find((role) => role.id === popUpData.roleId) + : roles?.find((role) => role.slug === popUpData.role), metadata: popUpData.metadata }); } else { reset({ - role: roles[0].slug + role: isCustomOrgRole(currentOrg?.defaultMembershipRole!) + ? roles?.find((role) => role.id === currentOrg?.defaultMembershipRole) + : roles?.find((role) => role.slug === currentOrg?.defaultMembershipRole) }); } }, [popUp?.orgMembership?.data, roles]); @@ -91,7 +98,7 @@ export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpTogg await updateOrgMembership({ organizationId: orgId, membershipId: popUpData.membershipId, - role, + role: role.slug, metadata }); @@ -123,23 +130,26 @@ export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpTogg reset(); }} > - + ( + render={({ field: { onChange, value }, fieldState: { error } }) => ( - + value={value} + getOptionValue={(option) => option.slug} + getOptionLabel={(option) => option.name} + /> )} /> From bcc2840020c5335d022b6fd5a6b3fad13cfa3aea Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 13:13:23 -0800 Subject: [PATCH 11/35] improvement: filterable role selection on create/edit group --- .../src/ee/services/license/license-fns.ts | 2 +- frontend/src/helpers/roles.ts | 5 ++- .../OrgGroupsSection/OrgGroupModal.tsx | 44 +++++++++---------- .../IdentitySection/IdentityModal.tsx | 8 ++-- .../components/UserOrgMembershipModal.tsx | 11 ++--- 5 files changed, 32 insertions(+), 38 deletions(-) diff --git a/backend/src/ee/services/license/license-fns.ts b/backend/src/ee/services/license/license-fns.ts index 70c299564..accab79b5 100644 --- a/backend/src/ee/services/license/license-fns.ts +++ b/backend/src/ee/services/license/license-fns.ts @@ -33,7 +33,7 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({ oidcSSO: false, scim: false, ldap: false, - groups: false, + groups: true, status: null, trial_end: null, has_used_trial: true, diff --git a/frontend/src/helpers/roles.ts b/frontend/src/helpers/roles.ts index de6291a13..580b635b4 100644 --- a/frontend/src/helpers/roles.ts +++ b/frontend/src/helpers/roles.ts @@ -1,4 +1,4 @@ -import { ProjectMembershipRole } from "@app/hooks/api/roles/types"; +import { ProjectMembershipRole, TOrgRole } from "@app/hooks/api/roles/types"; enum OrgMembershipRole { Admin = "admin", @@ -23,3 +23,6 @@ export const formatProjectRoleName = (name: string) => { export const isCustomProjectRole = (slug: string) => !Object.values(ProjectMembershipRole).includes(slug as ProjectMembershipRole); + +export const findOrgMembershipRole = (roles: TOrgRole[], role: string) => + isCustomOrgRole(role) ? roles.find((r) => r.id === role) : roles.find((r) => r.slug === role); diff --git a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx index 4ea4516de..b09c88763 100644 --- a/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx +++ b/frontend/src/views/Org/MembersPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupModal.tsx @@ -6,14 +6,14 @@ import { z } from "zod"; import { createNotification } from "@app/components/notifications"; import { Button, + FilterableSelect, FormControl, Input, Modal, - ModalContent, - Select, - SelectItem + ModalContent } from "@app/components/v2"; import { useOrganization } from "@app/context"; +import { findOrgMembershipRole } from "@app/helpers/roles"; import { useCreateGroup, useGetOrgRoles, useUpdateGroup } from "@app/hooks/api"; import { UsePopUpState } from "@app/hooks/usePopUp"; @@ -23,7 +23,7 @@ const GroupFormSchema = z.object({ .string() .min(5, "Slug must be at least 5 characters long") .max(36, "Slug must be 36 characters or fewer"), - role: z.string() + role: z.object({ name: z.string(), slug: z.string() }) }); export type TGroupFormData = z.infer; @@ -62,13 +62,13 @@ export const OrgGroupModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Pr reset({ name: group.name, slug: group.slug, - role: group?.customRole?.slug ?? group.role + role: group?.customRole ?? findOrgMembershipRole(roles, group.role) }); } else { reset({ name: "", slug: "", - role: roles[0].slug + role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole) }); } }, [popUp?.group?.data, roles]); @@ -88,14 +88,14 @@ export const OrgGroupModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Pr id: group.groupId, name, slug, - role: role || undefined + role: role.slug || undefined }); } else { await createMutateAsync({ name, slug, organizationId: currentOrg.id, - role: role || undefined + role: role.slug || undefined }); } handlePopUpToggle("group", false); @@ -121,7 +121,10 @@ export const OrgGroupModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Pr reset(); }} > - + ( + render={({ field: { onChange, value }, fieldState: { error } }) => ( - + option.slug} + getOptionLabel={(option) => option.name} + /> )} /> diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx index badab9a3c..d483d0ea7 100644 --- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx +++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModal.tsx @@ -18,7 +18,7 @@ import { ModalContent } from "@app/components/v2"; import { useOrganization } from "@app/context"; -import { isCustomOrgRole } from "@app/helpers/roles"; +import { findOrgMembershipRole } from "@app/helpers/roles"; import { useCreateIdentity, useGetOrgRoles, useUpdateIdentity } from "@app/hooks/api"; import { useAddIdentityUniversalAuth } from "@app/hooks/api/identities"; import { UsePopUpState } from "@app/hooks/usePopUp"; @@ -98,15 +98,13 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => { if (identity) { reset({ name: identity.name, - role: identity?.customRole ?? roles.find((role) => role.slug === identity.role), + role: identity.customRole ?? findOrgMembershipRole(roles, identity.role), metadata: identity.metadata }); } else { reset({ name: "", - role: isCustomOrgRole(currentOrg?.defaultMembershipRole!) - ? roles?.find((role) => role.id === currentOrg?.defaultMembershipRole) - : roles?.find((role) => role.slug === currentOrg?.defaultMembershipRole) + role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole) }); } }, [popUp?.identity?.data, roles]); diff --git a/frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx b/frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx index 9362881a4..289553ba8 100644 --- a/frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx +++ b/frontend/src/views/Org/UserPage/components/UserOrgMembershipModal.tsx @@ -18,7 +18,7 @@ import { ModalContent } from "@app/components/v2"; import { useOrganization, useSubscription } from "@app/context"; -import { isCustomOrgRole } from "@app/helpers/roles"; +import { findOrgMembershipRole, isCustomOrgRole } from "@app/helpers/roles"; import { useGetOrgRoles, useUpdateOrgMembership } from "@app/hooks/api"; import { UsePopUpState } from "@app/hooks/usePopUp"; @@ -75,18 +75,13 @@ export const UserOrgMembershipModal = ({ popUp, handlePopUpOpen, handlePopUpTogg if (!roles?.length) return; if (popUpData) { - console.log("roles", roles, popUpData.roleId); reset({ - role: popUpData.roleId - ? roles?.find((role) => role.id === popUpData.roleId) - : roles?.find((role) => role.slug === popUpData.role), + role: findOrgMembershipRole(roles, popUpData.roleId ?? popUpData.role), metadata: popUpData.metadata }); } else { reset({ - role: isCustomOrgRole(currentOrg?.defaultMembershipRole!) - ? roles?.find((role) => role.id === currentOrg?.defaultMembershipRole) - : roles?.find((role) => role.slug === currentOrg?.defaultMembershipRole) + role: findOrgMembershipRole(roles, currentOrg!.defaultMembershipRole!) }); } }, [popUp?.orgMembership?.data, roles]); From 4c739fd57fd2ef65507d44632d5ab05e85607e28 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 13:36:42 -0800 Subject: [PATCH 12/35] chore: revert license --- backend/src/ee/services/license/license-fns.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/backend/src/ee/services/license/license-fns.ts b/backend/src/ee/services/license/license-fns.ts index accab79b5..70c299564 100644 --- a/backend/src/ee/services/license/license-fns.ts +++ b/backend/src/ee/services/license/license-fns.ts @@ -33,7 +33,7 @@ export const getDefaultOnPremFeatures = (): TFeatureSet => ({ oidcSSO: false, scim: false, ldap: false, - groups: true, + groups: false, status: null, trial_end: null, has_used_trial: true, From 8afa65c272528dfda8f7c3ccb1a7f331afc88df2 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 13:47:09 -0800 Subject: [PATCH 13/35] improvements: minor refactoring --- frontend/src/helpers/roles.ts | 6 ++++-- .../components/OrgMembersSection/AddOrgMemberModal.tsx | 9 +++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/frontend/src/helpers/roles.ts b/frontend/src/helpers/roles.ts index 580b635b4..4e26e1b15 100644 --- a/frontend/src/helpers/roles.ts +++ b/frontend/src/helpers/roles.ts @@ -24,5 +24,7 @@ export const formatProjectRoleName = (name: string) => { export const isCustomProjectRole = (slug: string) => !Object.values(ProjectMembershipRole).includes(slug as ProjectMembershipRole); -export const findOrgMembershipRole = (roles: TOrgRole[], role: string) => - isCustomOrgRole(role) ? roles.find((r) => r.id === role) : roles.find((r) => r.slug === role); +export const findOrgMembershipRole = (roles: TOrgRole[], roleIdOrSlug: string) => + isCustomOrgRole(roleIdOrSlug) + ? roles.find((r) => r.id === roleIdOrSlug) + : roles.find((r) => r.slug === roleIdOrSlug); diff --git a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx index 2b90276de..38faf53f1 100644 --- a/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx +++ b/frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/AddOrgMemberModal.tsx @@ -15,7 +15,7 @@ import { TextArea } from "@app/components/v2"; import { useOrganization } from "@app/context"; -import { isCustomOrgRole } from "@app/helpers/roles"; +import { findOrgMembershipRole } from "@app/helpers/roles"; import { useAddUsersToOrg, useFetchServerStatus, @@ -87,9 +87,10 @@ export const AddOrgMemberModal = ({ useEffect(() => { if (organizationRoles) { reset({ - organizationRole: isCustomOrgRole(currentOrg?.defaultMembershipRole!) - ? organizationRoles?.find((role) => role.id === currentOrg?.defaultMembershipRole) - : organizationRoles?.find((role) => role.slug === currentOrg?.defaultMembershipRole) + organizationRole: findOrgMembershipRole( + organizationRoles, + currentOrg?.defaultMembershipRole! + ) }); } }, [organizationRoles]); From 429366513022da3ac6244c153598663d4f5fc361 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 14:10:45 -0800 Subject: [PATCH 14/35] improvement: user groups table pagination --- .../UserProjectsSection/UserGroupsTable.tsx | 147 ++++++++++++++---- 1 file changed, 121 insertions(+), 26 deletions(-) diff --git a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx index 15299da26..999ffe794 100644 --- a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx +++ b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx @@ -1,6 +1,27 @@ -import { faFolder } from "@fortawesome/free-solid-svg-icons"; +import { useMemo } from "react"; +import { + faArrowDown, + faArrowUp, + faMagnifyingGlass, + faSearch, + faUser +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { EmptyState, Table, TableContainer, TBody, Th, THead, Tr } from "@app/components/v2"; +import { + EmptyState, + IconButton, + Input, + Pagination, + Table, + TableContainer, + TBody, + Th, + THead, + Tr +} from "@app/components/v2"; +import { usePagination, useResetPageHelper } from "@app/hooks"; +import { OrderByDirection } from "@app/hooks/api/generic/types"; import { OrgUser } from "@app/hooks/api/types"; import { useListUserGroupMemberships } from "@app/hooks/api/users/queries"; import { UsePopUpState } from "@app/hooks/usePopUp"; @@ -12,31 +33,105 @@ type Props = { handlePopUpOpen: (popUpName: keyof UsePopUpState<["removeUserFromGroup"]>, data?: {}) => void; }; -export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => { - const { data: groups, isLoading } = useListUserGroupMemberships(orgMembership.user.username); +enum UserGroupsOrderBy { + Name = "name" +} +export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => { + const { data: groupMemberships = [], isLoading } = useListUserGroupMemberships( + orgMembership.user.username + ); + + const { + search, + setSearch, + setPage, + page, + perPage, + setPerPage, + offset, + orderDirection, + toggleOrderDirection + } = usePagination(UserGroupsOrderBy.Name, { initPerPage: 10 }); + + const filteredGroupMemberships = useMemo( + () => + groupMemberships + ?.filter((group) => group.name.toLowerCase().includes(search.trim().toLowerCase())) + .sort((a, b) => { + const [membershipOne, membershipTwo] = + orderDirection === OrderByDirection.ASC ? [a, b] : [b, a]; + + return membershipOne.name.toLowerCase().localeCompare(membershipTwo.name.toLowerCase()); + }), + [groupMemberships, orderDirection, search] + ); + + useResetPageHelper({ + totalCount: filteredGroupMemberships.length, + offset, + setPage + }); return ( - - - - - - - - - {groups?.map((group) => ( - - ))} - -
Name -
- {!isLoading && !groups?.length && ( - - )} - +
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search projects..." + /> + + + + + + + + + {filteredGroupMemberships.slice(offset, perPage * page).map((group) => ( + + ))} + +
+
+ Name + + + +
+ 		+
+ {Boolean(filteredGroupMemberships.length) && ( + + )} + {!isLoading && !filteredGroupMemberships?.length && ( + + )} + +
); }; From dab8f0b2610f4d4cacf4691d62c40a7bd3eac676 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Thu, 28 Nov 2024 14:29:41 -0800 Subject: [PATCH 15/35] improvement: secret tags table pagination --- .../UserProjectsSection/UserGroupsTable.tsx | 5 +- .../SecretTagsSection/SecretTagsSection.tsx | 3 +- .../SecretTagsSection/SecretTagsTable.tsx | 175 +++++++++++++----- 3 files changed, 130 insertions(+), 53 deletions(-) diff --git a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx index 999ffe794..af136d7ff 100644 --- a/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx +++ b/frontend/src/views/Org/UserPage/components/UserProjectsSection/UserGroupsTable.tsx @@ -57,7 +57,7 @@ export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => { const filteredGroupMemberships = useMemo( () => groupMemberships - ?.filter((group) => group.name.toLowerCase().includes(search.trim().toLowerCase())) + .filter((group) => group.name.toLowerCase().includes(search.trim().toLowerCase())) .sort((a, b) => { const [membershipOne, membershipTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a]; @@ -72,13 +72,14 @@ export const UserGroupsTable = ({ handlePopUpOpen, orgMembership }: Props) => { offset, setPage }); + return (
setSearch(e.target.value)} leftIcon={} - placeholder="Search projects..." + placeholder="Search groups..." /> diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx index d1ba06835..26be8eb17 100644 --- a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx +++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx @@ -19,7 +19,6 @@ import { SecretTagsTable } from "./SecretTagsTable"; type DeleteModalData = { name: string; id: string }; export const SecretTagsSection = (): JSX.Element => { - const { popUp, handlePopUpToggle, handlePopUpClose, handlePopUpOpen } = usePopUp([ "CreateSecretTag", "deleteTagConfirmation" @@ -65,7 +64,7 @@ export const SecretTagsSection = (): JSX.Element => { }} isDisabled={!isAllowed} > - Create tag + Create Tag )} diff --git a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx index cc68b0700..b6793ea1d 100644 --- a/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx +++ b/frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsTable.tsx @@ -1,10 +1,20 @@ -import { faTags, faTrashCan } from "@fortawesome/free-solid-svg-icons"; +import { useMemo } from "react"; +import { + faArrowDown, + faArrowUp, + faMagnifyingGlass, + faSearch, + faTag, + faTrashCan +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { ProjectPermissionCan } from "@app/components/permissions"; import { EmptyState, IconButton, + Input, + Pagination, Table, TableContainer, TableSkeleton, @@ -15,7 +25,9 @@ import { Tr } from "@app/components/v2"; import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context"; +import { usePagination, useResetPageHelper } from "@app/hooks"; import { useGetWsTags } from "@app/hooks/api"; +import { OrderByDirection } from "@app/hooks/api/generic/types"; import { UsePopUpState } from "@app/hooks/usePopUp"; type Props = { @@ -31,59 +43,124 @@ type Props = { ) => void; }; +enum TagsOrderBy { + Slug = "slug" +} + export const SecretTagsTable = ({ handlePopUpOpen }: Props) => { const { currentWorkspace } = useWorkspace(); - const { data, isLoading } = useGetWsTags(currentWorkspace?.id ?? ""); + const { data: tags = [], isLoading } = useGetWsTags(currentWorkspace?.id ?? ""); + + const { + search, + setSearch, + setPage, + page, + perPage, + setPerPage, + offset, + orderDirection, + toggleOrderDirection + } = usePagination(TagsOrderBy.Slug, { initPerPage: 10 }); + + const filteredTags = useMemo( + () => + tags + .filter((tag) => tag.slug.toLowerCase().includes(search.trim().toLowerCase())) + .sort((a, b) => { + const [tagOne, tagTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a]; + + return tagOne.slug.toLowerCase().localeCompare(tagTwo.slug.toLowerCase()); + }), + [tags, orderDirection, search] + ); + + useResetPageHelper({ + totalCount: filteredTags.length, + offset, + setPage + }); return ( - -
- - - - - - - {isLoading && } - {!isLoading && - data && - data.map(({ id, slug }) => ( - - - - - ))} - {!isLoading && data && data?.length === 0 && ( +
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search tags..." + /> + +
Slug -
{slug} - - {(isAllowed) => ( - - handlePopUpOpen("deleteTagConfirmation", { - name: slug, - id - }) - } - colorSchema="danger" - ariaLabel="update" - isDisabled={!isAllowed} - > - - - )} - -
+ - + + - )} - -
- - +
+ Slug + + + +
+
- + + + {isLoading && } + {!isLoading && + filteredTags.slice(offset, perPage * page).map(({ id, slug }) => ( + + {slug} + + + {(isAllowed) => ( + + handlePopUpOpen("deleteTagConfirmation", { + name: slug, + id + }) + } + size="xs" + colorSchema="danger" + ariaLabel="update" + variant="plain" + isDisabled={!isAllowed} + > + + + )} + + + + ))} + + + {Boolean(filteredTags.length) && ( + + )} + {!isLoading && !filteredTags?.length && ( + + )} + +
); }; From 5277a50b3e87b2d04e76f66b47e338473a5a3d3f Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 29 Nov 2024 05:48:40 +0400 Subject: [PATCH 16/35] Update NavHeader.tsx --- .../src/components/navigation/NavHeader.tsx | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/navigation/NavHeader.tsx b/frontend/src/components/navigation/NavHeader.tsx index 59f97a1a5..973feeb73 100644 --- a/frontend/src/components/navigation/NavHeader.tsx +++ b/frontend/src/components/navigation/NavHeader.tsx @@ -1,9 +1,11 @@ import { ParsedUrlQuery } from "querystring"; +import { useState } from "react"; import Link from "next/link"; import { useRouter } from "next/router"; import { faAngleRight, faCheck, faCopy, faLock } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { twMerge } from "tailwind-merge"; import { useOrganization, useWorkspace } from "@app/context"; import { useToggle } from "@app/hooks"; @@ -56,6 +58,7 @@ export default function NavHeader({ const { currentOrg } = useOrganization(); const [isCopied, { timedToggle: toggleIsCopied }] = useToggle(false); + const [isHoveringCopyButton, setIsHoveringCopyButton] = useState(false); const router = useRouter(); @@ -152,7 +155,14 @@ export default function NavHeader({ {index + 1 === secretPathSegments?.length ? (
- {folderName} + + {folderName} + setIsHoveringCopyButton(true)} + onMouseLeave={() => setIsHoveringCopyButton(false)} onClick={() => { if (isCopied) return; @@ -189,7 +201,12 @@ export default function NavHeader({ legacyBehavior href={{ pathname: "/project/[id]/secrets/[env]", query }} > - + {folderName} From 46105fc3154ae0dab29569297046107825c59b79 Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Fri, 29 Nov 2024 20:33:03 +0800 Subject: [PATCH 17/35] doc: added docs for infisical csi provider --- .../integrations/platforms/kubernetes-csi.mdx | 233 ++++++++++++++++++ docs/mint.json | 1 + 2 files changed, 234 insertions(+) create mode 100644 docs/integrations/platforms/kubernetes-csi.mdx diff --git a/docs/integrations/platforms/kubernetes-csi.mdx b/docs/integrations/platforms/kubernetes-csi.mdx new file mode 100644 index 000000000..0c13754e7 --- /dev/null +++ b/docs/integrations/platforms/kubernetes-csi.mdx @@ -0,0 +1,233 @@ +--- +title: "Kubernetes CSI" +description: "How to use Infisical to inject secrets directly into Kubernetes pods." +--- + +## Overview + +The Infisical CSI provider allows you to use Infisical with the [Secrets Store CSI driver](https://secrets-store-csi-driver.sigs.k8s.io) to inject secrets directly into your Kubernetes pods through a volume mount. +In contrast to the [Infisical Kubernetes Operator](https://infisical.com/docs/integrations/platforms/kubernetes), the Infisical CSI provider will allow you to sync Infisical secrets directly to pods, removing the need for Kubernetes secret resources. + +```mermaid +flowchart LR + subgraph Secrets Management + SS(Infisical) --> CSP(Infisical CSI Provider) + CSP --> CSD(Secrets Store CSI Driver) + end + + subgraph Application + CSD --> V(Volume) + V <--> P(Pod) + end + +``` + +## Features + +The following features are supported by the Infisical CSI Provider: + +- Integration with Secrets Store CSI Driver for direct pod mounting +- Authentication using Kubernetes service accounts via machine identities +- Secret rotation and auto-syncing when enabled via CSI Driver +- Configurable secret paths and file mounting locations +- Installation via Helm + +## Prerequisites + +The Infisical CSI provider is only supported for Kubernetes clusters with version >= 1.20. + +## Limitations + +Currently, the Infisical CSI provider only supports static secrets. + +## Deploy to Kubernetes cluster + +### Install Secrets Store CSI Driver + +In order to use the Infisical CSI provider, you will first have to install the [Secrets Store CSI driver](https://secrets-store-csi-driver.sigs.k8s.io/getting-started/installation) to your cluster. It is important that you define +the audience value for token requests as demonstrated below. The Infisical CSI provider will **NOT WORK** if this is not set. + +```bash +helm repo add secrets-store-csi-driver https://kubernetes-sigs.github.io/secrets-store-csi-driver/charts +``` + +```bash +helm install csi secrets-store-csi-driver/secrets-store-csi-driver \ +--namespace=kube-system \ +--set "tokenRequests[0].audience=infisical" \ # Configure authentication for the CSI provider +--set enableSecretRotation=true \ # Enable automatic secret updates from Infisical +--set rotationPollInterval=2m \ # Check for secret updates every 2 minutes +--set "syncSecret.enabled=true" \ # Enable syncing secrets to Kubernetes secrets (optional) +``` + +If you do not wish to use the secret rotation feature of the secrets store CSI driver, you can omit the `enableSecretRotation` and the `rotationPollInterval` flags. +Do note that by default, secrets from Infisical are only fetched and mounted during pod creation. If there are any changes made to the secrets in Infisical, +they will not propagate to the pods unless secret rotation is enabled for the CSI driver. + +### Install Infisical CSI Provider + +You would then have to install the Infisical CSI provider to your cluster. + +**Install the latest Infisical Helm repository** + +```bash +helm repo add infisical-helm-charts 'https://dl.cloudsmith.io/public/infisical/helm-charts/helm/charts/' + +helm repo update +``` + +**Install the Helm Chart** + +```bash +helm install infisical-csi-provider infisical-helm-charts/infisical-csi-provider +``` + +For a list of all supported arguments for the helm installation, you can run the following: + +```bash +helm show values infisical-helm-charts/infisical-csi-provider +``` + +### Authentication + +In order for the Infisical CSI provider to pull secrets from your Infisical project, you will have to configure +a machine identity with [Kubernetes authentication](https://infisical.com/docs/documentation/platform/identities/kubernetes-auth) configured with your cluster. +You can refer to the documentation for setting it up [here](https://infisical.com/docs/documentation/platform/identities/kubernetes-auth#guide). + +### Creating Secret Provider Class + +With the Secrets Store CSI driver and the Infisical CSI provider installed, create a Kubernetes [SecretProviderClass](https://secrets-store-csi-driver.sigs.k8s.io/concepts.html#secretproviderclass) resource to establish +the connection between the CSI driver and the Infisical CSI provider for secret retrieval. You can create as much Secret Provider Classes as needed for your cluster. + +```yaml +apiVersion: secrets-store.csi.x-k8s.io/v1 +kind: SecretProviderClass +metadata: + name: my-infisical-app-csi-provider +spec: + provider: infisical + parameters: + infisicalUrl: "https://app.infisical.com" + identityId: "ad2f8c67-cbe2-417a-b5eb-1339776ec0b3" + projectId: "09eda1f8-85a3-47a9-8a6f-e27f133b2a36" + envSlug: "prod" + secrets: | + - secretPath: "/" + fileName: "dbPassword" + secretKey: "DB_PASSWORD" + - secretPath: "/app" + fileName: "appSecret" + secretKey: "APP_SECRET" +``` + + + The SecretProviderClass should be provisioned in the same namespace as the pod + you intend to mount secrets to. + + +#### Supported Parameters + + + The base URL of your Infisical instance. If you're using Infisical Cloud US, + this should be set to `https://app.infisical.com`. If you're using Infisical + Cloud EU, then this should be set to `https://eu.infisical.com`. + + + + The CA certificate of the Infisical instance in order to establish SSL/TLS + when the instance uses a private or self-signed certificate. Unless necessary, + this should be omitted. + + + + The ID of the machine identity to use for authenticating the Infisical CSI + provider with your Infisical organization. This should be the machine identity + configured with Kubernetes authentication. + + + + The project ID of the Infisical project to pull secrets from. + + + + The slug of the project environment to pull secrets from. + + + + An array that defines which secrets to retrieve and how to mount them. Each + entry requires three properties: `secretPath` and `secretKey` work together to + identify the source secret to fetch, while `fileName` specifies the path where + the secret's value will be mounted within the pod's filesystem. + + + + The custom audience value configured for the CSI driver. This defaults to + `infisical`. + + +### Using Secret Provider Class + +A pod can use the Secret Provider Class by mounting it as a CSI volume: + +```yaml +apiVersion: v1 +kind: Pod +metadata: + name: nginx-secrets-store + labels: + app: nginx +spec: + containers: + - name: nginx + image: nginx + volumeMounts: + - name: secrets-store-inline + mountPath: "/mnt/secrets-store" + readOnly: true + volumes: + - name: secrets-store-inline + csi: + driver: secrets-store.csi.k8s.io + readOnly: true + volumeAttributes: + secretProviderClass: "my-infisical-app-csi-provider" +``` + +When the pod is created, the secrets are mounted as individual files in the /mnt/secrets-store directory. + +### Verifying Secret Mounts + +To verify your secrets are mounted correctly: + +```bash +# Check pod status +kubectl get pod nginx-secrets-store + +# View mounted secrets +kubectl exec -it nginx-secrets-store -- ls -l /mnt/secrets-store +``` + +### Troubleshooting + +To troubleshoot issues with the Infisical CSI provider, refer to the logs of the Infisical CSI provider running on the same node as your pod. + +```bash +kubectl logs infisical-csi-provider-7x44t +``` + +You can also refer to the logs of the secrets store CSI driver. Modify the command below with the appropriate pod and namespace of your secrets store CSI driver installation. + +```bash +kubectl logs csi-secrets-store-csi-driver-7h4jp -n=kube-system +``` + +**Common issues include:** + +- Mismatch in the audience value of the CSI driver with the machine identity's Kubernetes auth configuration +- SecretProviderClass in the wrong namespace +- Invalid machine identity configuration +- Incorrect secret paths or keys + +## Best Practices + +For additional guidance on setting this up for your production cluster, you can refer to the Secrets Store CSI driver documentation [here](https://secrets-store-csi-driver.sigs.k8s.io/topics/best-practices). diff --git a/docs/mint.json b/docs/mint.json index 59aa59054..7df2e1062 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -345,6 +345,7 @@ "group": "Container orchestrators", "pages": [ "integrations/platforms/kubernetes", + "integrations/platforms/kubernetes-csi", "integrations/platforms/docker-swarm-with-agent", "integrations/platforms/ecs-with-agent" ] From b466b3073bbca05b2618aac9aab2b93204bea3b9 Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Fri, 29 Nov 2024 21:09:37 +0800 Subject: [PATCH 18/35] misc: updated snippet to be copy+paste friendly --- docs/integrations/platforms/kubernetes-csi.mdx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/integrations/platforms/kubernetes-csi.mdx b/docs/integrations/platforms/kubernetes-csi.mdx index 0c13754e7..8bc15811b 100644 --- a/docs/integrations/platforms/kubernetes-csi.mdx +++ b/docs/integrations/platforms/kubernetes-csi.mdx @@ -54,12 +54,19 @@ helm repo add secrets-store-csi-driver https://kubernetes-sigs.github.io/secrets ```bash helm install csi secrets-store-csi-driver/secrets-store-csi-driver \ --namespace=kube-system \ ---set "tokenRequests[0].audience=infisical" \ # Configure authentication for the CSI provider ---set enableSecretRotation=true \ # Enable automatic secret updates from Infisical ---set rotationPollInterval=2m \ # Check for secret updates every 2 minutes ---set "syncSecret.enabled=true" \ # Enable syncing secrets to Kubernetes secrets (optional) +--set "tokenRequests[0].audience=infisical" \ +--set enableSecretRotation=true \ +--set rotationPollInterval=2m \ +--set "syncSecret.enabled=true" \ ``` +The flags configure the following: + +- `tokenRequests[0].audience=infisical`: Configures authentication for the CSI provider (required) +- `enableSecretRotation=true`: Enables automatic secret updates from Infisical +- `rotationPollInterval=2m`: Checks for secret updates every 2 minutes +- `syncSecret.enabled=true`: Enables syncing secrets to Kubernetes secrets (optional) + If you do not wish to use the secret rotation feature of the secrets store CSI driver, you can omit the `enableSecretRotation` and the `rotationPollInterval` flags. Do note that by default, secrets from Infisical are only fetched and mounted during pod creation. If there are any changes made to the secrets in Infisical, they will not propagate to the pods unless secret rotation is enabled for the CSI driver. From f82b11851a3d40ddb7eed90091d0690b3c64c252 Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Fri, 29 Nov 2024 21:10:55 +0800 Subject: [PATCH 19/35] misc: made snippet into info --- docs/integrations/platforms/kubernetes-csi.mdx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/docs/integrations/platforms/kubernetes-csi.mdx b/docs/integrations/platforms/kubernetes-csi.mdx index 8bc15811b..e2227c9ef 100644 --- a/docs/integrations/platforms/kubernetes-csi.mdx +++ b/docs/integrations/platforms/kubernetes-csi.mdx @@ -67,9 +67,14 @@ The flags configure the following: - `rotationPollInterval=2m`: Checks for secret updates every 2 minutes - `syncSecret.enabled=true`: Enables syncing secrets to Kubernetes secrets (optional) -If you do not wish to use the secret rotation feature of the secrets store CSI driver, you can omit the `enableSecretRotation` and the `rotationPollInterval` flags. -Do note that by default, secrets from Infisical are only fetched and mounted during pod creation. If there are any changes made to the secrets in Infisical, -they will not propagate to the pods unless secret rotation is enabled for the CSI driver. + + If you do not wish to use the secret rotation feature of the secrets store CSI + driver, you can omit the `enableSecretRotation` and the `rotationPollInterval` + flags. Do note that by default, secrets from Infisical are only fetched and + mounted during pod creation. If there are any changes made to the secrets in + Infisical, they will not propagate to the pods unless secret rotation is + enabled for the CSI driver. + ### Install Infisical CSI Provider From 345be8582534924d1b12e3c774aa04a8bbc5fbf8 Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Fri, 29 Nov 2024 21:39:37 +0800 Subject: [PATCH 20/35] misc: finalized flag desc --- docs/integrations/platforms/kubernetes-csi.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/integrations/platforms/kubernetes-csi.mdx b/docs/integrations/platforms/kubernetes-csi.mdx index e2227c9ef..79cfba304 100644 --- a/docs/integrations/platforms/kubernetes-csi.mdx +++ b/docs/integrations/platforms/kubernetes-csi.mdx @@ -62,10 +62,10 @@ helm install csi secrets-store-csi-driver/secrets-store-csi-driver \ The flags configure the following: -- `tokenRequests[0].audience=infisical`: Configures authentication for the CSI provider (required) +- `tokenRequests[0].audience=infisical`: Sets the audience value for service account token authentication (required) - `enableSecretRotation=true`: Enables automatic secret updates from Infisical - `rotationPollInterval=2m`: Checks for secret updates every 2 minutes -- `syncSecret.enabled=true`: Enables syncing secrets to Kubernetes secrets (optional) +- `syncSecret.enabled=true`: Enables syncing secrets to Kubernetes secrets If you do not wish to use the secret rotation feature of the secrets store CSI From 9b31a7bbb107143bb13b2df84dafcc743cff52ab Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Fri, 29 Nov 2024 22:13:47 +0800 Subject: [PATCH 21/35] misc: added important note --- docs/integrations/platforms/kubernetes-csi.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/integrations/platforms/kubernetes-csi.mdx b/docs/integrations/platforms/kubernetes-csi.mdx index 79cfba304..08f4ae237 100644 --- a/docs/integrations/platforms/kubernetes-csi.mdx +++ b/docs/integrations/platforms/kubernetes-csi.mdx @@ -106,6 +106,12 @@ In order for the Infisical CSI provider to pull secrets from your Infisical proj a machine identity with [Kubernetes authentication](https://infisical.com/docs/documentation/platform/identities/kubernetes-auth) configured with your cluster. You can refer to the documentation for setting it up [here](https://infisical.com/docs/documentation/platform/identities/kubernetes-auth#guide). + + The allowed audience field of the Kubernetes authentication settings should + match the audience specified for the Secrets Store CSI driver during + installation. + + ### Creating Secret Provider Class With the Secrets Store CSI driver and the Infisical CSI provider installed, create a Kubernetes [SecretProviderClass](https://secrets-store-csi-driver.sigs.k8s.io/concepts.html#secretproviderclass) resource to establish From 16d215b58811433e33f52802df218663d6442997 Mon Sep 17 00:00:00 2001 From: Scott Wilson <78768277+scott-ray-wilson@users.noreply.github.com> Date: Fri, 29 Nov 2024 08:17:34 -0800 Subject: [PATCH 22/35] add todo(author) to previous existing comment --- .../AppLayout/components/ProjectSelect/ProjectSelect.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx index fb5dec26a..2768abfed 100644 --- a/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx +++ b/frontend/src/layouts/AppLayout/components/ProjectSelect/ProjectSelect.tsx @@ -186,7 +186,7 @@ export const ProjectSelect = () => { const project = newValue as TWorkspaceWithFaveProp; localStorage.setItem("projectData.id", project.id); - // this is not using react query because react query in overview is throwing error when envs are not exact same count + // todo(akhi): this is not using react query because react query in overview is throwing error when envs are not exact same count // to reproduce change this back to router.push and switch between two projects with different env count // look into this on dashboard revamp window.location.assign(`/project/${project.id}/secrets/overview`); From c7a32a3b0579e23a909f81909c661cd72a6161b8 Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Sat, 30 Nov 2024 02:13:43 +0800 Subject: [PATCH 23/35] misc: updated docs --- .../integrations/platforms/kubernetes-csi.mdx | 41 ++++++++++++++++--- 1 file changed, 35 insertions(+), 6 deletions(-) diff --git a/docs/integrations/platforms/kubernetes-csi.mdx b/docs/integrations/platforms/kubernetes-csi.mdx index 08f4ae237..05b981bbd 100644 --- a/docs/integrations/platforms/kubernetes-csi.mdx +++ b/docs/integrations/platforms/kubernetes-csi.mdx @@ -6,7 +6,7 @@ description: "How to use Infisical to inject secrets directly into Kubernetes po ## Overview The Infisical CSI provider allows you to use Infisical with the [Secrets Store CSI driver](https://secrets-store-csi-driver.sigs.k8s.io) to inject secrets directly into your Kubernetes pods through a volume mount. -In contrast to the [Infisical Kubernetes Operator](https://infisical.com/docs/integrations/platforms/kubernetes), the Infisical CSI provider will allow you to sync Infisical secrets directly to pods, removing the need for Kubernetes secret resources. +In contrast to the [Infisical Kubernetes Operator](https://infisical.com/docs/integrations/platforms/kubernetes), the Infisical CSI provider will allow you to sync Infisical secrets directly to pods as files, removing the need for Kubernetes secret resources. ```mermaid flowchart LR @@ -28,7 +28,7 @@ The following features are supported by the Infisical CSI Provider: - Integration with Secrets Store CSI Driver for direct pod mounting - Authentication using Kubernetes service accounts via machine identities -- Secret rotation and auto-syncing when enabled via CSI Driver +- Auto-syncing secrets when enabled via CSI Driver - Configurable secret paths and file mounting locations - Installation via Helm @@ -68,12 +68,12 @@ The flags configure the following: - `syncSecret.enabled=true`: Enables syncing secrets to Kubernetes secrets - If you do not wish to use the secret rotation feature of the secrets store CSI + If you do not wish to use the auto-syncing feature of the secrets store CSI driver, you can omit the `enableSecretRotation` and the `rotationPollInterval` flags. Do note that by default, secrets from Infisical are only fetched and mounted during pod creation. If there are any changes made to the secrets in - Infisical, they will not propagate to the pods unless secret rotation is - enabled for the CSI driver. + Infisical, they will not propagate to the pods unless auto-syncing is enabled + for the CSI driver. ### Install Infisical CSI Provider @@ -115,7 +115,7 @@ You can refer to the documentation for setting it up [here](https://infisical.co ### Creating Secret Provider Class With the Secrets Store CSI driver and the Infisical CSI provider installed, create a Kubernetes [SecretProviderClass](https://secrets-store-csi-driver.sigs.k8s.io/concepts.html#secretproviderclass) resource to establish -the connection between the CSI driver and the Infisical CSI provider for secret retrieval. You can create as much Secret Provider Classes as needed for your cluster. +the connection between the CSI driver and the Infisical CSI provider for secret retrieval. You can create as many Secret Provider Classes as needed for your cluster. ```yaml apiVersion: secrets-store.csi.x-k8s.io/v1 @@ -126,6 +126,7 @@ spec: provider: infisical parameters: infisicalUrl: "https://app.infisical.com" + authMethod: "kubernetes" identityId: "ad2f8c67-cbe2-417a-b5eb-1339776ec0b3" projectId: "09eda1f8-85a3-47a9-8a6f-e27f133b2a36" envSlug: "prod" @@ -157,6 +158,11 @@ spec: this should be omitted. + + The auth method to use for authenticating the Infisical CSI provider with + Infisical. For now, the only supported method is `kubernetes`. + + The ID of the machine identity to use for authenticating the Infisical CSI provider with your Infisical organization. This should be the machine identity @@ -249,3 +255,26 @@ kubectl logs csi-secrets-store-csi-driver-7h4jp -n=kube-system ## Best Practices For additional guidance on setting this up for your production cluster, you can refer to the Secrets Store CSI driver documentation [here](https://secrets-store-csi-driver.sigs.k8s.io/topics/best-practices). + +## Frequently Asked Questions + + + + Yes, you can use secrets as environment variables in your pods. This requires two steps: + + 1. Enable syncing to Kubernetes secrets using `syncSecret.enabled=true` in the CSI driver configuration. + 2. Configure your pod to use these synced Kubernetes secrets as environment variables. + +You can find detailed examples in the [Secrets Store CSI driver documentation](https://secrets-store-csi-driver.sigs.k8s.io/topics/set-as-env-var). + + + + + + + Yes, you will need to explicitly list each secret you want to sync in the + Secret Provider Class configuration. This is a common requirement across all + CSI providers as the Secrets Store CSI Driver architecture requires specific + mapping of secrets to their mounted file locations. + + From 3455ad389829d187017516f9597956f15427d973 Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Sat, 30 Nov 2024 02:17:11 +0800 Subject: [PATCH 24/35] misc: correct faq 1 --- docs/integrations/platforms/kubernetes-csi.mdx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/docs/integrations/platforms/kubernetes-csi.mdx b/docs/integrations/platforms/kubernetes-csi.mdx index 05b981bbd..88df9585c 100644 --- a/docs/integrations/platforms/kubernetes-csi.mdx +++ b/docs/integrations/platforms/kubernetes-csi.mdx @@ -259,13 +259,14 @@ For additional guidance on setting this up for your production cluster, you can ## Frequently Asked Questions - - Yes, you can use secrets as environment variables in your pods. This requires two steps: - - 1. Enable syncing to Kubernetes secrets using `syncSecret.enabled=true` in the CSI driver configuration. - 2. Configure your pod to use these synced Kubernetes secrets as environment variables. + + Yes, but it requires an indirect approach: -You can find detailed examples in the [Secrets Store CSI driver documentation](https://secrets-store-csi-driver.sigs.k8s.io/topics/set-as-env-var). + 1. First enable syncing to Kubernetes secrets by setting `syncSecret.enabled=true` in the CSI driver installation + 2. Configure the Secret Provider Class to sync specific secrets to Kubernetes secrets + 3. Use the resulting Kubernetes secrets in your pod's environment variables + + This means secrets are first synced to Kubernetes secrets before they can be used as environment variables. You can find detailed examples in the [Secrets Store CSI driver documentation](https://secrets-store-csi-driver.sigs.k8s.io/topics/set-as-env-var). From 2de5896ba4217bda3f8a99a96308aaa51ca25080 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 29 Nov 2024 22:23:42 +0400 Subject: [PATCH 25/35] fix(cli): update snapshots --- .../test-TestUniversalAuth_SecretsGetWrongEnvironment | 2 +- .../.snapshots/test-testUserAuth_SecretsGetAllWithoutConnection | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cli/test/.snapshots/test-TestUniversalAuth_SecretsGetWrongEnvironment b/cli/test/.snapshots/test-TestUniversalAuth_SecretsGetWrongEnvironment index ff7925d75..b447d947e 100644 --- a/cli/test/.snapshots/test-TestUniversalAuth_SecretsGetWrongEnvironment +++ b/cli/test/.snapshots/test-TestUniversalAuth_SecretsGetWrongEnvironment @@ -1,4 +1,4 @@ -error: CallGetRawSecretsV3: Unsuccessful response [GET https://app.infisical.com/api/v3/secrets/raw?environment=invalid-env&expandSecretReferences=true&include_imports=true&recursive=true&secretPath=%2F&workspaceId=bef697d4-849b-4a75-b284-0922f87f8ba2] [status-code=404] [response={"statusCode":404,"message":"Environment with slug 'invalid-env' in project with ID bef697d4-849b-4a75-b284-0922f87f8ba2 not found","error":"NotFound"}] +error: CallGetRawSecretsV3: Unsuccessful response [GET https://app.infisical.com/api/v3/secrets/raw?environment=invalid-env&expandSecretReferences=true&include_imports=true&recursive=true&secretPath=%2F&workspaceId=bef697d4-849b-4a75-b284-0922f87f8ba2] [status-code=404] [response={"error":"NotFound","message":"Environment with slug 'invalid-env' in project with ID bef697d4-849b-4a75-b284-0922f87f8ba2 not found","statusCode":404}] If this issue continues, get support at https://infisical.com/slack diff --git a/cli/test/.snapshots/test-testUserAuth_SecretsGetAllWithoutConnection b/cli/test/.snapshots/test-testUserAuth_SecretsGetAllWithoutConnection index 71a189a65..2ca9d13ad 100644 --- a/cli/test/.snapshots/test-testUserAuth_SecretsGetAllWithoutConnection +++ b/cli/test/.snapshots/test-testUserAuth_SecretsGetAllWithoutConnection @@ -1,4 +1,4 @@ -Warning: Unable to fetch the latest secret(s) due to connection error, serving secrets from last successful fetch. For more info, run with --debug +Warning: Unable to fetch the latest secret(s) due to connection error, serving secrets from last successful fetch. For more info, run with --debug ┌───────────────┬──────────────┬─────────────┐ │ SECRET NAME │ SECRET VALUE │ SECRET TYPE │ ├───────────────┼──────────────┼─────────────┤ From b96593d0ab47b20eb6f24a7d5e2a0072b88c7683 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 29 Nov 2024 22:30:52 +0400 Subject: [PATCH 26/35] fix(cli): re-enabled disabled test --- cli/test/secrets_test.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/test/secrets_test.go b/cli/test/secrets_test.go index f11392f52..ba7ce7382 100644 --- a/cli/test/secrets_test.go +++ b/cli/test/secrets_test.go @@ -96,7 +96,7 @@ func TestUserAuth_SecretsGetAll(t *testing.T) { // testUserAuth_SecretsGetAllWithoutConnection(t) } -func testUserAuth_SecretsGetAllWithoutConnection(t *testing.T) { +func TestUserAuth_SecretsGetAllWithoutConnection(t *testing.T) { originalConfigFile, err := util.GetConfigFile() if err != nil { t.Fatalf("error getting config file") From cfc0ca1f038951f47e5d866481c165c67a372c8d Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 29 Nov 2024 22:31:31 +0400 Subject: [PATCH 27/35] fix(cli): filter out dynamically generated request ID --- cli/test/helper.go | 41 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/cli/test/helper.go b/cli/test/helper.go index 819f4c4c9..14e6f6b78 100644 --- a/cli/test/helper.go +++ b/cli/test/helper.go @@ -1,6 +1,7 @@ package tests import ( + "encoding/json" "fmt" "log" "os" @@ -43,9 +44,9 @@ func ExecuteCliCommand(command string, args ...string) (string, error) { output, err := cmd.CombinedOutput() if err != nil { fmt.Println(fmt.Sprint(err) + ": " + string(output)) - return strings.TrimSpace(string(output)), err + return FilterRequestID(strings.TrimSpace(string(output))), err } - return strings.TrimSpace(string(output)), nil + return FilterRequestID(strings.TrimSpace(string(output))), nil } func SetupCli() { @@ -67,3 +68,39 @@ func SetupCli() { } } + +func FilterRequestID(input string) string { + + if !strings.Contains(input, "requestId") && strings.Contains(input, "reqId") { + return input + } + + // Find the JSON part of the error message + start := strings.Index(input, "{") + end := strings.LastIndex(input, "}") + 1 + + if start == -1 || end == -1 { + return input + } + + jsonPart := input[:start] // Pre-JSON content + + // Parse the JSON object + var errorObj map[string]interface{} + if err := json.Unmarshal([]byte(input[start:end]), &errorObj); err != nil { + return input + } + + // Remove requestId field + delete(errorObj, "requestId") + delete(errorObj, "reqId") + + // Convert back to JSON + filtered, err := json.Marshal(errorObj) + if err != nil { + return input + } + + // Reconstruct the full string + return jsonPart + string(filtered) + input[end:] +} From 27beca709952a0ae482fcc1af2db8ab4d28c5533 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 29 Nov 2024 22:38:28 +0400 Subject: [PATCH 28/35] fix(cli): request filter bug --- cli/test/helper.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/test/helper.go b/cli/test/helper.go index 14e6f6b78..2d8a907cd 100644 --- a/cli/test/helper.go +++ b/cli/test/helper.go @@ -71,7 +71,7 @@ func SetupCli() { func FilterRequestID(input string) string { - if !strings.Contains(input, "requestId") && strings.Contains(input, "reqId") { + if !strings.Contains(input, "requestId") && !strings.Contains(input, "reqId") { return input } From 586b9d9a56803006e47fd7fda226c8b60eb2ae60 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 29 Nov 2024 22:48:39 +0400 Subject: [PATCH 29/35] fix(cli): tests failing --- cli/test/helper.go | 8 ++------ cli/test/secrets_test.go | 3 ++- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/cli/test/helper.go b/cli/test/helper.go index 2d8a907cd..21bd261df 100644 --- a/cli/test/helper.go +++ b/cli/test/helper.go @@ -42,8 +42,9 @@ var creds = Credentials{ func ExecuteCliCommand(command string, args ...string) (string, error) { cmd := exec.Command(command, args...) output, err := cmd.CombinedOutput() + if err != nil { - fmt.Println(fmt.Sprint(err) + ": " + string(output)) + fmt.Println(fmt.Sprint(err) + ": " + FilterRequestID(strings.TrimSpace(string(output)))) return FilterRequestID(strings.TrimSpace(string(output))), err } return FilterRequestID(strings.TrimSpace(string(output))), nil @@ -70,11 +71,6 @@ func SetupCli() { } func FilterRequestID(input string) string { - - if !strings.Contains(input, "requestId") && !strings.Contains(input, "reqId") { - return input - } - // Find the JSON part of the error message start := strings.Index(input, "{") end := strings.LastIndex(input, "}") + 1 diff --git a/cli/test/secrets_test.go b/cli/test/secrets_test.go index ba7ce7382..2a92c6209 100644 --- a/cli/test/secrets_test.go +++ b/cli/test/secrets_test.go @@ -96,7 +96,8 @@ func TestUserAuth_SecretsGetAll(t *testing.T) { // testUserAuth_SecretsGetAllWithoutConnection(t) } -func TestUserAuth_SecretsGetAllWithoutConnection(t *testing.T) { +// disabled for the time being +func testUserAuth_SecretsGetAllWithoutConnection(t *testing.T) { originalConfigFile, err := util.GetConfigFile() if err != nil { t.Fatalf("error getting config file") From dc3903ff15595b5a08f5478d4a73bdeae3db6c6c Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Fri, 29 Nov 2024 23:02:18 +0400 Subject: [PATCH 30/35] fix(cli): disabled test --- cli/test/secrets_test.go | 43 ++++++++++++++++++++-------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/cli/test/secrets_test.go b/cli/test/secrets_test.go index 2a92c6209..f7f0f13ff 100644 --- a/cli/test/secrets_test.go +++ b/cli/test/secrets_test.go @@ -3,7 +3,6 @@ package tests import ( "testing" - "github.com/Infisical/infisical-merge/packages/util" "github.com/bradleyjkemp/cupaloy/v2" ) @@ -97,28 +96,28 @@ func TestUserAuth_SecretsGetAll(t *testing.T) { } // disabled for the time being -func testUserAuth_SecretsGetAllWithoutConnection(t *testing.T) { - originalConfigFile, err := util.GetConfigFile() - if err != nil { - t.Fatalf("error getting config file") - } - newConfigFile := originalConfigFile +// func testUserAuth_SecretsGetAllWithoutConnection(t *testing.T) { +// originalConfigFile, err := util.GetConfigFile() +// if err != nil { +// t.Fatalf("error getting config file") +// } +// newConfigFile := originalConfigFile - // set it to a URL that will always be unreachable - newConfigFile.LoggedInUserDomain = "http://localhost:4999" - util.WriteConfigFile(&newConfigFile) +// // set it to a URL that will always be unreachable +// newConfigFile.LoggedInUserDomain = "http://localhost:4999" +// util.WriteConfigFile(&newConfigFile) - // restore config file - defer util.WriteConfigFile(&originalConfigFile) +// // restore config file +// defer util.WriteConfigFile(&originalConfigFile) - output, err := ExecuteCliCommand(FORMATTED_CLI_NAME, "secrets", "--projectId", creds.ProjectID, "--env", creds.EnvSlug, "--include-imports=false", "--silent") - if err != nil { - t.Fatalf("error running CLI command: %v", err) - } +// output, err := ExecuteCliCommand(FORMATTED_CLI_NAME, "secrets", "--projectId", creds.ProjectID, "--env", creds.EnvSlug, "--include-imports=false", "--silent") +// if err != nil { +// t.Fatalf("error running CLI command: %v", err) +// } - // Use cupaloy to snapshot test the output - err = cupaloy.Snapshot(output) - if err != nil { - t.Fatalf("snapshot failed: %v", err) - } -} +// // Use cupaloy to snapshot test the output +// err = cupaloy.Snapshot(output) +// if err != nil { +// t.Fatalf("snapshot failed: %v", err) +// } +// } From c8fba7ce4c4a298255484125a616c4c30ab8eca7 Mon Sep 17 00:00:00 2001 From: Scott Wilson Date: Fri, 29 Nov 2024 11:17:54 -0800 Subject: [PATCH 31/35] improvement: align pagination left on grid view project overview --- frontend/src/components/v2/Pagination/Pagination.tsx | 2 +- frontend/src/pages/org/[id]/overview/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/v2/Pagination/Pagination.tsx b/frontend/src/components/v2/Pagination/Pagination.tsx index 51eed6396..2d0e8b1a9 100644 --- a/frontend/src/components/v2/Pagination/Pagination.tsx +++ b/frontend/src/components/v2/Pagination/Pagination.tsx @@ -54,7 +54,7 @@ export const Pagination = ({ )} > {startAdornment} -
+
{(page - 1) * perPage + 1} - {Math.min((page - 1) * perPage + perPage, count)} of {count}
diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx index 45fc7f3d2..9e39fd389 100644 --- a/frontend/src/pages/org/[id]/overview/index.tsx +++ b/frontend/src/pages/org/[id]/overview/index.tsx @@ -876,7 +876,7 @@ const OrganizationPage = () => { Date: Fri, 29 Nov 2024 13:27:24 -0800 Subject: [PATCH 32/35] improvement: update copy secrets from env select and secret selection --- .../v2/FilterableSelect/FilterableSelect.tsx | 3 +- .../SecretDropzone/CopySecretsFromBoard.tsx | 177 +++++++----------- 2 files changed, 69 insertions(+), 111 deletions(-) diff --git a/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx b/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx index ad51f565d..d60df5b30 100644 --- a/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx +++ b/frontend/src/components/v2/FilterableSelect/FilterableSelect.tsx @@ -58,6 +58,7 @@ export const FilterableSelect = ({ clearIndicator: () => "p-1 hover:text-red text-bunker-400", indicatorSeparator: () => "bg-bunker-400", dropdownIndicator: () => "text-bunker-200 p-1", + menuList: () => "flex flex-col gap-1", menu: () => "mt-2 p-2 border text-sm text-mineshaft-200 thin-scrollbar bg-mineshaft-900 border-mineshaft-600 rounded-md", groupHeading: () => "ml-3 mt-2 mb-1 text-mineshaft-400 text-sm", @@ -65,7 +66,7 @@ export const FilterableSelect = ({ twMerge( isFocused && "bg-mineshaft-700 active:bg-mineshaft-600", isSelected && "text-mineshaft-200", - "hover:cursor-pointer mb-1 rounded text-xs px-3 py-2" + "hover:cursor-pointer rounded text-xs px-3 py-2" ), noOptionsMessage: () => "text-mineshaft-400 p-2 rounded-md" }} diff --git a/frontend/src/views/SecretMainPage/components/SecretDropzone/CopySecretsFromBoard.tsx b/frontend/src/views/SecretMainPage/components/SecretDropzone/CopySecretsFromBoard.tsx index fb5355298..e0e8b9e68 100644 --- a/frontend/src/views/SecretMainPage/components/SecretDropzone/CopySecretsFromBoard.tsx +++ b/frontend/src/views/SecretMainPage/components/SecretDropzone/CopySecretsFromBoard.tsx @@ -1,14 +1,7 @@ import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { subject } from "@casl/ability"; -import { - faClone, - faFileImport, - faKey, - faSearch, - faSquareCheck, - faSquareXmark -} from "@fortawesome/free-solid-svg-icons"; +import { faClone, faFileImport, faSquareCheck } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; @@ -16,17 +9,13 @@ import { z } from "zod"; import { ProjectPermissionCan } from "@app/components/permissions"; import { Button, - Checkbox, - EmptyState, + FilterableSelect, FormControl, IconButton, - Input, Modal, ModalContent, ModalTrigger, - Select, - SelectItem, - Skeleton, + Switch, Tooltip } from "@app/components/v2"; import { SecretPathInput } from "@app/components/v2/SecretPathInput"; @@ -35,14 +24,14 @@ import { useDebounce } from "@app/hooks"; import { useGetProjectSecrets } from "@app/hooks/api"; const formSchema = z.object({ - environment: z.string().trim(), + environment: z.object({ name: z.string(), slug: z.string() }), secretPath: z .string() .trim() .transform((val) => typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val ), - secrets: z.record(z.string().optional().nullable()) + secrets: z.object({ key: z.string(), value: z.string().optional() }).array().min(1) }); type TFormSchema = z.infer; @@ -68,7 +57,6 @@ export const CopySecretsFromBoard = ({ onToggle, onParsedEnv }: Props) => { - const [searchFilter, setSearchFilter] = useState(""); const [shouldIncludeValues, setShouldIncludeValues] = useState(true); const { @@ -80,7 +68,7 @@ export const CopySecretsFromBoard = ({ formState: { isDirty } } = useForm({ resolver: zodResolver(formSchema), - defaultValues: { secretPath: "/", environment: environments?.[0]?.slug } + defaultValues: { secretPath: "/", environment: environments?.[0] } }); const envCopySecPath = watch("secretPath"); @@ -89,7 +77,7 @@ export const CopySecretsFromBoard = ({ const { data: secrets, isLoading: isSecretsLoading } = useGetProjectSecrets({ workspaceId, - environment: selectedEnvSlug, + environment: selectedEnvSlug.slug, secretPath: debouncedEnvCopySecretPath, options: { enabled: @@ -101,29 +89,22 @@ export const CopySecretsFromBoard = ({ }); useEffect(() => { - setValue("secrets", {}); - setSearchFilter(""); - }, [debouncedEnvCopySecretPath]); + setValue("secrets", []); + }, [debouncedEnvCopySecretPath, selectedEnvSlug]); const handleSecSelectAll = () => { if (secrets) { - setValue( - "secrets", - secrets?.reduce((prev, curr) => ({ ...prev, [curr.key]: curr.value }), {}), - { shouldDirty: true } - ); + setValue("secrets", secrets, { shouldDirty: true }); } }; const handleFormSubmit = async (data: TFormSchema) => { const secretsToBePulled: Record = {}; - Object.keys(data.secrets || {}).forEach((key) => { - if (data.secrets[key]) { - secretsToBePulled[key] = { - value: (shouldIncludeValues && data.secrets[key]) || "", - comments: [""] - }; - } + data.secrets.forEach(({ key, value }) => { + secretsToBePulled[key] = { + value: (shouldIncludeValues && value) || "", + comments: [""] + }; }); onParsedEnv(secretsToBePulled); onToggle(false); @@ -136,7 +117,6 @@ export const CopySecretsFromBoard = ({ onOpenChange={(state) => { onToggle(state); reset(); - setSearchFilter(""); }} > @@ -176,22 +156,14 @@ export const CopySecretsFromBoard = ({ name="environment" render={({ field: { value, onChange } }) => ( - + onChange={onChange} + options={environments} + placeholder="Select environment..." + getOptionLabel={(option) => option.name} + getOptionValue={(option) => option.slug} + /> )} /> @@ -203,7 +175,7 @@ export const CopySecretsFromBoard = ({ )} @@ -212,72 +184,57 @@ export const CopySecretsFromBoard = ({
Secrets
-
- +
+ ( + + option.key} + getOptionLabel={(option) => option.key} + /> + + )} + /> + + } - onChange={(evt) => setSearchFilter(evt.target.value)} - /> - - - - - - - reset()} - > - - - -
+ onClick={handleSecSelectAll} + > + + +
- {!isSecretsLoading && !secrets?.length && ( - - )} -
- {isSecretsLoading && - Array.apply(0, Array(2)).map((_x, i) => ( - - ))} - - {secrets - ?.filter(({ key }) => key.toLowerCase().includes(searchFilter.toLowerCase())) - ?.map(({ id, key, value: secVal }) => ( - ( - onChange(isChecked ? secVal : "")} - > - {key} - - )} - /> - ))} -
-
- + setShouldIncludeValues(isChecked as boolean)} > Include secret values - +
Secrets
-
+