mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-15 20:25:43 +00:00
Merge pull request #3486 from Infisical/daniel/ms-teams-integration
feat(workflow-integrations): microsoft teams
This commit is contained in:
Daniel Hougaard
+125
-313
@@ -1,351 +1,163 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { BsMicrosoftTeams, BsSlack } from "react-icons/bs";
|
||||
import { faGear, faPlus } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Link } from "@tanstack/react-router";
|
||||
import { z } from "zod";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { ProjectPermissionCan } from "@app/components/permissions";
|
||||
import { OrgPermissionCan } from "@app/components/permissions";
|
||||
import {
|
||||
Button,
|
||||
ContentLoader,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
DeleteActionModal,
|
||||
EmptyState,
|
||||
FormControl,
|
||||
Input,
|
||||
Select,
|
||||
SelectItem,
|
||||
Switch
|
||||
Table,
|
||||
TableContainer,
|
||||
TBody,
|
||||
Td,
|
||||
THead,
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
|
||||
import { OrgPermissionActions, OrgPermissionSubjects, useWorkspace } from "@app/context";
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import {
|
||||
useGetSlackIntegrationChannels,
|
||||
useGetSlackIntegrations,
|
||||
useGetWorkspaceSlackConfig,
|
||||
useUpdateProjectSlackConfig
|
||||
useDeleteProjectWorkflowIntegration,
|
||||
useGetWorkspaceWorkflowIntegrationConfig
|
||||
} from "@app/hooks/api";
|
||||
import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
|
||||
|
||||
const formSchema = z.object({
|
||||
slackIntegrationId: z.string(),
|
||||
isSecretRequestNotificationEnabled: z.boolean(),
|
||||
secretRequestChannels: z.string().array(),
|
||||
isAccessRequestNotificationEnabled: z.boolean(),
|
||||
accessRequestChannels: z.string().array()
|
||||
});
|
||||
import { AddWorkflowIntegrationModal } from "./components/AddWorkflowIntegrationModal";
|
||||
import { EditWorkflowIntegrationModal } from "./components/EditWorkflowIntegrationModal";
|
||||
import { MicrosoftTeamsConfigRow } from "./components/MicrosoftTeamsConfigRow";
|
||||
import { SlackConfigRow } from "./components/SlackConfigRow";
|
||||
|
||||
type TSlackConfigForm = z.infer<typeof formSchema>;
|
||||
export const renderProvider = (integration: WorkflowIntegrationPlatform) => {
|
||||
if (integration === WorkflowIntegrationPlatform.SLACK) {
|
||||
return <BsSlack />;
|
||||
}
|
||||
|
||||
if (integration === WorkflowIntegrationPlatform.MICROSOFT_TEAMS) {
|
||||
return <BsMicrosoftTeams />;
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const WorkflowIntegrationTab = () => {
|
||||
const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
|
||||
"addWorkflowIntegration",
|
||||
"removeIntegration",
|
||||
"editIntegration"
|
||||
] as const);
|
||||
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { data: slackConfig, isPending: isSlackConfigLoading } = useGetWorkspaceSlackConfig({
|
||||
workspaceId: currentWorkspace?.id ?? ""
|
||||
});
|
||||
const { data: slackIntegrations } = useGetSlackIntegrations(currentWorkspace?.orgId);
|
||||
const { mutateAsync: updateProjectSlackConfig } = useUpdateProjectSlackConfig();
|
||||
const { data: slackConfig, isPending: isSlackConfigLoading } =
|
||||
useGetWorkspaceWorkflowIntegrationConfig({
|
||||
workspaceId: currentWorkspace?.id ?? "",
|
||||
integration: WorkflowIntegrationPlatform.SLACK
|
||||
});
|
||||
|
||||
const {
|
||||
control,
|
||||
watch,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isDirty, isSubmitting }
|
||||
} = useForm<TSlackConfigForm>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
isAccessRequestNotificationEnabled: false,
|
||||
accessRequestChannels: [],
|
||||
isSecretRequestNotificationEnabled: false,
|
||||
secretRequestChannels: []
|
||||
}
|
||||
});
|
||||
const { data: microsoftTeamsConfig, isPending: isMicrosoftTeamsConfigLoading } =
|
||||
useGetWorkspaceWorkflowIntegrationConfig({
|
||||
workspaceId: currentWorkspace?.id ?? "",
|
||||
integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS
|
||||
});
|
||||
|
||||
const secretRequestNotifState = watch("isSecretRequestNotificationEnabled");
|
||||
const selectedSlackIntegrationId = watch("slackIntegrationId");
|
||||
const accessRequestNotifState = watch("isAccessRequestNotificationEnabled");
|
||||
const { mutateAsync: deleteIntegration } = useDeleteProjectWorkflowIntegration();
|
||||
|
||||
const { data: slackChannels } = useGetSlackIntegrationChannels(selectedSlackIntegrationId);
|
||||
const slackChannelIdToName = Object.fromEntries(
|
||||
(slackChannels || []).map((channel) => [channel.id, channel.name])
|
||||
);
|
||||
const sortedSlackChannels = slackChannels?.sort((a, b) =>
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
||||
);
|
||||
|
||||
const handleIntegrationSave = async (data: TSlackConfigForm) => {
|
||||
if (!currentWorkspace) {
|
||||
const handleRemoveIntegration = async (
|
||||
integrationType: WorkflowIntegrationPlatform,
|
||||
integrationId: string
|
||||
) => {
|
||||
if (!currentWorkspace.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
await updateProjectSlackConfig({
|
||||
workspaceId: currentWorkspace.id,
|
||||
...data,
|
||||
accessRequestChannels: data.accessRequestChannels.filter(Boolean).join(", "),
|
||||
secretRequestChannels: data.secretRequestChannels.filter(Boolean).join(", ")
|
||||
await deleteIntegration({
|
||||
projectId: currentWorkspace?.id ?? "",
|
||||
integration: integrationType,
|
||||
integrationId
|
||||
});
|
||||
|
||||
createNotification({
|
||||
type: "success",
|
||||
text: "Successfully updated slack integration"
|
||||
text: `Successfully removed ${integrationType.replace("-", " ").replace(/\b\w/g, (char) => char.toUpperCase())} integration`
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (slackConfig) {
|
||||
setValue("slackIntegrationId", slackConfig.slackIntegrationId);
|
||||
setValue(
|
||||
"isSecretRequestNotificationEnabled",
|
||||
slackConfig.isSecretRequestNotificationEnabled
|
||||
);
|
||||
setValue(
|
||||
"isAccessRequestNotificationEnabled",
|
||||
slackConfig.isAccessRequestNotificationEnabled
|
||||
);
|
||||
|
||||
if (slackChannels) {
|
||||
setValue(
|
||||
"secretRequestChannels",
|
||||
slackConfig.secretRequestChannels
|
||||
.split(", ")
|
||||
.filter((channel) => channel in slackChannelIdToName)
|
||||
);
|
||||
setValue(
|
||||
"accessRequestChannels",
|
||||
slackConfig.accessRequestChannels
|
||||
.split(", ")
|
||||
.filter((channel) => channel in slackChannelIdToName)
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [slackConfig, slackChannels]);
|
||||
|
||||
if (isSlackConfigLoading) {
|
||||
return <ContentLoader />;
|
||||
}
|
||||
|
||||
return !slackIntegrations?.length ? (
|
||||
<EmptyState title="You do not have any integrations configured.">
|
||||
<Link
|
||||
to="/organization/settings"
|
||||
search={{
|
||||
selectedTab: "workflow-integrations"
|
||||
}}
|
||||
>
|
||||
<div className="mt-2 underline decoration-primary-800 underline-offset-4 duration-200 hover:cursor-pointer hover:text-mineshaft-100 hover:decoration-primary-600">
|
||||
Create one now
|
||||
</div>
|
||||
</Link>
|
||||
</EmptyState>
|
||||
) : (
|
||||
return (
|
||||
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
|
||||
<div className="flex justify-between">
|
||||
<h2 className="mb-2 flex-1 text-xl font-semibold text-mineshaft-100">Slack Integration</h2>
|
||||
<p className="text-xl font-semibold text-mineshaft-100">Workflow Integrations</p>
|
||||
<OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Settings}>
|
||||
{(isAllowed) => (
|
||||
<Button
|
||||
onClick={() => {
|
||||
handlePopUpOpen("addWorkflowIntegration");
|
||||
}}
|
||||
isDisabled={!isAllowed}
|
||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
</div>
|
||||
<p className="mb-4 text-gray-400">
|
||||
This integration allows you to send notifications to your Slack workspace in response to
|
||||
events in your project.
|
||||
Connect Infisical to other platforms for notification and workflow integrations.
|
||||
</p>
|
||||
<form onSubmit={handleSubmit(handleIntegrationSave)}>
|
||||
<div className="max-w-md">
|
||||
<ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
|
||||
{(isAllowed) => (
|
||||
<Controller
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl errorText={error?.message} isError={Boolean(error)}>
|
||||
<Select
|
||||
{...field}
|
||||
isDisabled={!isAllowed}
|
||||
placeholder="None"
|
||||
onValueChange={onChange}
|
||||
defaultValue={slackConfig?.slackIntegrationId}
|
||||
className="w-3/4 bg-mineshaft-600"
|
||||
>
|
||||
{slackIntegrations?.map((slackIntegration) => (
|
||||
<SelectItem
|
||||
value={slackIntegration.id}
|
||||
key={`slack-integration-${slackIntegration.id}`}
|
||||
>
|
||||
{slackIntegration.slug}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="slackIntegrationId"
|
||||
<TableContainer>
|
||||
{!!slackConfig || !!microsoftTeamsConfig ? (
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Td>Provider</Td>
|
||||
<Td>Access Request Notifications Destination</Td>
|
||||
<Td>Secret Request Notifications Destination</Td>
|
||||
<Td />
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
<SlackConfigRow
|
||||
handlePopUpOpen={handlePopUpOpen}
|
||||
isSlackConfigLoading={isSlackConfigLoading}
|
||||
slackConfig={slackConfig}
|
||||
/>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
</div>
|
||||
{selectedSlackIntegrationId && (
|
||||
<>
|
||||
<h2 className="mb-2 flex-1 text-lg font-semibold text-mineshaft-100">Events</h2>
|
||||
<Controller
|
||||
control={control}
|
||||
name="isSecretRequestNotificationEnabled"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
className="mb-2 mt-3"
|
||||
>
|
||||
<Switch
|
||||
id="secret-approval-notification"
|
||||
onCheckedChange={(value) => field.onChange(value)}
|
||||
isChecked={field.value}
|
||||
>
|
||||
<p className="w-full">Secret Approval Requests</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
<MicrosoftTeamsConfigRow
|
||||
handlePopUpOpen={handlePopUpOpen}
|
||||
isMicrosoftTeamsConfigLoading={isMicrosoftTeamsConfigLoading}
|
||||
microsoftTeamsConfig={microsoftTeamsConfig}
|
||||
/>
|
||||
</TBody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<EmptyState
|
||||
title="No project workflow integrations configured. Add a new workflow integration to get started"
|
||||
icon={faGear}
|
||||
/>
|
||||
{secretRequestNotifState && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="secretRequestChannels"
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Slack channels"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Input
|
||||
isReadOnly
|
||||
value={value
|
||||
?.filter(Boolean)
|
||||
.map((entry) => slackChannelIdToName[entry])
|
||||
.join(", ")}
|
||||
className="text-left"
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
style={{
|
||||
width: "var(--radix-dropdown-menu-trigger-width)",
|
||||
maxHeight: "350px",
|
||||
overflowY: "auto"
|
||||
}}
|
||||
side="bottom"
|
||||
align="start"
|
||||
>
|
||||
{sortedSlackChannels?.map((slackChannel) => {
|
||||
const isChecked = value?.includes(slackChannel.id);
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
onClick={(evt) => {
|
||||
evt.preventDefault();
|
||||
onChange(
|
||||
isChecked
|
||||
? value?.filter((el: string) => el !== slackChannel.id)
|
||||
: [...(value || []), slackChannel.id]
|
||||
);
|
||||
}}
|
||||
key={`secret-requests-slack-channel-${slackChannel.id}`}
|
||||
iconPos="right"
|
||||
icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
>
|
||||
{slackChannel.name}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="isAccessRequestNotificationEnabled"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl isError={Boolean(error)} errorText={error?.message} className="mb-2">
|
||||
<Switch
|
||||
id="access-request-notification"
|
||||
onCheckedChange={(value) => field.onChange(value)}
|
||||
isChecked={field.value}
|
||||
>
|
||||
<p className="w-full">Access Requests</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{accessRequestNotifState && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="accessRequestChannels"
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Slack channels"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Input
|
||||
isReadOnly
|
||||
value={value
|
||||
?.filter(Boolean)
|
||||
.map((entry) => slackChannelIdToName[entry])
|
||||
.join(", ")}
|
||||
className="text-left"
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
style={{
|
||||
width: "var(--radix-dropdown-menu-trigger-width)",
|
||||
maxHeight: "350px",
|
||||
overflowY: "auto"
|
||||
}}
|
||||
side="bottom"
|
||||
align="start"
|
||||
>
|
||||
{sortedSlackChannels?.map((slackChannel) => {
|
||||
const isChecked = value?.includes(slackChannel.id);
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
onClick={(evt) => {
|
||||
evt.preventDefault();
|
||||
onChange(
|
||||
isChecked
|
||||
? value?.filter((el: string) => el !== slackChannel.id)
|
||||
: [...(value || []), slackChannel.id]
|
||||
);
|
||||
}}
|
||||
key={`access-requests-slack-channel-${slackChannel.id}`}
|
||||
iconPos="right"
|
||||
icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
>
|
||||
{slackChannel.name}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
colorSchema="secondary"
|
||||
className="mt-4"
|
||||
type="submit"
|
||||
isDisabled={!isDirty}
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</TableContainer>
|
||||
<AddWorkflowIntegrationModal
|
||||
isOpen={popUp.addWorkflowIntegration.isOpen}
|
||||
onToggle={(state) => handlePopUpToggle("addWorkflowIntegration", state)}
|
||||
/>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.removeIntegration.isOpen}
|
||||
title="Are you sure want to remove this integration?"
|
||||
onChange={(isOpen) => handlePopUpToggle("removeIntegration", isOpen)}
|
||||
deleteKey="confirm"
|
||||
onDeleteApproved={async () => {
|
||||
await handleRemoveIntegration(
|
||||
popUp.removeIntegration.data?.integration,
|
||||
popUp.removeIntegration.data?.integrationId
|
||||
);
|
||||
handlePopUpClose("removeIntegration");
|
||||
}}
|
||||
/>
|
||||
<EditWorkflowIntegrationModal
|
||||
isOpen={popUp.editIntegration.isOpen}
|
||||
onClose={() => handlePopUpClose("editIntegration")}
|
||||
integration={popUp.editIntegration.data?.integration}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
+153
@@ -0,0 +1,153 @@
|
||||
import { useState } from "react";
|
||||
import { BsMicrosoftTeams } from "react-icons/bs";
|
||||
import { faSlack } from "@fortawesome/free-brands-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Modal, ModalContent } from "@app/components/v2";
|
||||
import { useWorkspace } from "@app/context";
|
||||
import { useGetWorkspaceWorkflowIntegrationConfig } from "@app/hooks/api";
|
||||
import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
|
||||
|
||||
import { MicrosoftTeamsIntegrationForm } from "./MicrosoftTeamsIntegrationForm";
|
||||
import { SlackIntegrationForm } from "./SlackIntegrationForm";
|
||||
|
||||
type Props = {
|
||||
isOpen?: boolean;
|
||||
onToggle: (isOpen: boolean) => void;
|
||||
};
|
||||
|
||||
enum WizardSteps {
|
||||
SelectPlatform = "select-platform",
|
||||
PlatformInputs = "platform-inputs"
|
||||
}
|
||||
|
||||
const PLATFORM_LIST = [
|
||||
{
|
||||
icon: <FontAwesomeIcon icon={faSlack} size="lg" />,
|
||||
platform: WorkflowIntegrationPlatform.SLACK,
|
||||
title: "Slack"
|
||||
},
|
||||
{
|
||||
icon: <BsMicrosoftTeams className="text-lg" />,
|
||||
platform: WorkflowIntegrationPlatform.MICROSOFT_TEAMS,
|
||||
title: "Microsoft Teams"
|
||||
}
|
||||
];
|
||||
|
||||
export const AddWorkflowIntegrationModal = ({ isOpen, onToggle }: Props) => {
|
||||
const [wizardStep, setWizardStep] = useState(WizardSteps.SelectPlatform);
|
||||
const [selectedPlatform, setSelectedPlatform] = useState<string | null>(null);
|
||||
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { data: microsoftTeamsConfig } = useGetWorkspaceWorkflowIntegrationConfig({
|
||||
workspaceId: currentWorkspace?.id ?? "",
|
||||
integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS
|
||||
});
|
||||
|
||||
const { data: slackConfig } = useGetWorkspaceWorkflowIntegrationConfig({
|
||||
workspaceId: currentWorkspace?.id ?? "",
|
||||
integration: WorkflowIntegrationPlatform.SLACK
|
||||
});
|
||||
|
||||
const microsoftTeamsConfigured = !!microsoftTeamsConfig;
|
||||
const slackConfigured = !!slackConfig;
|
||||
|
||||
const handleFormReset = (state: boolean = false) => {
|
||||
onToggle(state);
|
||||
setWizardStep(WizardSteps.SelectPlatform);
|
||||
setSelectedPlatform(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onOpenChange={(state) => handleFormReset(state)}>
|
||||
<ModalContent
|
||||
title={`Add a ${selectedPlatform?.replace("-", " ").replace(/\b\w/g, (char) => char.toUpperCase()) ?? "workflow"} integration`}
|
||||
className="my-4"
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{wizardStep === WizardSteps.SelectPlatform && (
|
||||
<motion.div
|
||||
key="select-type-step"
|
||||
transition={{ duration: 0.1 }}
|
||||
initial={{ opacity: 0, translateX: 30 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: -30 }}
|
||||
>
|
||||
<div className="mb-4 text-mineshaft-300">Select a workflow integration</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
{PLATFORM_LIST.map(({ icon, platform, title }) => {
|
||||
const isConfigured =
|
||||
(platform === WorkflowIntegrationPlatform.MICROSOFT_TEAMS &&
|
||||
microsoftTeamsConfigured) ||
|
||||
(platform === WorkflowIntegrationPlatform.SLACK && slackConfigured);
|
||||
|
||||
return (
|
||||
<div className="relative" key={platform}>
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex h-32 w-36 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white",
|
||||
isConfigured && "border-primary/50 opacity-60"
|
||||
)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
setSelectedPlatform(platform);
|
||||
setWizardStep(WizardSteps.PlatformInputs);
|
||||
}}
|
||||
onKeyDown={(evt) => {
|
||||
if (evt.key === "Enter") {
|
||||
setSelectedPlatform(platform);
|
||||
setWizardStep(WizardSteps.PlatformInputs);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div>{icon}</div>
|
||||
<div className="whitespace-pre-wrap text-center text-sm">{title}</div>
|
||||
</div>
|
||||
{isConfigured && (
|
||||
<div className="absolute bottom-0 left-0 right-0 z-30 h-full">
|
||||
<div className="relative h-full">
|
||||
<div className="absolute bottom-0 right-0 w-full flex-row items-center overflow-hidden whitespace-nowrap rounded-b-md bg-primary px-2 py-0.5 text-center text-xs text-black">
|
||||
Already Configured
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{wizardStep === WizardSteps.PlatformInputs &&
|
||||
selectedPlatform === WorkflowIntegrationPlatform.SLACK && (
|
||||
<motion.div
|
||||
key="platform-inputs-step-slack"
|
||||
transition={{ duration: 0.1 }}
|
||||
initial={{ opacity: 0, translateX: 30 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: -30 }}
|
||||
>
|
||||
<SlackIntegrationForm onClose={() => handleFormReset(false)} />
|
||||
</motion.div>
|
||||
)}
|
||||
{wizardStep === WizardSteps.PlatformInputs &&
|
||||
selectedPlatform === WorkflowIntegrationPlatform.MICROSOFT_TEAMS && (
|
||||
<motion.div
|
||||
key="platform-inputs-step-ms-teams"
|
||||
transition={{ duration: 0.1 }}
|
||||
initial={{ opacity: 0, translateX: 30 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: -30 }}
|
||||
>
|
||||
<MicrosoftTeamsIntegrationForm onClose={() => handleFormReset(false)} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
import { Modal, ModalContent } from "@app/components/v2";
|
||||
import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
|
||||
|
||||
import { MicrosoftTeamsIntegrationForm } from "./MicrosoftTeamsIntegrationForm";
|
||||
import { SlackIntegrationForm } from "./SlackIntegrationForm";
|
||||
|
||||
type Props = {
|
||||
isOpen?: boolean;
|
||||
onClose: () => void;
|
||||
|
||||
integration: WorkflowIntegrationPlatform;
|
||||
};
|
||||
|
||||
export const EditWorkflowIntegrationModal = ({ isOpen, onClose, integration }: Props) => {
|
||||
const handleFormReset = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onOpenChange={handleFormReset}>
|
||||
<ModalContent
|
||||
title={`Edit ${integration?.replace("-", " ").replace(/\b\w/g, (char) => char.toUpperCase()) ?? "workflow"} integration`}
|
||||
>
|
||||
{integration === WorkflowIntegrationPlatform.SLACK && (
|
||||
<SlackIntegrationForm onClose={handleFormReset} />
|
||||
)}
|
||||
{integration === WorkflowIntegrationPlatform.MICROSOFT_TEAMS && (
|
||||
<MicrosoftTeamsIntegrationForm onClose={handleFormReset} />
|
||||
)}
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
+148
@@ -0,0 +1,148 @@
|
||||
/* eslint-disable no-nested-ternary */
|
||||
import { BsMicrosoftTeams } from "react-icons/bs";
|
||||
import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { OrgPermissionCan } from "@app/components/permissions";
|
||||
import {
|
||||
Badge,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
Spinner,
|
||||
Td,
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
|
||||
import { useGetMicrosoftTeamsIntegrationTeams } from "@app/hooks/api";
|
||||
import {
|
||||
ProjectWorkflowIntegrationConfig,
|
||||
WorkflowIntegrationPlatform
|
||||
} from "@app/hooks/api/workflowIntegrations/types";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
type Props = {
|
||||
microsoftTeamsConfig?: ProjectWorkflowIntegrationConfig | null;
|
||||
isMicrosoftTeamsConfigLoading: boolean;
|
||||
handlePopUpOpen: (
|
||||
popUpName: keyof UsePopUpState<["removeIntegration", "editIntegration"]>,
|
||||
data?: {
|
||||
integrationId?: string;
|
||||
integration: WorkflowIntegrationPlatform;
|
||||
}
|
||||
) => void;
|
||||
};
|
||||
|
||||
export const MicrosoftTeamsConfigRow = ({
|
||||
handlePopUpOpen,
|
||||
isMicrosoftTeamsConfigLoading,
|
||||
microsoftTeamsConfig
|
||||
}: Props) => {
|
||||
const { data: microsoftTeamsChannels, isPending: isMicrosoftTeamsChannelsLoading } =
|
||||
useGetMicrosoftTeamsIntegrationTeams(microsoftTeamsConfig?.integrationId);
|
||||
const microsoftTeamsChannelIdToName = Object.fromEntries(
|
||||
microsoftTeamsChannels?.flatMap((team) =>
|
||||
team.channels.map((channel) => [channel.channelId, channel.channelName])
|
||||
) ?? []
|
||||
);
|
||||
|
||||
if (microsoftTeamsConfig?.integration !== WorkflowIntegrationPlatform.MICROSOFT_TEAMS) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isLoadingConfig = isMicrosoftTeamsChannelsLoading || isMicrosoftTeamsConfigLoading;
|
||||
|
||||
return (
|
||||
<Tr>
|
||||
<Td className="flex max-w-xs items-center overflow-hidden text-ellipsis">
|
||||
<div className="flex items-center gap-2">
|
||||
<BsMicrosoftTeams />
|
||||
Microsoft Teams
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
{microsoftTeamsConfig.isAccessRequestNotificationEnabled &&
|
||||
!isLoadingConfig &&
|
||||
microsoftTeamsConfig.accessRequestChannels?.channelIds?.length > 0 ? (
|
||||
<Badge>
|
||||
{microsoftTeamsConfig.accessRequestChannels.channelIds
|
||||
.map((channel) => microsoftTeamsChannelIdToName[channel])
|
||||
.join(", ")}
|
||||
</Badge>
|
||||
) : isLoadingConfig ? (
|
||||
<Spinner size="xs" />
|
||||
) : (
|
||||
<Badge variant="danger">Disabled</Badge>
|
||||
)}
|
||||
</Td>
|
||||
<Td>
|
||||
{microsoftTeamsConfig.isSecretRequestNotificationEnabled &&
|
||||
!isLoadingConfig &&
|
||||
microsoftTeamsConfig.secretRequestChannels?.channelIds?.length > 0 ? (
|
||||
<Badge>
|
||||
{microsoftTeamsConfig.secretRequestChannels.channelIds
|
||||
.map((channel) => microsoftTeamsChannelIdToName[channel])
|
||||
.join(", ")}
|
||||
</Badge>
|
||||
) : isLoadingConfig ? (
|
||||
<Spinner size="xs" />
|
||||
) : (
|
||||
<Badge variant="danger">Disabled</Badge>
|
||||
)}
|
||||
</Td>
|
||||
|
||||
<Td>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="rounded-lg">
|
||||
<div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
|
||||
<FontAwesomeIcon size="sm" icon={faEllipsis} />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="p-1">
|
||||
<OrgPermissionCan I={OrgPermissionActions.Edit} an={OrgPermissionSubjects.Settings}>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
disabled={!isAllowed}
|
||||
className={twMerge(
|
||||
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
handlePopUpOpen("editIntegration", {
|
||||
integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS
|
||||
});
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
<OrgPermissionCan I={OrgPermissionActions.Delete} an={OrgPermissionSubjects.Settings}>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
disabled={!isAllowed}
|
||||
className={twMerge(
|
||||
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
handlePopUpOpen("removeIntegration", {
|
||||
integrationId: microsoftTeamsConfig.integrationId,
|
||||
integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
};
|
||||
+556
@@ -0,0 +1,556 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { ProjectPermissionCan } from "@app/components/permissions";
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
FormControl,
|
||||
Input,
|
||||
Select,
|
||||
SelectItem,
|
||||
Switch
|
||||
} from "@app/components/v2";
|
||||
import { useWorkspace } from "@app/context";
|
||||
import {
|
||||
ProjectPermissionActions,
|
||||
ProjectPermissionSub
|
||||
} from "@app/context/ProjectPermissionContext";
|
||||
import {
|
||||
useGetMicrosoftTeamsIntegrations,
|
||||
useGetMicrosoftTeamsIntegrationTeams,
|
||||
useGetWorkspaceWorkflowIntegrationConfig,
|
||||
useUpdateProjectWorkflowIntegrationConfig
|
||||
} from "@app/hooks/api";
|
||||
import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
microsoftTeamsIntegrationId: z.string(),
|
||||
isSecretRequestNotificationEnabled: z.boolean(),
|
||||
isAccessRequestNotificationEnabled: z.boolean(),
|
||||
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) {
|
||||
ctx.addIssue({
|
||||
path: ["secretRequestChannels", "teamId"],
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Team is required"
|
||||
});
|
||||
}
|
||||
|
||||
if (!data?.secretRequestChannels?.channelIds?.length) {
|
||||
ctx.addIssue({
|
||||
path: ["secretRequestChannels", "channelIds"],
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "At least one channel is required"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (data.isAccessRequestNotificationEnabled) {
|
||||
if (!data?.accessRequestChannels?.teamId) {
|
||||
ctx.addIssue({
|
||||
path: ["accessRequestChannels", "teamId"],
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "Team is required"
|
||||
});
|
||||
}
|
||||
|
||||
if (!data?.accessRequestChannels?.channelIds?.length) {
|
||||
ctx.addIssue({
|
||||
path: ["accessRequestChannels", "channelIds"],
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "At least one channel is required"
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
type TMicrosoftTeamsConfigForm = z.infer<typeof formSchema>;
|
||||
|
||||
type Props = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export const MicrosoftTeamsIntegrationForm = ({ onClose }: Props) => {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { data: microsoftTeamsConfig } = useGetWorkspaceWorkflowIntegrationConfig({
|
||||
workspaceId: currentWorkspace?.id ?? "",
|
||||
integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS
|
||||
});
|
||||
const { data: microsoftTeamsIntegrations } = useGetMicrosoftTeamsIntegrations(
|
||||
currentWorkspace?.orgId
|
||||
);
|
||||
|
||||
const { mutateAsync: updateProjectMicrosoftTeamsConfig } =
|
||||
useUpdateProjectWorkflowIntegrationConfig();
|
||||
|
||||
const {
|
||||
control,
|
||||
watch,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isDirty, isSubmitting }
|
||||
} = useForm<TMicrosoftTeamsConfigForm>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
isAccessRequestNotificationEnabled: false,
|
||||
isSecretRequestNotificationEnabled: false,
|
||||
accessRequestChannels: {
|
||||
teamId: "",
|
||||
channelIds: []
|
||||
},
|
||||
secretRequestChannels: {
|
||||
teamId: "",
|
||||
channelIds: []
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const handleIntegrationSave = async (data: TMicrosoftTeamsConfigForm) => {
|
||||
try {
|
||||
if (!currentWorkspace) {
|
||||
return;
|
||||
}
|
||||
|
||||
await updateProjectMicrosoftTeamsConfig({
|
||||
workspaceId: currentWorkspace.id,
|
||||
isAccessRequestNotificationEnabled: data.isAccessRequestNotificationEnabled,
|
||||
isSecretRequestNotificationEnabled: data.isSecretRequestNotificationEnabled,
|
||||
...(data.isAccessRequestNotificationEnabled && {
|
||||
accessRequestChannels: data.accessRequestChannels
|
||||
}),
|
||||
...(data.isSecretRequestNotificationEnabled && {
|
||||
secretRequestChannels: data.secretRequestChannels
|
||||
}),
|
||||
integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS,
|
||||
integrationId: data.microsoftTeamsIntegrationId
|
||||
});
|
||||
|
||||
createNotification({
|
||||
type: "success",
|
||||
text: "Successfully created microsoft teams integration"
|
||||
});
|
||||
|
||||
onClose();
|
||||
} catch {
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to create microsoft teams integration"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const selectedAccessRequestTeamId = watch("accessRequestChannels.teamId");
|
||||
const selectedSecretRequestTeamId = watch("secretRequestChannels.teamId");
|
||||
|
||||
const selectedMicrosoftTeamsIntegrationId = watch("microsoftTeamsIntegrationId");
|
||||
|
||||
const accessRequestNotificationsEnabled = watch("isAccessRequestNotificationEnabled");
|
||||
const secretRequestNotificationsEnabled = watch("isSecretRequestNotificationEnabled");
|
||||
|
||||
const {
|
||||
data: microsoftTeamsIntegrationTeams,
|
||||
isPending: isLoadingMicrosoftTeamsIntegrationTeams
|
||||
} = useGetMicrosoftTeamsIntegrationTeams(selectedMicrosoftTeamsIntegrationId);
|
||||
|
||||
const sortedMicrosoftTeamsIntegrationTeams = microsoftTeamsIntegrationTeams?.sort((a, b) =>
|
||||
a.teamName.toLowerCase().localeCompare(b.teamName.toLowerCase())
|
||||
);
|
||||
|
||||
const selectableAccessRequestChannelIds = sortedMicrosoftTeamsIntegrationTeams
|
||||
?.filter((team) => team.teamId === selectedAccessRequestTeamId)
|
||||
.map((team) => team.channels)
|
||||
.flat();
|
||||
const selectableSecretRequestChannelIds = sortedMicrosoftTeamsIntegrationTeams
|
||||
?.filter((team) => team.teamId === selectedSecretRequestTeamId)
|
||||
.map((team) => team.channels)
|
||||
.flat();
|
||||
|
||||
const channelIdToName = [
|
||||
...(selectableAccessRequestChannelIds || []),
|
||||
...(selectableSecretRequestChannelIds || [])
|
||||
].reduce(
|
||||
(acc, channel) => {
|
||||
acc[channel.channelId] = channel.channelName;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, string>
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (microsoftTeamsConfig) {
|
||||
setValue("microsoftTeamsIntegrationId", microsoftTeamsConfig.integrationId);
|
||||
setValue(
|
||||
"isSecretRequestNotificationEnabled",
|
||||
microsoftTeamsConfig.isSecretRequestNotificationEnabled
|
||||
);
|
||||
setValue(
|
||||
"isAccessRequestNotificationEnabled",
|
||||
microsoftTeamsConfig.isAccessRequestNotificationEnabled
|
||||
);
|
||||
|
||||
if (microsoftTeamsConfig.integration === WorkflowIntegrationPlatform.MICROSOFT_TEAMS) {
|
||||
if (microsoftTeamsConfig.secretRequestChannels) {
|
||||
if (Object.entries(microsoftTeamsConfig.accessRequestChannels).length) {
|
||||
setValue("accessRequestChannels", microsoftTeamsConfig.accessRequestChannels);
|
||||
}
|
||||
if (Object.entries(microsoftTeamsConfig.secretRequestChannels).length) {
|
||||
setValue("secretRequestChannels", microsoftTeamsConfig.secretRequestChannels);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [microsoftTeamsConfig]);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleIntegrationSave)}>
|
||||
<div className="flex w-full flex-col justify-start">
|
||||
<ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
|
||||
{(isAllowed) => (
|
||||
<Controller
|
||||
control={control}
|
||||
name="microsoftTeamsIntegrationId"
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Microsoft Teams Integration"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
{...field}
|
||||
isDisabled={!isAllowed}
|
||||
placeholder="None"
|
||||
onValueChange={(v) => {
|
||||
onChange(v);
|
||||
|
||||
setValue("isAccessRequestNotificationEnabled", false);
|
||||
setValue("isSecretRequestNotificationEnabled", false);
|
||||
setValue("accessRequestChannels", {
|
||||
teamId: "",
|
||||
channelIds: []
|
||||
});
|
||||
setValue("secretRequestChannels", {
|
||||
teamId: "",
|
||||
channelIds: []
|
||||
});
|
||||
}}
|
||||
className="w-full"
|
||||
defaultValue={microsoftTeamsConfig?.integrationId}
|
||||
>
|
||||
{microsoftTeamsIntegrations?.map((microsoftTeamsIntegration) => (
|
||||
<SelectItem
|
||||
value={microsoftTeamsIntegration.id}
|
||||
key={`microsoft-teams-integration-${microsoftTeamsIntegration.id}`}
|
||||
>
|
||||
{microsoftTeamsIntegration.slug}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
</div>
|
||||
{selectedMicrosoftTeamsIntegrationId && (
|
||||
<>
|
||||
<h2 className="mb-2 flex-1 text-sm text-mineshaft-400">Configure Events</h2>
|
||||
<Controller
|
||||
control={control}
|
||||
name="isSecretRequestNotificationEnabled"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
className="mb-2 mt-3"
|
||||
>
|
||||
<Switch
|
||||
id="secret-approval-notification"
|
||||
onCheckedChange={(value) => field.onChange(value)}
|
||||
isChecked={field.value}
|
||||
>
|
||||
<p className="w-full">Secret Approval Requests</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{secretRequestNotificationsEnabled && (
|
||||
<>
|
||||
<Controller
|
||||
control={control}
|
||||
name="secretRequestChannels.teamId"
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Secret Approval Requests Notifications Team"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Select
|
||||
{...field}
|
||||
placeholder={
|
||||
isLoadingMicrosoftTeamsIntegrationTeams ? "Loading..." : "Select a team..."
|
||||
}
|
||||
className="w-full"
|
||||
onValueChange={(value) => onChange(value)}
|
||||
isLoading={isLoadingMicrosoftTeamsIntegrationTeams}
|
||||
>
|
||||
{!isLoadingMicrosoftTeamsIntegrationTeams &&
|
||||
sortedMicrosoftTeamsIntegrationTeams?.map((team) => (
|
||||
<SelectItem
|
||||
key={`secret-requests-microsoft-teams-team-${team.teamId}`}
|
||||
value={team.teamId}
|
||||
>
|
||||
{team.teamName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="secretRequestChannels.channelIds"
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Microsoft Teams channels"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className={
|
||||
isLoadingMicrosoftTeamsIntegrationTeams || !selectedSecretRequestTeamId
|
||||
? "opacity-50"
|
||||
: ""
|
||||
}
|
||||
asChild
|
||||
disabled={
|
||||
isLoadingMicrosoftTeamsIntegrationTeams || !selectedSecretRequestTeamId
|
||||
}
|
||||
>
|
||||
{selectedSecretRequestTeamId ? (
|
||||
<Input
|
||||
isReadOnly
|
||||
value={
|
||||
isLoadingMicrosoftTeamsIntegrationTeams
|
||||
? "Loading..."
|
||||
: value
|
||||
?.filter(Boolean)
|
||||
.map((entry) => channelIdToName[entry])
|
||||
.join(", ")
|
||||
}
|
||||
className="text-left"
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
isReadOnly
|
||||
value="Select a team..."
|
||||
className="py-2 text-left text-sm"
|
||||
/>
|
||||
)}
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
style={{
|
||||
width: "var(--radix-dropdown-menu-trigger-width)",
|
||||
maxHeight: "350px",
|
||||
overflowY: "auto"
|
||||
}}
|
||||
side="bottom"
|
||||
align="start"
|
||||
>
|
||||
{selectableSecretRequestChannelIds?.map((channel) => {
|
||||
const isChecked = value?.includes(channel.channelId);
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
onClick={(evt) => {
|
||||
evt.preventDefault();
|
||||
onChange(
|
||||
isChecked
|
||||
? value?.filter((el: string) => el !== channel.channelId)
|
||||
: [...(value || []), channel.channelId]
|
||||
);
|
||||
}}
|
||||
key={`secret-requests-microsoft-teams-channel-${channel.channelId}`}
|
||||
iconPos="right"
|
||||
icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
>
|
||||
{channel.channelName}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="isAccessRequestNotificationEnabled"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl isError={Boolean(error)} errorText={error?.message} className="mb-2">
|
||||
<Switch
|
||||
id="access-request-notification"
|
||||
onCheckedChange={(value) => field.onChange(value)}
|
||||
isChecked={field.value}
|
||||
>
|
||||
<p className="w-full">Access Requests</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{accessRequestNotificationsEnabled && (
|
||||
<>
|
||||
<Controller
|
||||
control={control}
|
||||
name="accessRequestChannels.teamId"
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Access Requests Notifications Team"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Select
|
||||
{...field}
|
||||
placeholder={
|
||||
isLoadingMicrosoftTeamsIntegrationTeams ? "Loading..." : "Select a team..."
|
||||
}
|
||||
className="w-full"
|
||||
onValueChange={(value) => onChange(value)}
|
||||
isLoading={isLoadingMicrosoftTeamsIntegrationTeams}
|
||||
>
|
||||
{!isLoadingMicrosoftTeamsIntegrationTeams &&
|
||||
sortedMicrosoftTeamsIntegrationTeams?.map((team) => (
|
||||
<SelectItem
|
||||
key={`access-requests-microsoft-teams-team-${team.teamId}`}
|
||||
value={team.teamId}
|
||||
>
|
||||
{team.teamName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="accessRequestChannels.channelIds"
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Microsoft Teams channels"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
className={
|
||||
isLoadingMicrosoftTeamsIntegrationTeams || !selectedAccessRequestTeamId
|
||||
? "opacity-50"
|
||||
: ""
|
||||
}
|
||||
asChild
|
||||
disabled={
|
||||
isLoadingMicrosoftTeamsIntegrationTeams || !selectedAccessRequestTeamId
|
||||
}
|
||||
>
|
||||
{selectedAccessRequestTeamId ? (
|
||||
<Input
|
||||
isReadOnly
|
||||
value={
|
||||
isLoadingMicrosoftTeamsIntegrationTeams
|
||||
? "Loading..."
|
||||
: value
|
||||
?.filter(Boolean)
|
||||
.map((entry) => channelIdToName[entry])
|
||||
.join(", ")
|
||||
}
|
||||
className="text-left"
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
isReadOnly
|
||||
value="Select a team..."
|
||||
className="py-2 text-left text-sm"
|
||||
/>
|
||||
)}
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
style={{
|
||||
width: "var(--radix-dropdown-menu-trigger-width)",
|
||||
maxHeight: "350px",
|
||||
overflowY: "auto"
|
||||
}}
|
||||
side="bottom"
|
||||
align="start"
|
||||
>
|
||||
{selectableAccessRequestChannelIds?.map((channel) => {
|
||||
const isChecked = value?.includes(channel.channelId);
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
onClick={(evt) => {
|
||||
evt.preventDefault();
|
||||
onChange(
|
||||
isChecked
|
||||
? value?.filter((el: string) => el !== channel.channelId)
|
||||
: [...(value || []), channel.channelId]
|
||||
);
|
||||
}}
|
||||
key={`access-requests-slack-channel-${channel.channelId}`}
|
||||
iconPos="right"
|
||||
icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
>
|
||||
{channel.channelName}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
colorSchema="secondary"
|
||||
className="mt-4"
|
||||
type="submit"
|
||||
disabled={!isDirty}
|
||||
isDisabled={!isDirty}
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
+145
@@ -0,0 +1,145 @@
|
||||
/* eslint-disable no-nested-ternary */
|
||||
import { BsSlack } from "react-icons/bs";
|
||||
import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { OrgPermissionCan } from "@app/components/permissions";
|
||||
import {
|
||||
Badge,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
Spinner,
|
||||
Td,
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
|
||||
import { useGetSlackIntegrationChannels } from "@app/hooks/api";
|
||||
import {
|
||||
ProjectWorkflowIntegrationConfig,
|
||||
WorkflowIntegrationPlatform
|
||||
} from "@app/hooks/api/workflowIntegrations/types";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
type Props = {
|
||||
slackConfig?: ProjectWorkflowIntegrationConfig | null;
|
||||
isSlackConfigLoading: boolean;
|
||||
handlePopUpOpen: (
|
||||
popUpName: keyof UsePopUpState<["removeIntegration", "editIntegration"]>,
|
||||
data?: {
|
||||
integrationId?: string;
|
||||
integration: WorkflowIntegrationPlatform;
|
||||
}
|
||||
) => void;
|
||||
};
|
||||
|
||||
export const SlackConfigRow = ({ handlePopUpOpen, isSlackConfigLoading, slackConfig }: Props) => {
|
||||
const { data: slackChannels, isPending: isSlackChannelsLoading } = useGetSlackIntegrationChannels(
|
||||
slackConfig?.integrationId
|
||||
);
|
||||
const slackChannelIdToName = Object.fromEntries(
|
||||
(slackChannels || []).map((channel) => [channel.id, channel.name])
|
||||
);
|
||||
|
||||
if (slackConfig?.integration !== WorkflowIntegrationPlatform.SLACK) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isLoadingConfig = isSlackChannelsLoading || isSlackConfigLoading;
|
||||
|
||||
return (
|
||||
<Tr>
|
||||
<Td className="flex max-w-xs items-center overflow-hidden text-ellipsis">
|
||||
<div className="flex items-center gap-2">
|
||||
<BsSlack />
|
||||
Slack
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
{slackConfig.isAccessRequestNotificationEnabled &&
|
||||
!isLoadingConfig &&
|
||||
slackConfig.accessRequestChannels.length > 0 ? (
|
||||
<Badge>
|
||||
{slackConfig.accessRequestChannels
|
||||
.split(", ")
|
||||
.map((channel) => slackChannelIdToName[channel])
|
||||
.join(", ")}
|
||||
</Badge>
|
||||
) : isLoadingConfig ? (
|
||||
<Spinner size="xs" />
|
||||
) : (
|
||||
<Badge variant="danger">Disabled</Badge>
|
||||
)}
|
||||
</Td>
|
||||
<Td>
|
||||
{slackConfig.isSecretRequestNotificationEnabled &&
|
||||
!isLoadingConfig &&
|
||||
slackConfig.secretRequestChannels.length > 0 ? (
|
||||
<Badge>
|
||||
{slackConfig.secretRequestChannels
|
||||
.split(", ")
|
||||
.map((channel) => slackChannelIdToName[channel])
|
||||
.join(", ")}
|
||||
</Badge>
|
||||
) : isLoadingConfig ? (
|
||||
<Spinner size="xs" />
|
||||
) : (
|
||||
<Badge variant="danger">Disabled</Badge>
|
||||
)}
|
||||
</Td>
|
||||
|
||||
<Td>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild className="rounded-lg">
|
||||
<div className="flex justify-end hover:text-primary-400 data-[state=open]:text-primary-400">
|
||||
<FontAwesomeIcon size="sm" icon={faEllipsis} />
|
||||
</div>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="p-1">
|
||||
<OrgPermissionCan I={OrgPermissionActions.Edit} an={OrgPermissionSubjects.Settings}>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
disabled={!isAllowed}
|
||||
className={twMerge(
|
||||
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
handlePopUpOpen("editIntegration", {
|
||||
integration: WorkflowIntegrationPlatform.SLACK
|
||||
});
|
||||
}}
|
||||
>
|
||||
Edit
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
<OrgPermissionCan I={OrgPermissionActions.Delete} an={OrgPermissionSubjects.Settings}>
|
||||
{(isAllowed) => (
|
||||
<DropdownMenuItem
|
||||
disabled={!isAllowed}
|
||||
className={twMerge(
|
||||
!isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
handlePopUpOpen("removeIntegration", {
|
||||
integrationId: slackConfig.integrationId,
|
||||
integration: WorkflowIntegrationPlatform.SLACK
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
};
|
||||
+355
@@ -0,0 +1,355 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { ProjectPermissionCan } from "@app/components/permissions";
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
FormControl,
|
||||
Input,
|
||||
Select,
|
||||
SelectItem,
|
||||
Switch
|
||||
} from "@app/components/v2";
|
||||
import { useWorkspace } from "@app/context";
|
||||
import {
|
||||
ProjectPermissionActions,
|
||||
ProjectPermissionSub
|
||||
} from "@app/context/ProjectPermissionContext";
|
||||
import {
|
||||
useGetSlackIntegrationChannels,
|
||||
useGetWorkflowIntegrations,
|
||||
useGetWorkspaceWorkflowIntegrationConfig,
|
||||
useUpdateProjectWorkflowIntegrationConfig
|
||||
} from "@app/hooks/api";
|
||||
import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
|
||||
|
||||
const formSchema = z.object({
|
||||
slackIntegrationId: z.string(),
|
||||
isSecretRequestNotificationEnabled: z.boolean(),
|
||||
secretRequestChannels: z.string().array(),
|
||||
isAccessRequestNotificationEnabled: z.boolean(),
|
||||
accessRequestChannels: z.string().array()
|
||||
});
|
||||
|
||||
type TSlackConfigForm = z.infer<typeof formSchema>;
|
||||
|
||||
type Props = {
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export const SlackIntegrationForm = ({ onClose }: Props) => {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { data: slackConfig } = useGetWorkspaceWorkflowIntegrationConfig({
|
||||
workspaceId: currentWorkspace?.id ?? "",
|
||||
integration: WorkflowIntegrationPlatform.SLACK
|
||||
});
|
||||
const { data: workflowIntegrations } = useGetWorkflowIntegrations(currentWorkspace?.orgId);
|
||||
const { mutateAsync: updateProjectSlackConfig } = useUpdateProjectWorkflowIntegrationConfig();
|
||||
|
||||
const slackIntegrations = workflowIntegrations?.filter(
|
||||
(integration) => integration.integration === WorkflowIntegrationPlatform.SLACK
|
||||
);
|
||||
|
||||
const {
|
||||
control,
|
||||
watch,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isDirty, isSubmitting }
|
||||
} = useForm<TSlackConfigForm>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
isAccessRequestNotificationEnabled: false,
|
||||
accessRequestChannels: [],
|
||||
isSecretRequestNotificationEnabled: false,
|
||||
secretRequestChannels: []
|
||||
}
|
||||
});
|
||||
|
||||
const handleIntegrationSave = async (data: TSlackConfigForm) => {
|
||||
try {
|
||||
if (!currentWorkspace) {
|
||||
return;
|
||||
}
|
||||
|
||||
await updateProjectSlackConfig({
|
||||
...data,
|
||||
workspaceId: currentWorkspace.id,
|
||||
integration: WorkflowIntegrationPlatform.SLACK,
|
||||
integrationId: data.slackIntegrationId,
|
||||
accessRequestChannels: data.accessRequestChannels.filter(Boolean).join(", "),
|
||||
secretRequestChannels: data.secretRequestChannels.filter(Boolean).join(", ")
|
||||
});
|
||||
|
||||
createNotification({
|
||||
type: "success",
|
||||
text: "Successfully created slack integration"
|
||||
});
|
||||
|
||||
onClose();
|
||||
} catch {
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to create slack integration"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const secretRequestNotifState = watch("isSecretRequestNotificationEnabled");
|
||||
const selectedSlackIntegrationId = watch("slackIntegrationId");
|
||||
const accessRequestNotifState = watch("isAccessRequestNotificationEnabled");
|
||||
|
||||
const { data: slackChannels } = useGetSlackIntegrationChannels(selectedSlackIntegrationId);
|
||||
const slackChannelIdToName = Object.fromEntries(
|
||||
(slackChannels || []).map((channel) => [channel.id, channel.name])
|
||||
);
|
||||
const sortedSlackChannels = slackChannels?.sort((a, b) =>
|
||||
a.name.toLowerCase().localeCompare(b.name.toLowerCase())
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (slackConfig) {
|
||||
setValue("slackIntegrationId", slackConfig.integrationId);
|
||||
setValue(
|
||||
"isSecretRequestNotificationEnabled",
|
||||
slackConfig.isSecretRequestNotificationEnabled
|
||||
);
|
||||
setValue(
|
||||
"isAccessRequestNotificationEnabled",
|
||||
slackConfig.isAccessRequestNotificationEnabled
|
||||
);
|
||||
|
||||
if (slackConfig.integration === WorkflowIntegrationPlatform.SLACK) {
|
||||
if (slackChannels) {
|
||||
setValue(
|
||||
"secretRequestChannels",
|
||||
slackConfig.secretRequestChannels
|
||||
.split(", ")
|
||||
.filter((channel) => channel in slackChannelIdToName)
|
||||
);
|
||||
setValue(
|
||||
"accessRequestChannels",
|
||||
slackConfig.accessRequestChannels
|
||||
.split(", ")
|
||||
.filter((channel) => channel in slackChannelIdToName)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [slackConfig, slackChannels]);
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleIntegrationSave)}>
|
||||
<div className="flex w-full flex-col justify-start">
|
||||
<ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
|
||||
{(isAllowed) => (
|
||||
<Controller
|
||||
control={control}
|
||||
name="slackIntegrationId"
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Slack Integration"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
{...field}
|
||||
isDisabled={!isAllowed}
|
||||
placeholder="None"
|
||||
onValueChange={(val) => {
|
||||
onChange(val);
|
||||
}}
|
||||
className="w-full"
|
||||
defaultValue={slackConfig?.integrationId}
|
||||
>
|
||||
{slackIntegrations?.map((slackIntegration) => (
|
||||
<SelectItem
|
||||
value={slackIntegration.id}
|
||||
key={`slack-integration-${slackIntegration.id}`}
|
||||
>
|
||||
{slackIntegration.slug}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
</div>
|
||||
{selectedSlackIntegrationId && (
|
||||
<>
|
||||
<h2 className="mb-2 flex-1 text-sm text-mineshaft-400">Configure Events</h2>
|
||||
<Controller
|
||||
control={control}
|
||||
name="isSecretRequestNotificationEnabled"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
className="mb-2 mt-3"
|
||||
>
|
||||
<Switch
|
||||
id="secret-approval-notification"
|
||||
onCheckedChange={(value) => field.onChange(value)}
|
||||
isChecked={field.value}
|
||||
>
|
||||
<p className="w-full">Secret Approval Requests</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{secretRequestNotifState && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="secretRequestChannels"
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Slack channels"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Input
|
||||
isReadOnly
|
||||
value={value
|
||||
?.filter(Boolean)
|
||||
.map((entry) => slackChannelIdToName[entry])
|
||||
.join(", ")}
|
||||
className="text-left"
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
style={{
|
||||
width: "var(--radix-dropdown-menu-trigger-width)",
|
||||
maxHeight: "350px",
|
||||
overflowY: "auto"
|
||||
}}
|
||||
side="bottom"
|
||||
align="start"
|
||||
>
|
||||
{sortedSlackChannels?.map((slackChannel) => {
|
||||
const isChecked = value?.includes(slackChannel.id);
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
onClick={(evt) => {
|
||||
evt.preventDefault();
|
||||
onChange(
|
||||
isChecked
|
||||
? value?.filter((el: string) => el !== slackChannel.id)
|
||||
: [...(value || []), slackChannel.id]
|
||||
);
|
||||
}}
|
||||
key={`secret-requests-slack-channel-${slackChannel.id}`}
|
||||
iconPos="right"
|
||||
icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
>
|
||||
{slackChannel.name}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="isAccessRequestNotificationEnabled"
|
||||
render={({ field, fieldState: { error } }) => {
|
||||
return (
|
||||
<FormControl isError={Boolean(error)} errorText={error?.message} className="mb-2">
|
||||
<Switch
|
||||
id="access-request-notification"
|
||||
onCheckedChange={(value) => field.onChange(value)}
|
||||
isChecked={field.value}
|
||||
>
|
||||
<p className="w-full">Access Requests</p>
|
||||
</Switch>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{accessRequestNotifState && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="accessRequestChannels"
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Slack channels"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Input
|
||||
isReadOnly
|
||||
value={value
|
||||
?.filter(Boolean)
|
||||
.map((entry) => slackChannelIdToName[entry])
|
||||
.join(", ")}
|
||||
className="text-left"
|
||||
/>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
style={{
|
||||
width: "var(--radix-dropdown-menu-trigger-width)",
|
||||
maxHeight: "350px",
|
||||
overflowY: "auto"
|
||||
}}
|
||||
side="bottom"
|
||||
align="start"
|
||||
>
|
||||
{sortedSlackChannels?.map((slackChannel) => {
|
||||
const isChecked = value?.includes(slackChannel.id);
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
onClick={(evt) => {
|
||||
evt.preventDefault();
|
||||
onChange(
|
||||
isChecked
|
||||
? value?.filter((el: string) => el !== slackChannel.id)
|
||||
: [...(value || []), slackChannel.id]
|
||||
);
|
||||
}}
|
||||
key={`access-requests-slack-channel-${slackChannel.id}`}
|
||||
iconPos="right"
|
||||
icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
>
|
||||
{slackChannel.name}
|
||||
</DropdownMenuItem>
|
||||
);
|
||||
})}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
colorSchema="secondary"
|
||||
className="mt-4"
|
||||
type="submit"
|
||||
isDisabled={!isDirty}
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user