slack integration has no CTA after completion about highlight HOT 2 OPEN

HIG-4753 slack integration has no CTA after completion

from highlight.

To address the issue of no onboarding UI after enabling Slack integration, follow these steps:

1. Update SlackIntegrationCallback Component:

   • File: /frontend/src/pages/IntegrationAuthCallback/IntegrationAuthCallbackPage.tsx
   • Add a CTA to navigate to the Alerts page after successful integration.

   const SlackIntegrationCallback = ({ code, projectId, next }: Props) => {
     const navigate = useNavigate();
     const { setLoadingState } = useAppLoadingContext();
     const { addSlackToWorkspace } = useSlackBot();
   
     useEffect(() => {
       let nextUrl = '/integrations';
       (async () => {
         try {
           if (!projectId || !code) return;
   
           if (next) {
             nextUrl = `/${projectId}/${next}`;
           } else {
             nextUrl = `/${projectId}/integrations`;
           }
   
           await addSlackToWorkspace(code, projectId);
           // Add CTA to navigate to Alerts page
           toast.success('Slack integration successful! Navigate to Alerts page to configure alerts.', {
             duration: 5000,
             action: {
               text: 'Go to Alerts',
               onClick: () => navigate(`/${projectId}/alerts`)
             }
           });
         } catch (e: any) {
           logError(e);
         } finally {
           navigate(nextUrl);
           setLoadingState(AppLoadingState.LOADED);
         }
       })();
     }, [code, projectId, next, addSlackToWorkspace, setLoadingState, navigate]);
   
     return null;
   };

2. Update Documentation:

   • File: /docs-content/general/7_integrations/slack-integration.md
   • Add a note about navigating to the Alerts page after integration.

   ## Post-Integration Steps
   
   After enabling Slack integration, navigate to the [Alerts page](https://app.highlight.io/alerts) to configure your alerts and notifications.

References

/frontend/src/components/Header/components/ConnectHighlightWithSlackButton/ConnectHighlightWithSlackButton.tsx
/frontend/src/components/Header/components/ConnectHighlightWithSlackButton/utils/utils.ts
/frontend/src/pages/IntegrationAuthCallback/IntegrationAuthCallbackPage.tsx
/docs-content/general/7_integrations/slack-integration.md
/frontend/src/pages/Alerts/LogAlert/LogAlertPage.tsx

Ask Greptile

from highlight.