supported removal of subscription in teams (#13404)

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamDetailsV1.tsx

@@ -336,14 +336,16 @@ const TeamDetailsV1 = ({
     }
   };
 
-  const updateTeamSubscription = async (data: SubscriptionWebhook) => {
+  const updateTeamSubscription = async (data?: SubscriptionWebhook) => {
     if (currentTeam) {
       const updatedData: Team = {
         ...currentTeam,
         profile: {
-          subscription: {
-            [data.webhook]: { endpoint: data.endpoint },
-          },
+          subscription: isEmpty(data)
+            ? undefined
+            : {
+                [data?.webhook ?? '']: { endpoint: data?.endpoint },
+              },
         },
       };
 

openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/TeamsHeaderSection/TeamsSubscription.component.tsx

@@ -50,21 +50,7 @@ const TeamsSubscription = ({
   }, []);
 
   // Watchers
-  const webhooks: {
-    webhook: string;
-    endpoint: string;
-  }[] = Form.useWatch(['subscriptions'], form);
-
-  // Run time values needed for conditional rendering
-  const subscriptionOptions = useMemo(() => {
-    const exitingWebhook = webhooks?.map((f) => f?.webhook) ?? [];
-
-    return SUBSCRIPTION_WEBHOOK_OPTIONS.map((func) => ({
-      label: func.label,
-      value: func.value,
-      disabled: exitingWebhook.includes(func.value),
-    }));
-  }, [webhooks]);
+  const isWebhookEmpty = isEmpty(Form.useWatch('webhook', form));
 
   const cellItem = useCallback(
     (key: string, value: Webhook) => (
@@ -94,7 +80,7 @@ const TeamsSubscription = ({
     setIsLoading(true);
 
     try {
-      await updateTeamSubscription(values);
+      await updateTeamSubscription(isWebhookEmpty ? undefined : values);
     } catch {
       // parent block will throw error
     } finally {
@@ -103,6 +89,12 @@ const TeamsSubscription = ({
     }
   };
 
+  useEffect(() => {
+    if (isWebhookEmpty) {
+      form.setFieldValue('endpoint', '');
+    }
+  }, [isWebhookEmpty]);
+
   useEffect(() => {
     if (subscription) {
       const data = Object.entries(subscription)[0];
@@ -155,7 +147,7 @@ const TeamsSubscription = ({
             onFinish={handleSave}>
             <Form.Item label={t('label.webhook')} name="webhook">
               <Select
-                options={subscriptionOptions}
+                options={SUBSCRIPTION_WEBHOOK_OPTIONS}
                 placeholder={t('label.select-field', {
                   field: t('label.condition'),
                 })}
@@ -166,7 +158,7 @@ const TeamsSubscription = ({
               name="endpoint"
               rules={[
                 {
-                  required: true,
+                  required: !isWebhookEmpty,
                   message: t('label.field-required-plural', {
                     field: t('label.endpoint'),
                   }),
@@ -177,6 +169,7 @@ const TeamsSubscription = ({
                 },
               ]}>
               <Input
+                disabled={isWebhookEmpty}
                 placeholder={t('label.enter-entity-value', {
                   entity: t('label.endpoint'),
                 })}

openmetadata-ui/src/main/resources/ui/src/components/Team/TeamDetails/team.interface.ts

@@ -69,7 +69,7 @@ export interface TeamsInfoProps {
 export interface TeamsSubscriptionProps {
   hasEditPermission: boolean;
   subscription?: MessagingProvider;
-  updateTeamSubscription: (value: SubscriptionWebhook) => Promise<void>;
+  updateTeamSubscription: (value?: SubscriptionWebhook) => Promise<void>;
 }
 
 export interface SubscriptionWebhook {

openmetadata-ui/src/main/resources/ui/src/constants/Teams.constants.ts

@@ -30,6 +30,10 @@ export enum SUBSCRIPTION_WEBHOOK {
 }
 
 export const SUBSCRIPTION_WEBHOOK_OPTIONS = [
+  {
+    label: t('label.none'),
+    value: '',
+  },
   {
     label: t('label.ms-team-plural'),
     value: SUBSCRIPTION_WEBHOOK.MS_TEAMS,