chore: Add analytic events on Authentication page (#13384)

* added analytic events for Authentication page on Admin settings

* updated event names

app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx

@@ -23,6 +23,7 @@ import Icon from "components/ads/Icon";
 import TooltipComponent from "components/ads/Tooltip";
 import { Position } from "@blueprintjs/core";
 import { adminSettingsCategoryUrl } from "RouteBuilder";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const { intercomAppID } = getAppsmithConfigs();
 
@@ -149,6 +150,30 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) {
     }
   };
 
+  const onClickHandler = (method: AuthMethodType) => {
+    if (!method.needsUpgrade || method.isConnected) {
+      AnalyticsUtil.logEvent(
+        method.isConnected
+          ? "ADMIN_SETTINGS_EDIT_AUTH_METHOD"
+          : "ADMIN_SETTINGS_ENABLE_AUTH_METHOD",
+        {
+          method: method.label,
+        },
+      );
+      history.push(
+        adminSettingsCategoryUrl({
+          category: SettingCategories.AUTHENTICATION,
+          subCategory: method.category,
+        }),
+      );
+    } else {
+      AnalyticsUtil.logEvent("ADMIN_SETTINGS_UPGRADE_AUTH_METHOD", {
+        method: method.label,
+      });
+      triggerIntercom(method.label);
+    }
+  };
+
   return (
     <Wrapper>
       <SettingsFormWrapper>
@@ -211,16 +236,7 @@ export function AuthPage({ authMethods }: { authMethods: AuthMethodType[] }) {
                       : method.category
                   }`}
                   data-cy="btn-auth-account"
-                  onClick={() =>
-                    !method.needsUpgrade || method.isConnected
-                      ? history.push(
-                          adminSettingsCategoryUrl({
-                            category: SettingCategories.AUTHENTICATION,
-                            subCategory: method.category,
-                          }),
-                        )
-                      : triggerIntercom(method.label)
-                  }
+                  onClick={() => onClickHandler(method)}
                   text={createMessage(
                     method.isConnected
                       ? EDIT

app/client/src/ce/pages/AdminSettings/config/types.ts

@@ -13,6 +13,7 @@ export enum SettingTypes {
   UNEDITABLEFIELD = "UNEDITABLEFIELD",
   ACCORDION = "ACCORDION",
   TAGINPUT = "TAGINPUT",
+  DROPDOWN = "DROPDOWN",
 }
 
 export enum SettingSubtype {
@@ -52,6 +53,7 @@ export interface Setting {
   isRequired?: boolean;
   formName?: string;
   fieldName?: string;
+  dropdownOptions?: Array<{ id: string; value: string; label?: string }>;
 }
 
 export interface Category {

app/client/src/components/ads/formFields/SelectField.tsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+import {
+  Field,
+  WrappedFieldMetaProps,
+  WrappedFieldInputProps,
+} from "redux-form";
+import Dropdown from "components/ads/Dropdown";
+
+type DropdownWrapperProps = {
+  placeholder: string;
+  input?: {
+    value?: string;
+    onChange?: (value?: string) => void;
+  };
+  options: Array<{ id: string; value: string; label?: string }>;
+  fillOptions?: boolean;
+};
+
+function DropdownWrapper(props: DropdownWrapperProps) {
+  const [selectedOption, setSelectedOption] = useState({
+    value: props.placeholder,
+  });
+  const onSelectHandler = (value?: string) => {
+    props.input && props.input.onChange && props.input.onChange(value);
+  };
+
+  useEffect(() => {
+    if (props.input && props.input.value) {
+      setSelectedOption({ value: props.input.value });
+    } else if (props.placeholder) {
+      setSelectedOption({ value: props.placeholder });
+    }
+  }, [props.input, props.placeholder]);
+
+  return (
+    <Dropdown
+      fillOptions={props.fillOptions}
+      onSelect={onSelectHandler}
+      options={props.options}
+      selected={selectedOption}
+    />
+  );
+}
+
+const renderComponent = (
+  componentProps: SelectFieldProps & {
+    meta: Partial<WrappedFieldMetaProps>;
+    input: Partial<WrappedFieldInputProps>;
+  },
+) => {
+  return <DropdownWrapper {...componentProps} />;
+};
+
+type SelectFieldProps = {
+  name: string;
+  placeholder: string;
+  options: Array<{ id: string; value: string; label?: string }>;
+  size?: "large" | "small";
+  outline?: boolean;
+  fillOptions?: boolean;
+};
+
+export function SelectField(props: SelectFieldProps) {
+  return (
+    <Field
+      component={renderComponent}
+      fillOptions={props.fillOptions}
+      name={props.name}
+      options={props.options}
+      outline={props.outline}
+      placeholder={props.placeholder}
+      size={props.size}
+    />
+  );
+}
+
+export default SelectField;

app/client/src/pages/Settings/FormGroup/Common.tsx

@@ -20,16 +20,15 @@ const StyledIcon = styled(Icon)`
 export const StyledFormGroup = styled.div`
   width: 40rem;
   margin-bottom: ${(props) => props.theme.spaces[7]}px;
-  & span.bp3-popover-target {
-    display: inline-block;
-    background: ${(props) => props.theme.colors.menuItem.normalIcon};
-    border-radius: ${(props) => props.theme.radii[2]}px;
-    width: 14px;
-    padding: 3px 3px;
-    position: relative;
-    top: -2px;
-    left: 6px;
-    cursor: default;
+  &.t--admin-settings-dropdown {
+    div {
+      width: 100%;
+      &:hover {
+        &:hover {
+          background-color: ${(props) => props.theme.colors.textInput.hover.bg};
+        }
+      }
+    }
   }
   & svg:hover {
     cursor: default;

app/client/src/pages/Settings/FormGroup/Dropdown.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { FormGroup, SettingComponentProps } from "./Common";
+import SelectField from "components/ads/formFields/SelectField";
+
+export default function DropDown(
+  props: {
+    dropdownOptions: Array<{ id: string; value: string; label?: string }>;
+  } & SettingComponentProps,
+) {
+  const { dropdownOptions, setting } = props;
+
+  return (
+    <FormGroup
+      className={`t--admin-settings-dropdown t--admin-settings-${setting.name ||
+        setting.id}`}
+      setting={setting}
+    >
+      <SelectField
+        fillOptions
+        name={setting.id}
+        options={dropdownOptions}
+        outline={false}
+        placeholder="Select an option"
+        size="large"
+      />
+    </FormGroup>
+  );
+}

app/client/src/pages/Settings/FormGroup/group.tsx

@@ -20,6 +20,7 @@ import { Callout } from "components/ads/CalloutV2";
 import { CopyUrlReduxForm } from "components/ads/formFields/CopyUrlForm";
 import Accordion from "./Accordion";
 import TagInputField from "./TagInputField";
+import Dropdown from "./Dropdown";
 import { Classes } from "@blueprintjs/core";
 import { Colors } from "constants/Colors";
 
@@ -228,6 +229,21 @@ export default function Group({
                     />
                   </div>
                 );
+              case SettingTypes.DROPDOWN:
+                return (
+                  <div
+                    className={setting.isHidden ? "hide" : ""}
+                    data-testid="admin-settings-dropdown"
+                    key={setting.name || setting.id}
+                  >
+                    {setting.dropdownOptions && (
+                      <Dropdown
+                        dropdownOptions={setting.dropdownOptions}
+                        setting={setting}
+                      />
+                    )}
+                  </div>
+                );
             }
           })}
       </GroupBody>

app/client/src/pages/Settings/SettingsForm.tsx

@@ -35,6 +35,7 @@ import {
   connectedMethods,
   saveAllowed,
 } from "@appsmith/utils/adminSettingsHelpers";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 const Wrapper = styled.div`
   flex-basis: calc(100% - ${(props) => props.theme.homePage.leftPane.width}px);
@@ -105,11 +106,20 @@ export function SettingsForm(
   const onSave = () => {
     if (checkMandatoryFileds()) {
       if (saveAllowed(props.settings)) {
+        AnalyticsUtil.logEvent("ADMIN_SETTINGS_SAVE", {
+          method: pageTitle,
+        });
         dispatch(saveSettings(props.settings));
       } else {
+        AnalyticsUtil.logEvent("ADMIN_SETTINGS_ERROR", {
+          error: createMessage(DISCONNECT_AUTH_ERROR),
+        });
         saveBlocked();
       }
     } else {
+      AnalyticsUtil.logEvent("ADMIN_SETTINGS_ERROR", {
+        error: createMessage(MANDATORY_FIELDS_ERROR),
+      });
       Toaster.show({
         text: createMessage(MANDATORY_FIELDS_ERROR),
         variant: Variant.danger,
@@ -176,6 +186,9 @@ export function SettingsForm(
         }
       });
       dispatch(saveSettings(updatedSettings));
+      AnalyticsUtil.logEvent("ADMIN_SETTINGS_DISCONNECT_AUTH_METHOD", {
+        method: pageTitle,
+      });
     } else {
       saveBlocked();
     }

app/client/src/utils/AnalyticsUtil.tsx

@@ -199,6 +199,12 @@ export type EventName =
   | "GS_REGENERATE_SSH_KEY_CONFIRM_CLICK"
   | "GS_REGENERATE_SSH_KEY_MORE_CLICK"
   | "GS_SWITCH_BRANCH"
+  | "ADMIN_SETTINGS_SAVE"
+  | "ADMIN_SETTINGS_ERROR"
+  | "ADMIN_SETTINGS_DISCONNECT_AUTH_METHOD"
+  | "ADMIN_SETTINGS_UPGRADE_AUTH_METHOD"
+  | "ADMIN_SETTINGS_EDIT_AUTH_METHOD"
+  | "ADMIN_SETTINGS_ENABLE_AUTH_METHOD"
   | "REFLOW_BETA_FLAG"
   | "CONTAINER_JUMP"
   | "CONNECT_GIT_CLICK"