diff --git a/package-lock.json b/package-lock.json index 52afe323b..307ba5d4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-2", + "version": "1.16.0-pre-3", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-2", + "version": "1.16.0-pre-3", "hasInstallScript": true, "license": "ISC", "dependencies": { diff --git a/package.json b/package.json index 0a3efc2c3..db9f911ea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@devtron-labs/devtron-fe-common-lib", - "version": "1.16.0-pre-2", + "version": "1.16.0-pre-3", "description": "Supporting common component library", "type": "module", "main": "dist/index.js", diff --git a/src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx b/src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx index a4fb3d166..c642d1117 100644 --- a/src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx +++ b/src/Shared/Components/AboutDevtron/AboutDevtronBody.tsx @@ -7,8 +7,8 @@ import { useMainContext } from '@Shared/Providers' import { Button, ButtonComponentType, ButtonStyleType, ButtonVariantType } from '../Button' import { Icon } from '../Icon' -const AboutDevtronBody = ({ isFELibAvailable }: { isFELibAvailable: boolean }) => { - const { currentServerInfo, isEnterprise } = useMainContext() +const AboutDevtronBody = () => { + const { currentServerInfo, isEnterprise, isFELibAvailable } = useMainContext() const currentVersion = currentServerInfo?.serverInfo?.currentVersion diff --git a/src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx b/src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx index 1b48138e6..f9676262e 100644 --- a/src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx +++ b/src/Shared/Components/AboutDevtron/AboutDevtronDialog.tsx @@ -4,17 +4,11 @@ import { Backdrop } from '../Backdrop' import { Button } from '../Button' import AboutDevtronBody from './AboutDevtronBody' -const AboutDevtronDialog = ({ - handleCloseLicenseInfoDialog, - isFELibAvailable, -}: { - handleCloseLicenseInfoDialog: () => void - isFELibAvailable: boolean -}) => ( +const AboutDevtronDialog = ({ handleCloseLicenseInfoDialog }: { handleCloseLicenseInfoDialog: () => void }) => (
- +
+
+ getting started icon +
Getting started
+
You can always access the Getting Started guide from here.
+
+
) diff --git a/src/Shared/Components/GettingStartedCard/gettingStarted.scss b/src/Shared/Components/GettingStartedCard/gettingStarted.scss deleted file mode 100644 index 51393ab98..000000000 --- a/src/Shared/Components/GettingStartedCard/gettingStarted.scss +++ /dev/null @@ -1,37 +0,0 @@ -/* - * Copyright (c) 2024. Devtron Inc. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.getting-started-card { - position: fixed; - z-index: 6; - right: 20px; - top: 54px; -} - -.arrow-up { - width: 0; - height: 0; - border-left: 12px solid transparent; - border-right: 12px solid transparent; - border-bottom: 12px solid var(--bg-overlay-primary); - right: 64px; - position: fixed; - top: 42px; -} - -.getting_tippy__position { - position: fixed; -} diff --git a/src/Shared/Components/GettingStartedCard/types.ts b/src/Shared/Components/GettingStartedCard/types.ts index 7144c1ad5..6008f8a35 100644 --- a/src/Shared/Components/GettingStartedCard/types.ts +++ b/src/Shared/Components/GettingStartedCard/types.ts @@ -27,8 +27,5 @@ export interface LoginCountType extends ResponseType { } export interface GettingStartedType { - className: string - showHelpCard: boolean hideGettingStartedCard: (count?: string) => void - loginCount: number } diff --git a/src/Shared/Components/Header/HelpButton.tsx b/src/Shared/Components/Header/HelpButton.tsx index 24b5113bd..422eab6ee 100644 --- a/src/Shared/Components/Header/HelpButton.tsx +++ b/src/Shared/Components/Header/HelpButton.tsx @@ -1,14 +1,16 @@ -import { useRef, useState } from 'react' -import ReactGA from 'react-ga4' +import { useEffect, useRef, useState } from 'react' +import Tippy from '@tippyjs/react' import { SliderButton } from '@typeform/embed-react' -import { DOCUMENTATION_HOME_PAGE, URLS } from '@Common/Constants' +import { DOCUMENTATION_HOME_PAGE, MAX_LOGIN_COUNT, URLS } from '@Common/Constants' +import { handleAnalyticsEvent } from '@Shared/Analytics' import { ComponentSizeType } from '@Shared/constants' -import { SidePanelTab, useMainContext } from '@Shared/Providers' +import { AppThemeType, SidePanelTab, useMainContext, useTheme } from '@Shared/Providers' import { InstallationType } from '@Shared/types' import { ActionMenu } from '../ActionMenu' import { Button, ButtonComponentType, ButtonVariantType } from '../Button' +import GettingStartedCard from '../GettingStartedCard/GettingStarted' import { Icon } from '../Icon' import { HelpButtonActionMenuProps, HelpButtonProps, HelpMenuItems } from './types' import { getHelpActionMenuOptions } from './utils' @@ -36,33 +38,28 @@ const CheckForUpdates = ({
) -export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButtonProps) => { +export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick, hideGettingStartedCard }: HelpButtonProps) => { // STATES const [isActionMenuOpen, setIsActionMenuOpen] = useState(false) + const [expiryDate, setExpiryDate] = useState(0) // HOOKS - const { handleOpenLicenseInfoDialog, licenseData, setGettingStartedClicked, isEnterprise, setSidePanelConfig } = - useMainContext() + const { + handleOpenLicenseInfoDialog, + licenseData, + setGettingStartedClicked, + isEnterprise, + setSidePanelConfig, + loginCount, + showGettingStartedCard, + } = useMainContext() + const { appTheme } = useTheme() // REFS const typeFormSliderButtonRef = useRef(null) - // CONSTANTS - const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}` - // HANDLERS - const handleAnalytics: HelpButtonActionMenuProps['onClick'] = (item) => { - ReactGA.event({ - category: 'Help Nav', - action: `${item.label} Clicked`, - }) - } - const handleOpenAboutDevtron = () => { - ReactGA.event({ - category: 'help-nav__about-devtron', - action: 'ABOUT_DEVTRON_CLICKED', - }) handleOpenLicenseInfoDialog() } @@ -74,8 +71,7 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt setGettingStartedClicked(true) } - const handleViewDocumentationClick: HelpButtonActionMenuProps['onClick'] = (item, e) => { - handleAnalytics(item, e) + const handleViewDocumentationClick: HelpButtonActionMenuProps['onClick'] = (_, e) => { // Opens documentation in side panel when clicked normally, or in a new tab when clicked with the meta/command key if (!e.metaKey) { e.preventDefault() @@ -89,6 +85,10 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt } const handleActionMenuClick: HelpButtonActionMenuProps['onClick'] = (item, e) => { + handleAnalyticsEvent({ + category: 'Help Nav', + action: `HELP_${item.id.toUpperCase().replace('-', '_')}`, + }) switch (item.id) { case HelpMenuItems.GETTING_STARTED: handleGettingStartedClick() @@ -99,14 +99,6 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt case HelpMenuItems.GIVE_FEEDBACK: handleFeedbackClick() break - case HelpMenuItems.JOIN_DISCORD_COMMUNITY: - case HelpMenuItems.OPEN_NEW_TICKET: - case HelpMenuItems.VIEW_ALL_TICKETS: - case HelpMenuItems.CHAT_WITH_SUPPORT: - case HelpMenuItems.RAISE_ISSUE_REQUEST: - case HelpMenuItems.DEVTRON_GPT: - handleAnalytics(item, e) - break case HelpMenuItems.VIEW_DOCUMENTATION: handleViewDocumentationClick(item, e) break @@ -114,6 +106,23 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt } } + const getExpired = (): boolean => { + // Render Getting started tippy card if the time gets expired + const now = new Date().valueOf() + return now > expiryDate + } + + // USE-EFFECT + useEffect(() => { + setExpiryDate(+localStorage.getItem('clickedOkay')) + }, []) + + // CONSTANTS + const FEEDBACK_FORM_ID = `UheGN3KJ#source=${window.location.hostname}` + + const isGettingStartedVisible = + showGettingStartedCard && loginCount >= 0 && loginCount < MAX_LOGIN_COUNT && getExpired() + return ( <> @@ -137,16 +146,28 @@ export const HelpButton = ({ serverInfo, fetchingServerInfo, onClick }: HelpButt } : {})} > - + + {isEnterprise && ( { - const { - loginCount, - setLoginCount, - showGettingStartedCard, - setShowGettingStartedCard, - setSidePanelConfig, - sidePanelConfig, - } = useMainContext() + const { setLoginCount, setShowGettingStartedCard, setSidePanelConfig, sidePanelConfig } = useMainContext() const { showSwitchThemeLocationTippy, handleShowSwitchThemeLocationTippyChange } = useTheme() const { isTippyCustomized, tippyRedirectLink, TippyIcon, tippyMessage, onClickTippyButton, additionalContent } = @@ -69,7 +57,6 @@ const PageHeader = ({ fetchingServerInfo: false, }, ) - const [expiryDate, setExpiryDate] = useState(0) const getCurrentServerInfo = async () => { try { @@ -88,10 +75,6 @@ const PageHeader = ({ } } - useEffect(() => { - setExpiryDate(+localStorage.getItem('clickedOkay')) - }, []) - const hideGettingStartedCard = (count?: string) => { setShowGettingStartedCard(false) if (count) { @@ -119,7 +102,7 @@ const PageHeader = ({ setActionWithExpiry('clickedOkay', 1) hideGettingStartedCard() await handlePostHogEventUpdate(POSTHOG_EVENT_ONBOARDING.HELP) - ReactGA.event({ + handleAnalyticsEvent({ category: 'Main Navigation', action: `Help Clicked`, }) @@ -133,7 +116,7 @@ const PageHeader = ({ ) const onAskButtonClick = () => { - ReactGA.event({ + handleAnalyticsEvent({ category: 'AI', action: `HELP_ASK_DEVTRON_AI`, }) @@ -158,6 +141,7 @@ const PageHeader = ({ serverInfo={currentServerInfo.serverInfo} fetchingServerInfo={currentServerInfo.fetchingServerInfo} onClick={handleHelpButtonClick} + hideGettingStartedCard={hideGettingStartedCard} /> {!window._env_.K8S_CLIENT && ( ) - const getExpired = (): boolean => { - // Render Getting started tippy card if the time gets expired - const now = new Date().valueOf() - return now > expiryDate - } - - const renderBetaTag = (): JSX.Element => ( - Beta - ) - const renderIframeButton = () => return ( @@ -204,16 +178,6 @@ const PageHeader = ({ >

- {showCloseButton && ( - - )} {headerName} @@ -257,7 +221,6 @@ const PageHeader = ({ ))} - {markAsBeta && renderBetaTag()}
{showTabs && (
@@ -268,18 +231,6 @@ const PageHeader = ({ )}

{showTabs && renderHeaderTabs()} - {!window._env_.K8S_CLIENT && - showGettingStartedCard && - loginCount >= 0 && - loginCount < MAX_LOGIN_COUNT && - getExpired() && ( - - )} {!showTabs && (
{typeof renderActionButtons === 'function' && renderActionButtons()} diff --git a/src/Shared/Components/Header/types.ts b/src/Shared/Components/Header/types.ts index 23fca5bbd..5a6563a10 100644 --- a/src/Shared/Components/Header/types.ts +++ b/src/Shared/Components/Header/types.ts @@ -28,9 +28,6 @@ export interface PageHeaderType { isBreadcrumbs?: boolean breadCrumbs?: () => JSX.Element renderActionButtons?: () => JSX.Element - showCloseButton?: boolean - onClose?: () => void - markAsBeta?: boolean tippyProps?: Pick, 'additionalContent'> & { isTippyCustomized?: boolean tippyRedirectLink?: keyof typeof DOCUMENTATION @@ -55,6 +52,7 @@ export interface HelpButtonProps { serverInfo: ServerInfo fetchingServerInfo: boolean onClick: () => void + hideGettingStartedCard: () => void } export enum HelpMenuItems { diff --git a/src/Shared/Components/SelectPicker/type.ts b/src/Shared/Components/SelectPicker/type.ts index b572b412a..4052142d4 100644 --- a/src/Shared/Components/SelectPicker/type.ts +++ b/src/Shared/Components/SelectPicker/type.ts @@ -169,6 +169,7 @@ export type SelectPickerProps & Partial< Pick< diff --git a/src/Shared/Providers/MainContextProvider.tsx b/src/Shared/Providers/MainContextProvider/MainContextProvider.tsx similarity index 96% rename from src/Shared/Providers/MainContextProvider.tsx rename to src/Shared/Providers/MainContextProvider/MainContextProvider.tsx index b8f1238ab..e0ac48904 100644 --- a/src/Shared/Providers/MainContextProvider.tsx +++ b/src/Shared/Providers/MainContextProvider/MainContextProvider.tsx @@ -18,7 +18,6 @@ import { createContext, useContext } from 'react' import { MainContext, MainContextProviderProps } from './types' -// TODO: (Arun) - Move to separate folder const mainContext = createContext(null) export const useMainContext = () => { diff --git a/src/Shared/Providers/MainContextProvider/index.ts b/src/Shared/Providers/MainContextProvider/index.ts new file mode 100644 index 000000000..7bd1e1720 --- /dev/null +++ b/src/Shared/Providers/MainContextProvider/index.ts @@ -0,0 +1,3 @@ +export * from './MainContextProvider' +export type { MainContext, ReloadVersionConfigTypes, SidePanelConfig } from './types' +export { SidePanelTab } from './types' diff --git a/src/Shared/Providers/types.ts b/src/Shared/Providers/MainContextProvider/types.ts similarity index 97% rename from src/Shared/Providers/types.ts rename to src/Shared/Providers/MainContextProvider/types.ts index c1d1cd9c9..ba23f9cd4 100644 --- a/src/Shared/Providers/types.ts +++ b/src/Shared/Providers/MainContextProvider/types.ts @@ -16,9 +16,9 @@ import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react' -import { SERVER_MODE } from '../../Common' -import { ServerInfo } from '../Components/Header/types' -import { DevtronLicenseInfo, IntelligenceConfig, LicenseInfoDialogType, ToastManager } from '..' +import { SERVER_MODE } from '../../../Common' +import { DevtronLicenseInfo, IntelligenceConfig, LicenseInfoDialogType, ToastManager } from '../..' +import { ServerInfo } from '../../Components/Header/types' export interface ReloadVersionConfigTypes { bgUpdated: boolean diff --git a/src/Shared/Providers/index.ts b/src/Shared/Providers/index.ts index 8ad4a382f..17f612fb7 100644 --- a/src/Shared/Providers/index.ts +++ b/src/Shared/Providers/index.ts @@ -17,6 +17,4 @@ export * from './ImageSelectionUtility' export * from './MainContextProvider' export * from './ThemeProvider' -export type { MainContext, ReloadVersionConfigTypes, SidePanelConfig } from './types' -export { SidePanelTab } from './types' export * from './UserEmailProvider'