feat(secret-sync): add support for secret sync error notifications in project router and Slack integration, including channel selection enhancements

backend/src/server/routes/v1/deprecated-project-router.ts

@@ -614,8 +614,10 @@ export const registerDeprecatedProjectRouter = async (server: FastifyZodProvider
           integrationId: z.string(),
           accessRequestChannels: validateSlackChannelsField,
           secretRequestChannels: validateSlackChannelsField,
+          secretSyncErrorChannels: validateSlackChannelsField,
           isAccessRequestNotificationEnabled: z.boolean(),
-          isSecretRequestNotificationEnabled: z.boolean()
+          isSecretRequestNotificationEnabled: z.boolean(),
+          isSecretSyncErrorNotificationEnabled: z.boolean()
         }),
         z.object({
           integration: z.literal(WorkflowIntegration.MICROSOFT_TEAMS),
@@ -633,7 +635,9 @@ export const registerDeprecatedProjectRouter = async (server: FastifyZodProvider
             isAccessRequestNotificationEnabled: true,
             accessRequestChannels: true,
             isSecretRequestNotificationEnabled: true,
-            secretRequestChannels: true
+            secretRequestChannels: true,
+            isSecretSyncErrorNotificationEnabled: true,
+            secretSyncErrorChannels: true
           }).merge(
             z.object({
               integration: z.literal(WorkflowIntegration.SLACK),

backend/src/services/project/project-service.ts

@@ -1573,8 +1573,8 @@ export const projectServiceFactory = ({
     isSecretSyncErrorNotificationEnabled
   }: TUpdateProjectWorkflowIntegration & {
     // workaround intersection type while we don't have the microsoft teams integration for failed secret syncs
-    isSecretSyncErrorNotificationEnabled: boolean;
+    isSecretSyncErrorNotificationEnabled?: boolean;
-    secretSyncErrorChannels: string;
+    secretSyncErrorChannels?: string;
   }) => {
     const project = await projectDAL.findById(projectId);
     if (!project) {

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

@@ -44,6 +44,69 @@ const formSchema = z.object({
 
 type TSlackConfigForm = z.infer<typeof formSchema>;
 
+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>
+);
+
 type Props = {
   onClose: () => void;
 };
@@ -320,63 +383,3 @@ 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>
-);