Webhook follow up (#10124)

- fix webhook creation
- fix pointer

packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx

@@ -1,3 +1,4 @@
+import { v4 } from 'uuid';
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
 import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
@@ -9,10 +10,6 @@ import styled from '@emotion/styled';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { Button, H2Title, IconPlus, MOBILE_VIEWPORT, Section } from 'twenty-ui';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
-import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
-import { Webhook } from '@/settings/developers/types/webhook/Webhook';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 
 const StyledButtonContainer = styled.div`
   display: flex;
@@ -32,24 +29,7 @@ const StyledContainer = styled.div<{ isMobile: boolean }>`
 
 export const SettingsDevelopers = () => {
   const isMobile = useIsMobile();
-  const navigate = useNavigateSettings();
   const { t } = useLingui();
-  const { createOneRecord: createOneWebhook } = useCreateOneRecord<Webhook>({
-    objectNameSingular: CoreObjectNameSingular.Webhook,
-  });
-
-  const createNewWebhook = async () => {
-    const newWebhook = await createOneWebhook({
-      targetUrl: '',
-      operations: ['*.*'],
-    });
-    if (!newWebhook) {
-      return;
-    }
-    navigate(SettingsPath.DevelopersNewWebhookDetail, {
-      webhookId: newWebhook.id,
-    });
-  };
 
   return (
     <SubMenuTopBarContainer
@@ -93,7 +73,15 @@ export const SettingsDevelopers = () => {
                 title={t`Create Webhook`}
                 size="small"
                 variant="secondary"
-                onClick={createNewWebhook}
+                to={getSettingsPath(
+                  SettingsPath.DevelopersNewWebhookDetail,
+                  {
+                    webhookId: v4(),
+                  },
+                  {
+                    creationMode: true,
+                  },
+                )}
               />
             </StyledButtonContainer>
           </Section>

packages/twenty-front/src/pages/settings/developers/webhooks/components/SettingsDevelopersWebhookDetail.tsx

@@ -1,7 +1,7 @@
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import styled from '@emotion/styled';
 import { useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import {
   Button,
   H2Title,
@@ -33,6 +33,7 @@ import { useRecoilValue } from 'recoil';
 import { FeatureFlagKey } from '~/generated/graphql';
 import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
 import { useWebhookUpdateForm } from '@/settings/developers/hooks/useWebhookUpdateForm';
+import { isDefined } from 'twenty-shared';
 
 const OBJECT_DROPDOWN_WIDTH = 340;
 const ACTION_DROPDOWN_WIDTH = 140;
@@ -68,8 +69,13 @@ export const SettingsDevelopersWebhooksDetail = () => {
 
   const { webhookId = '' } = useParams();
 
+  const [searchParams] = useSearchParams();
+
+  const isCreationMode = isDefined(searchParams.get('creationMode'));
+
   const {
     formData,
+    title,
     loading,
     isTargetUrlValid,
     updateWebhook,
@@ -78,6 +84,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
     deleteWebhook,
   } = useWebhookUpdateForm({
     webhookId,
+    isCreationMode,
   });
 
   const [isDeleteWebhookModalOpen, setIsDeleteWebhookModalOpen] =
@@ -114,7 +121,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
 
   return (
     <SubMenuTopBarContainer
-      title={formData.targetUrl}
+      title={title}
       reserveTitleSpace
       links={[
         {
@@ -220,7 +227,7 @@ export const SettingsDevelopersWebhooksDetail = () => {
             fullWidth
           />
         </Section>
-        {isAnalyticsEnabled && isAnalyticsV2Enabled && (
+        {!isCreationMode && isAnalyticsEnabled && isAnalyticsV2Enabled && (
           <AnalyticsGraphDataInstanceContext.Provider
             value={{ instanceId: `webhook-${webhookId}-analytics` }}
           >