From 550cb2b5ec8c2b09379a4758dc6b42faf63e81c5 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Thu, 1 May 2025 19:50:50 +0400 Subject: [PATCH] smaller ui improvements --- .../WorkflowIntegrationTab.tsx | 2 - .../components/MicrosoftTeamsConfigRow.tsx | 94 ++++++++-------- .../MicrosoftTeamsIntegrationForm.tsx | 61 ++++++++--- .../components/SlackConfigRow.tsx | 103 ++++++++++-------- 4 files changed, 146 insertions(+), 114 deletions(-) diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx index 116429668..1cec10b9b 100644 --- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx +++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx @@ -93,8 +93,6 @@ export const WorkflowIntegrationTab = () => { Provider - Access Request Notifications - Secret Request Notifications Access Request Notifications Destination Secret Request Notifications Destination diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx index 19caa2c33..f341b67c9 100644 --- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx +++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx @@ -1,5 +1,6 @@ +/* eslint-disable no-nested-ternary */ import { BsMicrosoftTeams } from "react-icons/bs"; -import { faCheck, faEllipsis, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faEllipsis } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { twMerge } from "tailwind-merge"; @@ -34,10 +35,11 @@ type Props = { export const MicrosoftTeamsConfigRow = ({ handlePopUpOpen }: Props) => { const { currentWorkspace } = useWorkspace(); - const { data: microsoftTeamsConfig } = useGetWorkspaceWorkflowIntegrationConfig({ - workspaceId: currentWorkspace?.id ?? "", - integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS - }); + const { data: microsoftTeamsConfig, isPending: isMicrosoftTeamsConfigLoading } = + useGetWorkspaceWorkflowIntegrationConfig({ + workspaceId: currentWorkspace?.id ?? "", + integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS + }); const { data: microsoftTeamsChannels, isPending: isMicrosoftTeamsChannelsLoading } = useGetMicrosoftTeamsIntegrationTeams(microsoftTeamsConfig?.integrationId); @@ -51,6 +53,8 @@ export const MicrosoftTeamsConfigRow = ({ handlePopUpOpen }: Props) => { return null; } + const isLoadingConfig = isMicrosoftTeamsChannelsLoading || isMicrosoftTeamsConfigLoading; + return ( @@ -60,39 +64,33 @@ export const MicrosoftTeamsConfigRow = ({ handlePopUpOpen }: Props) => { - {microsoftTeamsConfig.isAccessRequestNotificationEnabled ? ( - - ) : ( - - )} - - - {microsoftTeamsConfig.isSecretRequestNotificationEnabled ? ( - - ) : ( - - )} - - - {isMicrosoftTeamsChannelsLoading ? ( - - ) : ( + {microsoftTeamsConfig.isAccessRequestNotificationEnabled && + !isLoadingConfig && + microsoftTeamsConfig.accessRequestChannels?.channelIds?.length > 0 ? ( - {(microsoftTeamsConfig.accessRequestChannels?.channelIds || []) - ?.map((channel) => microsoftTeamsChannelIdToName[channel]) + {microsoftTeamsConfig.accessRequestChannels.channelIds + .map((channel) => microsoftTeamsChannelIdToName[channel]) .join(", ")} + ) : isLoadingConfig ? ( + + ) : ( + Disabled )} - {isMicrosoftTeamsChannelsLoading ? ( - - ) : ( + {microsoftTeamsConfig.isSecretRequestNotificationEnabled && + !isLoadingConfig && + microsoftTeamsConfig.secretRequestChannels?.channelIds?.length > 0 ? ( - {(microsoftTeamsConfig.secretRequestChannels?.channelIds || []) - ?.map((channel) => microsoftTeamsChannelIdToName[channel]) + {microsoftTeamsConfig.secretRequestChannels.channelIds + .map((channel) => microsoftTeamsChannelIdToName[channel]) .join(", ")} + ) : isLoadingConfig ? ( + + ) : ( + Disabled )} @@ -104,6 +102,25 @@ export const MicrosoftTeamsConfigRow = ({ handlePopUpOpen }: Props) => { + + {(isAllowed) => ( + { + e.stopPropagation(); + + handlePopUpOpen("editIntegration", { + integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS + }); + }} + > + Edit + + )} + {(isAllowed) => ( { )} - - {(isAllowed) => ( - { - e.stopPropagation(); - - handlePopUpOpen("editIntegration", { - integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS - }); - }} - > - Edit - - )} - diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx index 166d76ca0..fc7fba9c3 100644 --- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx +++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsIntegrationForm.tsx @@ -17,7 +17,8 @@ import { Input, Select, SelectItem, - Switch + Switch, + Tooltip } from "@app/components/v2"; import { useWorkspace } from "@app/context"; import { @@ -37,18 +38,22 @@ const formSchema = z microsoftTeamsIntegrationId: z.string(), isSecretRequestNotificationEnabled: z.boolean(), isAccessRequestNotificationEnabled: z.boolean(), - secretRequestChannels: z.object({ - teamId: z.string(), - channelIds: z.string().array() - }), - accessRequestChannels: z.object({ - teamId: z.string(), - channelIds: z.string().array() - }) + secretRequestChannels: z + .object({ + teamId: z.string(), + channelIds: z.string().array() + }) + .optional(), + accessRequestChannels: z + .object({ + teamId: z.string(), + channelIds: z.string().array() + }) + .optional() }) .superRefine((data, ctx) => { if (data.isSecretRequestNotificationEnabled) { - if (!data.secretRequestChannels.teamId) { + if (!data?.secretRequestChannels?.teamId) { ctx.addIssue({ path: ["secretRequestChannels", "teamId"], code: z.ZodIssueCode.custom, @@ -56,7 +61,7 @@ const formSchema = z }); } - if (!data.secretRequestChannels.channelIds.length) { + if (!data?.secretRequestChannels?.channelIds?.length) { ctx.addIssue({ path: ["secretRequestChannels", "channelIds"], code: z.ZodIssueCode.custom, @@ -66,7 +71,7 @@ const formSchema = z } if (data.isAccessRequestNotificationEnabled) { - if (!data.accessRequestChannels.teamId) { + if (!data?.accessRequestChannels?.teamId) { ctx.addIssue({ path: ["accessRequestChannels", "teamId"], code: z.ZodIssueCode.custom, @@ -74,7 +79,7 @@ const formSchema = z }); } - if (!data.accessRequestChannels.channelIds.length) { + if (!data?.accessRequestChannels?.channelIds?.length) { ctx.addIssue({ path: ["accessRequestChannels", "channelIds"], code: z.ZodIssueCode.custom, @@ -108,7 +113,8 @@ export const MicrosoftTeamsIntegrationForm = ({ onClose }: Props) => { watch, handleSubmit, setValue, - formState: { isDirty, isSubmitting } + getValues, + formState: { isDirty, isSubmitting, errors } } = useForm({ resolver: zodResolver(formSchema), defaultValues: { @@ -210,13 +216,20 @@ export const MicrosoftTeamsIntegrationForm = ({ onClose }: Props) => { if (microsoftTeamsConfig.integration === WorkflowIntegrationPlatform.MICROSOFT_TEAMS) { if (microsoftTeamsConfig.secretRequestChannels) { - setValue("secretRequestChannels", microsoftTeamsConfig.secretRequestChannels); - setValue("accessRequestChannels", microsoftTeamsConfig.accessRequestChannels); + if (Object.entries(microsoftTeamsConfig.accessRequestChannels).length) { + setValue("accessRequestChannels", microsoftTeamsConfig.accessRequestChannels); + } + if (Object.entries(microsoftTeamsConfig.secretRequestChannels).length) { + setValue("secretRequestChannels", microsoftTeamsConfig.secretRequestChannels); + } } } } }, [microsoftTeamsConfig]); + console.log("values", getValues()); + console.log("errors", errors); + return (
@@ -235,7 +248,20 @@ export const MicrosoftTeamsIntegrationForm = ({ onClose }: Props) => { {...field} isDisabled={!isAllowed} placeholder="None" - onValueChange={onChange} + onValueChange={(v) => { + onChange(v); + + setValue("isAccessRequestNotificationEnabled", false); + setValue("isSecretRequestNotificationEnabled", false); + setValue("accessRequestChannels", { + teamId: "", + channelIds: [] + }); + setValue("secretRequestChannels", { + teamId: "", + channelIds: [] + }); + }} className="w-full" defaultValue={microsoftTeamsConfig?.integrationId} > @@ -522,6 +548,7 @@ export const MicrosoftTeamsIntegrationForm = ({ onClose }: Props) => { colorSchema="secondary" className="mt-4" type="submit" + disabled={!isDirty} isDisabled={!isDirty} isLoading={isSubmitting} > diff --git a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx index 01016acef..d71176927 100644 --- a/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx +++ b/frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx @@ -1,5 +1,6 @@ +/* eslint-disable no-nested-ternary */ import { BsSlack } from "react-icons/bs"; -import { faCheck, faEllipsis, faXmark } from "@fortawesome/free-solid-svg-icons"; +import { faEllipsis } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { twMerge } from "tailwind-merge"; @@ -10,6 +11,7 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, + Spinner, Td, Tr } from "@app/components/v2"; @@ -33,12 +35,15 @@ type Props = { export const SlackConfigRow = ({ handlePopUpOpen }: Props) => { const { currentWorkspace } = useWorkspace(); - const { data: slackConfig } = useGetWorkspaceWorkflowIntegrationConfig({ - workspaceId: currentWorkspace?.id ?? "", - integration: WorkflowIntegrationPlatform.SLACK - }); + const { data: slackConfig, isPending: isSlackConfigLoading } = + useGetWorkspaceWorkflowIntegrationConfig({ + workspaceId: currentWorkspace?.id ?? "", + integration: WorkflowIntegrationPlatform.SLACK + }); - const { data: slackChannels } = useGetSlackIntegrationChannels(slackConfig?.integrationId); + const { data: slackChannels, isPending: isSlackChannelsLoading } = useGetSlackIntegrationChannels( + slackConfig?.integrationId + ); const slackChannelIdToName = Object.fromEntries( (slackChannels || []).map((channel) => [channel.id, channel.name]) ); @@ -47,6 +52,8 @@ export const SlackConfigRow = ({ handlePopUpOpen }: Props) => { return null; } + const isLoadingConfig = isSlackChannelsLoading || isSlackConfigLoading; + return ( @@ -56,35 +63,37 @@ export const SlackConfigRow = ({ handlePopUpOpen }: Props) => {
- {slackConfig.isAccessRequestNotificationEnabled ? ( - + {slackConfig.isAccessRequestNotificationEnabled && + !isLoadingConfig && + slackConfig.accessRequestChannels.length > 0 ? ( + + {slackConfig.accessRequestChannels + .split(", ") + .map((channel) => slackChannelIdToName[channel]) + .join(", ")} + + ) : isLoadingConfig ? ( + ) : ( - + Disabled )} - {slackConfig.isSecretRequestNotificationEnabled ? ( - + {slackConfig.isSecretRequestNotificationEnabled && + !isLoadingConfig && + slackConfig.secretRequestChannels.length > 0 ? ( + + {slackConfig.secretRequestChannels + .split(", ") + .map((channel) => slackChannelIdToName[channel]) + .join(", ")} + + ) : isLoadingConfig ? ( + ) : ( - + Disabled )} - - - {slackConfig.accessRequestChannels - .split(", ") - .map((channel) => slackChannelIdToName[channel]) - .join(", ")} - - - - - {slackConfig.secretRequestChannels - .split(", ") - .map((channel) => slackChannelIdToName[channel]) - .join(", ")} - - @@ -94,6 +103,25 @@ export const SlackConfigRow = ({ handlePopUpOpen }: Props) => { + + {(isAllowed) => ( + { + e.stopPropagation(); + + handlePopUpOpen("editIntegration", { + integration: WorkflowIntegrationPlatform.SLACK + }); + }} + > + Edit + + )} + {(isAllowed) => ( { )} - - {(isAllowed) => ( - { - e.stopPropagation(); - - handlePopUpOpen("editIntegration", { - integration: WorkflowIntegrationPlatform.SLACK - }); - }} - > - Edit - - )} -