misc: addressed review comments

frontend/src/hooks/api/admin/index.ts

@@ -4,9 +4,4 @@ export {
   useUpdateAdminSlackConfig,
   useUpdateServerConfig
 } from "./mutation";
-export {
-  useAdminGetUsers,
-  useGetAdminSlackConfig,
-  useGetCustomSlackAppCreationUrl,
-  useGetServerConfig
-} from "./queries";
+export { useAdminGetUsers, useGetAdminSlackConfig, useGetServerConfig } from "./queries";

frontend/src/hooks/api/admin/queries.ts

@@ -12,7 +12,6 @@ export const adminStandaloneKeys = {
 export const adminQueryKeys = {
   serverConfig: () => ["server-config"] as const,
   getUsers: (filters: AdminGetUsersFilters) => [adminStandaloneKeys.getUsers, { filters }] as const,
-  getCustomSlackAppCreationUrl: () => ["custom-slack-app-creation-url"] as const,
   getAdminSlackConfig: () => ["admin-slack-config"] as const
 };
 
@@ -62,18 +61,6 @@ export const useAdminGetUsers = (filters: AdminGetUsersFilters) => {
   });
 };
 
-export const useGetCustomSlackAppCreationUrl = () =>
-  useQuery({
-    queryKey: adminQueryKeys.getCustomSlackAppCreationUrl(),
-    queryFn: async () => {
-      const { data } = await apiRequest.get<string>(
-        "/api/v1/admin/integrations/slack/bot-creation-url"
-      );
-
-      return data;
-    }
-  });
-
 export const useGetAdminSlackConfig = () =>
   useQuery({
     queryKey: adminQueryKeys.getAdminSlackConfig(),

frontend/src/views/Settings/OrgSettingsPage/components/OrgWorkflowIntegrationTab/SlackIntegrationForm.tsx

@@ -121,7 +121,11 @@ export const SlackIntegrationForm = ({ id, onClose }: Props) => {
         </FormControl>
       )}
       <div className="mt-6 flex items-center space-x-4">
-        <Button type="submit" isLoading={isSubmitting || isConnectLoading} isDisabled={!isDirty}>
+        <Button
+          type="submit"
+          isLoading={isSubmitting || isConnectLoading}
+          isDisabled={!isDirty || isConnectLoading || isSubmitting}
+        >
           {slackIntegration ? "Save" : "Connect Slack"}
         </Button>
         <Button variant="outline_bg" onClick={onClose}>

frontend/src/views/admin/DashboardPage/IntegrationPanel.tsx

@@ -5,11 +5,7 @@ import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
 import { Button, FormControl, Input } from "@app/components/v2";
-import {
-  useGetAdminSlackConfig,
-  useGetCustomSlackAppCreationUrl,
-  useUpdateServerConfig
-} from "@app/hooks/api";
+import { useGetAdminSlackConfig, useUpdateServerConfig } from "@app/hooks/api";
 
 const slackFormSchema = z.object({
   clientId: z.string(),
@@ -18,6 +14,45 @@ const slackFormSchema = z.object({
 
 type TSlackForm = z.infer<typeof slackFormSchema>;
 
+const getCustomSlackAppCreationUrl = () =>
+  `https://api.slack.com/apps?new_app=1&manifest_json=${encodeURIComponent(
+    JSON.stringify({
+      display_information: {
+        name: "Infisical",
+        description: "Get real-time Infisical updates in Slack",
+        background_color: "#c2d62b",
+        long_description: `This Slack application is designed specifically for use with your self-hosted Infisical instance, allowing seamless integration between your Infisical projects and your Slack workspace. With this integration, your team can stay up-to-date with the latest events, changes, and notifications directly inside Slack.
+        - Notifications: Receive real-time updates and alerts about critical events in your Infisical projects. Whether it's a new project being created, updates to secrets, or changes to your team's configuration, you will be promptly notified within the designated Slack channels of your choice.
+        - Customization: Tailor the notifications to your team's specific needs by configuring which types of events trigger alerts and in which channels they are sent.
+        - Collaboration: Keep your entire team in the loop with notifications that help facilitate more efficient collaboration by ensuring that everyone is aware of important developments in your Infisical projects.
+        
+        By integrating Infisical with Slack, you can enhance your workflow by combining the power of secure secrets management with the communication capabilities of Slack.`
+      },
+      features: {
+        app_home: {
+          home_tab_enabled: false,
+          messages_tab_enabled: false,
+          messages_tab_read_only_enabled: true
+        },
+        bot_user: {
+          display_name: "Infisical",
+          always_online: true
+        }
+      },
+      oauth_config: {
+        redirect_urls: [`${window.origin}/api/v1/workflow-integrations/slack/oauth_redirect`],
+        scopes: {
+          bot: ["chat:write.public", "chat:write"]
+        }
+      },
+      settings: {
+        org_deploy_enabled: false,
+        socket_mode_enabled: false,
+        token_rotation_enabled: false
+      }
+    })
+  )}`;
+
 export const IntegrationPanel = () => {
   const {
     control,
@@ -28,9 +63,7 @@ export const IntegrationPanel = () => {
     resolver: zodResolver(slackFormSchema)
   });
 
-  const { data: customSlackAppCreationUrl } = useGetCustomSlackAppCreationUrl();
   const { data: adminSlackConfig } = useGetAdminSlackConfig();
-
   const { mutateAsync: updateAdminServerConfig } = useUpdateServerConfig();
 
   useEffect(() => {
@@ -63,7 +96,10 @@ export const IntegrationPanel = () => {
           Step 1: Create your Infisical Slack App
         </div>
         <div className="mb-6">
-          <Button colorSchema="secondary" onClick={() => window.open(customSlackAppCreationUrl)}>
+          <Button
+            colorSchema="secondary"
+            onClick={() => window.open(getCustomSlackAppCreationUrl())}
+          >
             Create Slack App
           </Button>
         </div>