From 251ad6097b3298017ae216a96f2b9ee52ec56816 Mon Sep 17 00:00:00 2001 From: Ankita Kinger Date: Wed, 27 Apr 2022 23:16:24 +0530 Subject: [PATCH] chore: Add analytic events on Authentication page (#13384) * added analytic events for Authentication page on Admin settings * updated event names --- .../config/authentication/AuthPage.tsx | 36 ++++++--- .../ce/pages/AdminSettings/config/types.ts | 2 + .../components/ads/formFields/SelectField.tsx | 77 +++++++++++++++++++ .../src/pages/Settings/FormGroup/Common.tsx | 19 +++-- .../src/pages/Settings/FormGroup/Dropdown.tsx | 28 +++++++ .../src/pages/Settings/FormGroup/group.tsx | 16 ++++ .../src/pages/Settings/SettingsForm.tsx | 13 ++++ app/client/src/utils/AnalyticsUtil.tsx | 6 ++ 8 files changed, 177 insertions(+), 20 deletions(-) create mode 100644 app/client/src/components/ads/formFields/SelectField.tsx create mode 100644 app/client/src/pages/Settings/FormGroup/Dropdown.tsx diff --git a/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx b/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx index 13667db915..1f37dd8916 100644 --- a/app/client/src/ce/pages/AdminSettings/config/authentication/AuthPage.tsx +++ b/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 ( @@ -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 diff --git a/app/client/src/ce/pages/AdminSettings/config/types.ts b/app/client/src/ce/pages/AdminSettings/config/types.ts index b3464eae48..dc5c2ded7b 100644 --- a/app/client/src/ce/pages/AdminSettings/config/types.ts +++ b/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 { diff --git a/app/client/src/components/ads/formFields/SelectField.tsx b/app/client/src/components/ads/formFields/SelectField.tsx new file mode 100644 index 0000000000..4c6694cb5b --- /dev/null +++ b/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 ( + + ); +} + +const renderComponent = ( + componentProps: SelectFieldProps & { + meta: Partial; + input: Partial; + }, +) => { + return ; +}; + +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 ( + + ); +} + +export default SelectField; diff --git a/app/client/src/pages/Settings/FormGroup/Common.tsx b/app/client/src/pages/Settings/FormGroup/Common.tsx index b595c6faa2..c4adfa199b 100644 --- a/app/client/src/pages/Settings/FormGroup/Common.tsx +++ b/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; diff --git a/app/client/src/pages/Settings/FormGroup/Dropdown.tsx b/app/client/src/pages/Settings/FormGroup/Dropdown.tsx new file mode 100644 index 0000000000..d05293ec7c --- /dev/null +++ b/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 ( + + + + ); +} diff --git a/app/client/src/pages/Settings/FormGroup/group.tsx b/app/client/src/pages/Settings/FormGroup/group.tsx index 0c8d0eca13..b7137f183a 100644 --- a/app/client/src/pages/Settings/FormGroup/group.tsx +++ b/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({ /> ); + case SettingTypes.DROPDOWN: + return ( +
+ {setting.dropdownOptions && ( + + )} +
+ ); } })} diff --git a/app/client/src/pages/Settings/SettingsForm.tsx b/app/client/src/pages/Settings/SettingsForm.tsx index d8e6deeb25..39e39edbea 100644 --- a/app/client/src/pages/Settings/SettingsForm.tsx +++ b/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(); } diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx index e35206329a..ef3e2861e6 100644 --- a/app/client/src/utils/AnalyticsUtil.tsx +++ b/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"