feat(workflow-integration): enhance project workflow integration with secret sync error notifications and improve Slack notification formatting

frontend/src/hooks/api/workflowIntegrations/types.ts

@@ -86,6 +86,8 @@ export type ProjectWorkflowIntegrationConfig =
       accessRequestChannels: string;
       isSecretRequestNotificationEnabled: boolean;
       secretRequestChannels: string;
+      isSecretSyncErrorNotificationEnabled: boolean;
+      secretSyncErrorChannels: string;
     }
   | {
       id: string;
@@ -112,6 +114,8 @@ export type TUpdateProjectWorkflowIntegrationConfigDTO =
       accessRequestChannels: string;
       isSecretRequestNotificationEnabled: boolean;
       secretRequestChannels: string;
+      isSecretSyncErrorNotificationEnabled: boolean;
+      secretSyncErrorChannels: string;
     }
   | {
       integration: WorkflowIntegrationPlatform.MICROSOFT_TEAMS;

frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx

@@ -111,7 +111,7 @@ export const WorkflowIntegrationTab = () => {
                 <Td>Provider</Td>
                 <Td>Access Request Notifications Destination</Td>
                 <Td>Secret Request Notifications Destination</Td>
-                <Td />
+                <Td>Secret Sync Error Notifications Destination</Td>
               </Tr>
             </THead>
             <TBody>

frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/MicrosoftTeamsConfigRow.tsx

@@ -92,7 +92,9 @@ export const MicrosoftTeamsConfigRow = ({
           <Badge variant="danger">Disabled</Badge>
         )}
       </Td>
-
+      <Td>
+        <Badge variant="danger">Coming Soon</Badge>
+      </Td>
       <Td>
         <DropdownMenu>
           <DropdownMenuTrigger asChild className="rounded-lg">

frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackConfigRow.tsx

@@ -89,7 +89,22 @@ export const SlackConfigRow = ({ handlePopUpOpen, isSlackConfigLoading, slackCon
           <Badge variant="danger">Disabled</Badge>
         )}
       </Td>
-
+      <Td>
+        {slackConfig.isSecretSyncErrorNotificationEnabled &&
+        !isLoadingConfig &&
+        slackConfig.secretSyncErrorChannels.length > 0 ? (
+          <Badge>
+            {slackConfig.secretSyncErrorChannels
+              .split(", ")
+              .map((channel) => slackChannelIdToName[channel])
+              .join(", ")}
+          </Badge>
+        ) : isLoadingConfig ? (
+          <Spinner size="xs" />
+        ) : (
+          <Badge variant="danger">Disabled</Badge>
+        )}
+      </Td>
       <Td>
         <DropdownMenu>
           <DropdownMenuTrigger asChild className="rounded-lg">

frontend/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/components/SlackIntegrationForm.tsx

@@ -37,7 +37,9 @@ const formSchema = z.object({
   isSecretRequestNotificationEnabled: z.boolean(),
   secretRequestChannels: z.string().array(),
   isAccessRequestNotificationEnabled: z.boolean(),
-  accessRequestChannels: z.string().array()
+  accessRequestChannels: z.string().array(),
+  isSecretSyncErrorNotificationEnabled: z.boolean(),
+  secretSyncErrorChannels: z.string().array()
 });
 
 type TSlackConfigForm = z.infer<typeof formSchema>;
@@ -71,7 +73,9 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
       isAccessRequestNotificationEnabled: false,
       accessRequestChannels: [],
       isSecretRequestNotificationEnabled: false,
-      secretRequestChannels: []
+      secretRequestChannels: [],
+      isSecretSyncErrorNotificationEnabled: false,
+      secretSyncErrorChannels: []
     }
   });
 
@@ -87,7 +91,8 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
         integration: WorkflowIntegrationPlatform.SLACK,
         integrationId: data.slackIntegrationId,
         accessRequestChannels: data.accessRequestChannels.filter(Boolean).join(", "),
-        secretRequestChannels: data.secretRequestChannels.filter(Boolean).join(", ")
+        secretRequestChannels: data.secretRequestChannels.filter(Boolean).join(", "),
+        secretSyncErrorChannels: data.secretSyncErrorChannels.filter(Boolean).join(", ")
       });
 
       createNotification({
@@ -107,6 +112,7 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
   const secretRequestNotifState = watch("isSecretRequestNotificationEnabled");
   const selectedSlackIntegrationId = watch("slackIntegrationId");
   const accessRequestNotifState = watch("isAccessRequestNotificationEnabled");
+  const secretSyncErrorNotifState = watch("isSecretSyncErrorNotificationEnabled");
 
   const { data: slackChannels } = useGetSlackIntegrationChannels(selectedSlackIntegrationId);
   const slackChannelIdToName = Object.fromEntries(
@@ -117,7 +123,7 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
   );
 
   useEffect(() => {
-    if (slackConfig) {
+    if (slackConfig && slackConfig.integration === WorkflowIntegrationPlatform.SLACK) {
       setValue("slackIntegrationId", slackConfig.integrationId);
       setValue(
         "isSecretRequestNotificationEnabled",
@@ -127,22 +133,30 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
         "isAccessRequestNotificationEnabled",
         slackConfig.isAccessRequestNotificationEnabled
       );
+      setValue(
+        "isSecretSyncErrorNotificationEnabled",
+        slackConfig.isSecretSyncErrorNotificationEnabled
+      );
 
-      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)
-          );
-        }
+      if (slackChannels) {
+        setValue(
+          "secretRequestChannels",
+          slackConfig.secretRequestChannels
+            .split(", ")
+            .filter((channel) => channel in slackChannelIdToName)
+        );
+        setValue(
+          "accessRequestChannels",
+          slackConfig.accessRequestChannels
+            .split(", ")
+            .filter((channel) => channel in slackChannelIdToName)
+        );
+        setValue(
+          "secretSyncErrorChannels",
+          slackConfig.secretSyncErrorChannels
+            .split(", ")
+            .filter((channel) => channel in slackChannelIdToName)
+        );
       }
     }
   }, [slackConfig, slackChannels]);
@@ -215,54 +229,14 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
               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>
+                <ChannelSelector
+                  value={value}
+                  onChange={onChange}
+                  error={error}
+                  slackChannelIdToName={slackChannelIdToName}
+                  sortedSlackChannels={sortedSlackChannels}
+                  keyPrefix="secret-requests"
+                />
               )}
             />
           )}
@@ -288,54 +262,47 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
               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>
+                <ChannelSelector
+                  value={value}
+                  onChange={onChange}
+                  error={error}
+                  slackChannelIdToName={slackChannelIdToName}
+                  sortedSlackChannels={sortedSlackChannels}
+                  keyPrefix="access-requests"
+                />
+              )}
+            />
+          )}
+          <Controller
+            control={control}
+            name="isSecretSyncErrorNotificationEnabled"
+            render={({ field, fieldState: { error } }) => {
+              return (
+                <FormControl isError={Boolean(error)} errorText={error?.message} className="mb-2">
+                  <Switch
+                    id="secret-sync-error-notification"
+                    onCheckedChange={(value) => field.onChange(value)}
+                    isChecked={field.value}
+                  >
+                    <p className="w-full">Secret Sync Errors</p>
+                  </Switch>
                 </FormControl>
+              );
+            }}
+          />
+          {secretSyncErrorNotifState && (
+            <Controller
+              control={control}
+              name="secretSyncErrorChannels"
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <ChannelSelector
+                  value={value}
+                  onChange={onChange}
+                  error={error}
+                  slackChannelIdToName={slackChannelIdToName}
+                  sortedSlackChannels={sortedSlackChannels}
+                  keyPrefix="secret-sync-errors"
+                />
               )}
             />
           )}
@@ -353,3 +320,63 @@ export const SlackIntegrationForm = ({ onClose }: Props) => {
     </form>
   );
 };
+
+type TChannelSelectorProps = {
+  value: string[];
+  onChange: (value: string[]) => void;
+  error?: { message?: string };
+  slackChannelIdToName: Record<string, string>;
+  sortedSlackChannels?: { id: string; name: string }[];
+  keyPrefix: string;
+};
+
+const ChannelSelector = ({
+  value,
+  onChange,
+  error,
+  slackChannelIdToName,
+  sortedSlackChannels,
+  keyPrefix
+}: TChannelSelectorProps) => (
+  <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={`${keyPrefix}-slack-channel-${slackChannel.id}`}
+              iconPos="right"
+              icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
+            >
+              {slackChannel.name}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </FormControl>
+);