setShowHelpCard(!showHelpCard)}>
+
+
+
{HelpOptions.map((option) => {
return (
-
+ {
+ ReactGA.event({
+ category: 'Main Navigation',
+ action: `${option.name} Clicked`,
+ })
+ }}
+ >
+
)
diff --git a/src/components/common/gettingStartedCard/GettingStarted.tsx b/src/components/common/gettingStartedCard/GettingStarted.tsx
new file mode 100644
index 0000000000..33097600f7
--- /dev/null
+++ b/src/components/common/gettingStartedCard/GettingStarted.tsx
@@ -0,0 +1,54 @@
+import React from 'react'
+import GettingToast from '../../../assets/img/lifebuoy.png'
+import { updateLoginCount } from '../../../services/service'
+import { handlePostHogEventUpdate, LOGIN_COUNT, MAX_LOGIN_COUNT, POSTHOG_EVENT_ONBOARDING } from '../../onboardingGuide/onboarding.utils'
+import { GettingStartedType } from '../../onboardingGuide/OnboardingGuide.type'
+import { setActionWithExpiry } from '../helpers/Helpers'
+import './gettingStarted.scss'
+
+function GettingStartedCard({ className, hideGettingStartedCard }: GettingStartedType) {
+ const onClickedOkay = (e) => {
+ setActionWithExpiry('clickedOkay', 1)
+ hideGettingStartedCard()
+ handlePostHogEventUpdate(e)
+ }
+
+ const onClickedDontShowAgain = (e) => {
+ const updatedPayload = {
+ key: LOGIN_COUNT,
+ value: `${MAX_LOGIN_COUNT}`,
+ }
+ updateLoginCount(updatedPayload)
+ hideGettingStartedCard(updatedPayload.value)
+ handlePostHogEventUpdate(e)
+ }
+
+ return (
+
Getting started
+ {option.name}
+
{option.showSeparator && }
+
+
+ )
+}
+
+export default GettingStartedCard
diff --git a/src/components/common/gettingStartedCard/gettingStarted.scss b/src/components/common/gettingStartedCard/gettingStarted.scss
new file mode 100644
index 0000000000..6ab064dcab
--- /dev/null
+++ b/src/components/common/gettingStartedCard/gettingStarted.scss
@@ -0,0 +1,23 @@
+.getting-started-card {
+ background-color: #2d3452;
+ 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 #2d3452;
+ right: 64px;
+ position: fixed;
+ top: 42px
+}
+
+.getting_tippy__position {
+ position: fixed;
+}
\ No newline at end of file
diff --git a/src/components/common/header/PageHeader.tsx b/src/components/common/header/PageHeader.tsx
index e58489adf8..770b0aa2e9 100644
--- a/src/components/common/header/PageHeader.tsx
+++ b/src/components/common/header/PageHeader.tsx
@@ -5,10 +5,14 @@ import { ReactComponent as Close } from '../../../assets/icons/ic-close.svg'
import HelpNav from '../HelpNav'
import './pageHeader.css'
import LogoutCard from '../LogoutCard'
-import { getLoginInfo, getRandomColor } from '../helpers/Helpers'
+import { getLoginInfo, getRandomColor, setActionWithExpiry } from '../helpers/Helpers'
import { ServerInfo } from '../../v2/devtronStackManager/DevtronStackManager.type'
import { getServerInfo } from '../../v2/devtronStackManager/DevtronStackManager.service'
+import { useRouteMatch, useHistory, useLocation } from 'react-router'
+import GettingStartedCard from '../gettingStartedCard/GettingStarted'
+import { mainContext } from '../navigation/NavigationRoutes'
import ReactGA from 'react-ga4'
+import { handlePostHogEventUpdate, MAX_LOGIN_COUNT, POSTHOG_EVENT_ONBOARDING } from '../../onboardingGuide/onboarding.utils'
export interface PageHeaderType {
headerName?: string
additionalHeaderInfo?: () => JSX.Element
@@ -42,6 +46,14 @@ function PageHeader({
showCloseButton = false,
onClose,
}: PageHeaderType) {
+ const {
+ loginCount,
+ setLoginCount,
+ showGettingStartedCard,
+ setShowGettingStartedCard,
+ isGettingStartedClicked,
+ setGettingStartedClicked,
+ } = useContext(mainContext)
const [showHelpCard, setShowHelpCard] = useState(false)
const [showLogOutCard, setShowLogOutCard] = useState(false)
const loginInfo = getLoginInfo()
@@ -52,6 +64,7 @@ function PageHeader({
fetchingServerInfo: false,
},
)
+ const [expiryDate, setExpiryDate] = useState(0)
const getCurrentServerInfo = async () => {
try {
@@ -68,23 +81,44 @@ function PageHeader({
console.error('Error in fetching server info')
}
}
+
+ useEffect(() => {
+ setExpiryDate(+localStorage.getItem('clickedOkay'))
+ }, [])
+
useEffect(() => {
getCurrentServerInfo()
}, [])
+ const onClickLogoutButton = () => {
+ setShowLogOutCard(!showLogOutCard)
+ if (showHelpCard) {
+ setShowHelpCard(false)
+ }
+ setActionWithExpiry('clickedOkay', 1)
+ hideGettingStartedCard()
+ }
+
+ const onClickHelp = (e) => {
+ setShowHelpCard(!showHelpCard)
+ if (showLogOutCard) {
+ setShowLogOutCard(false)
+ }
+ setActionWithExpiry('clickedOkay', 1)
+ hideGettingStartedCard()
+ handlePostHogEventUpdate(e, POSTHOG_EVENT_ONBOARDING.HELP)
+ ReactGA.event({
+ category: 'Main Navigation',
+ action: `Help Clicked`,
+ })
+ }
+
const renderLogoutHelpSection = () => {
return (
<>
+ 
+
+ Getting started
+ You can always access the Getting Started guide from here.
+
+
+
+
+ {
- setShowHelpCard(!showHelpCard)
- showLogOutCard && setShowLogOutCard(false)
- ReactGA.event({
- category: 'Main Navigation',
- action: `Help Clicked`,
- })
- }}
+ onClick={onClickHelp}
>
{
- setShowLogOutCard(!showLogOutCard)
- showHelpCard && setShowHelpCard(false)
- }}
+ onClick={onClickLogoutButton}
style={{ backgroundColor: getRandomColor(email) }}
>
{email[0]}
@@ -105,6 +136,19 @@ function PageHeader({
)
}
+ const hideGettingStartedCard = (count?: string) => {
+ setShowGettingStartedCard(false)
+ if (count) {
+ setLoginCount(+count)
+ }
+ }
+
+ const getExpired = (): boolean => {
+ // Render Getting started tippy card if the time gets expired
+ const now = new Date().valueOf()
+ return now > expiryDate
+ }
+
return (
+ )}
+ {showGettingStartedCard && loginCount >= 0 && loginCount < MAX_LOGIN_COUNT && getExpired() && (
+ => {
})
})
}
+
+// Setting expiry time in local storage for specified action key
+export const setActionWithExpiry = (key: string, days: number): void => {
+ localStorage.setItem(key, `${getDateInMilliseconds(days)}`)
+}
diff --git a/src/components/common/navigation/NavigationRoutes.tsx b/src/components/common/navigation/NavigationRoutes.tsx
index 4157b9a769..52e30c8d72 100644
--- a/src/components/common/navigation/NavigationRoutes.tsx
+++ b/src/components/common/navigation/NavigationRoutes.tsx
@@ -7,13 +7,24 @@ import { useRouteMatch, useHistory, useLocation } from 'react-router'
import * as Sentry from '@sentry/browser'
import ReactGA from 'react-ga4'
import { Security } from '../../security/Security'
-import { dashboardLoggedIn, getVersionConfig } from '../../../services/service'
+import {
+ dashboardLoggedIn,
+ getAppListMin,
+ getLoginData,
+ getVersionConfig,
+ updateLoginCount,
+} from '../../../services/service'
import Reload from '../../Reload/Reload'
import { EnvType } from '../../v2/appDetails/appDetails.type'
import DevtronStackManager from '../../v2/devtronStackManager/DevtronStackManager'
import { ServerInfo } from '../../v2/devtronStackManager/DevtronStackManager.type'
import { getServerInfo } from '../../v2/devtronStackManager/DevtronStackManager.service'
import ClusterNodeContainer from '../../ClusterNodes/ClusterNodeContainer'
+import DeployManageGuide from '../../onboardingGuide/DeployManageGuide'
+import { showError } from '../helpers/Helpers'
+import { AppRouterType } from '../../../services/service.types'
+import { getUserRole } from '../../userGroups/userGroup.service'
+import { LOGIN_COUNT, MAX_LOGIN_COUNT } from '../../onboardingGuide/onboarding.utils'
const Charts = lazy(() => import('../../charts/Charts'))
const ExternalApps = lazy(() => import('../../external-apps/ExternalApps'))
@@ -23,6 +34,8 @@ const V2Details = lazy(() => import('../../v2/index'))
const GlobalConfig = lazy(() => import('../../globalConfigurations/GlobalConfiguration'))
const BulkActions = lazy(() => import('../../deploymentGroups/BulkActions'))
const BulkEdit = lazy(() => import('../../bulkEdits/BulkEdits'))
+const OnboardingGuide = lazy(() => import('../../onboardingGuide/OnboardingGuide'))
+
export const mainContext = createContext(null)
export default function NavigationRoutes() {
@@ -38,10 +51,71 @@ export default function NavigationRoutes() {
fetchingServerInfo: false,
},
)
+ const [isHelpGettingStartedClicked, setHelpGettingStartedClicked] = useState(false)
+ const [loginCount, setLoginCount] = useState(0)
+ const [expiryDate, setExpiryDate] = useState(0)
+ const [isSuperAdmin, setSuperAdmin] = useState(false)
+ const [appListCount, setAppListCount] = useState(0)
+ const [loginLoader, setLoginLoader] = useState(true)
+ const [isDeployManageCardClicked, setDeployManageCardClicked] = useState(false)
+ const [showGettingStartedCard, setShowGettingStartedCard] = useState(true)
+ const [isGettingStartedClicked, setGettingStartedClicked] = useState(false)
+
+ const showCloseButtonAfterGettingStartedClicked = () => {
+ setHelpGettingStartedClicked(true)
+ }
+
+ useEffect(() => {
+ getInit()
+ setExpiryDate(+localStorage.getItem('clickedOkay'))
+ }, [])
+
+ const getInit = () => {
+ setLoginLoader(true)
+ Promise.all([getUserRole(), serverMode === SERVER_MODE.FULL && getAppListMin(), getLoginData()]).then(
+ (response) => {
+ const superAdmin = response[0]?.result?.roles.includes('role:super-admin___')
+ setSuperAdmin(superAdmin)
+ setAppListCount(response[1]?.result?.length)
+ processLoginData(response[2], superAdmin)
+ setLoginLoader(false)
+ },
+ (err) => {
+ setLoginLoader(false)
+ showError(err)
+ },
+ )
+ }
+
+ const processLoginData = (response, superAdmin) => {
+ const count = response.result?.value ? parseInt(response.result.value) : 0
+ setLoginCount(count)
+ if (
+ typeof Storage !== 'undefined' &&
+ (localStorage.getItem('isSSOLogin') || localStorage.getItem('isAdminLogin'))
+ ) {
+ localStorage.removeItem('isSSOLogin')
+ localStorage.removeItem('isAdminLogin')
+ if (count < MAX_LOGIN_COUNT) {
+ const updatedPayload = {
+ key: LOGIN_COUNT,
+ value: `${count + 1}`,
+ }
+ updateLoginCount(updatedPayload)
+ }
+ }
+ if (!count && superAdmin) {
+ history.push(`/${URLS.GETTING_STARTED}`)
+ } else if (!count) {
+ history.push(URLS.APP)
+ }
+ }
useEffect(() => {
const loginInfo = getLoginInfo()
+
if (!loginInfo) return
+
if (process.env.NODE_ENV === 'production' && window._env_) {
if (window._env_.SENTRY_ERROR_ENABLED) {
Sentry.configureScope(function (scope) {
@@ -73,6 +147,7 @@ export default function NavigationRoutes() {
})
}
}
+
if (typeof Storage !== 'undefined') {
if (localStorage.isDashboardLoggedIn) return
dashboardLoggedIn()
@@ -130,29 +205,59 @@ export default function NavigationRoutes() {
}
}
- if (pageState === ViewType.LOADING) {
+ const onClickedDeployManageCardClicked = () =>{
+ setDeployManageCardClicked(true)
+ }
+
+ if (pageState === ViewType.LOADING || loginLoader) {
return
-
-
+
+ {!window.location.href.includes(URLS.GETTING_STARTED) && (
+
- (
+
+
+
+
+
+
+
-
@@ -193,14 +311,23 @@ export default function NavigationRoutes() {
}
}
-export function AppRouter() {
+export function AppRouter({ isSuperAdmin, appListCount, loginCount }: AppRouterType) {
const { path } = useRouteMatch()
const [environmentId, setEnvironmentId] = useState(null)
return (
- (
+
-
@@ -220,19 +350,19 @@ export function AppRouter() {
)
}
-export function AppListRouter() {
+export function AppListRouter({ isSuperAdmin, appListCount, loginCount }: AppRouterType) {
const { path } = useRouteMatch()
const [environmentId, setEnvironmentId] = useState(null)
return (
- } />
-
@@ -240,19 +370,22 @@ export function AppListRouter() {
)
}
-export function RedirectWithSentry() {
+export function RedirectUserWithSentry({ isFirstLoginUser }) {
const { push } = useHistory()
const { pathname } = useLocation()
useEffect(() => {
- if (pathname && pathname !== '/') Sentry.captureMessage(`redirecting to app-list from ${pathname}`, 'warning')
- push(`${URLS.APP}/${URLS.APP_LIST}`)
+ if (pathname && pathname !== '/') Sentry.captureMessage(`redirecting to app-list from ${pathname}`, 'warning')
+ if (isFirstLoginUser) {
+ push(`${URLS.GETTING_STARTED}`)
+ } else {
+ push(`${URLS.APP}/${URLS.APP_LIST}`)
+ }
}, [])
return null
}
export function RedirectToAppList() {
const { push } = useHistory()
- const { pathname } = useLocation()
const { serverMode } = useContext(mainContext)
useEffect(() => {
let baseUrl = `${URLS.APP}/${URLS.APP_LIST}`
diff --git a/src/components/common/navigation/navigation.scss b/src/components/common/navigation/navigation.scss
index 6eac626d95..75ca17ae90 100644
--- a/src/components/common/navigation/navigation.scss
+++ b/src/components/common/navigation/navigation.scss
@@ -4,6 +4,9 @@
display: grid;
grid-template-columns: 64px 1fr;
overflow-y: hidden;
+ &.no-nav{
+ grid-template-columns: 1fr;
+ }
}
.main {
@@ -255,9 +258,9 @@
.help-card {
display: grid;
- grid-template-rows: 36px 1px 36px 36px 1px 36px auto;
+ grid-template-rows: 36px 36px 1px 36px 1px 36px 1px 36px auto;
align-items: center;
-
+ z-index: var(--modal-index);
.help-card__option {
padding: 6px 12px;
height: 36px;
@@ -322,4 +325,4 @@
.expandable-active-nav {
padding: 0px 0 0 12px;
-}
+}
\ No newline at end of file
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index bb16159537..86e760d5a3 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -10,7 +10,7 @@ import { Progressing, showError } from '../common'
import { LoginProps, LoginFormState } from './login.types'
import { getSSOConfigList, loginAsAdmin } from './login.service'
import './login.css'
-import { dashboardAccessed } from '../../services/service'
+import { dashboardAccessed, getLoginData, updateLoginCount } from '../../services/service'
export default class Login extends Component {
constructor(props) {
@@ -23,6 +23,7 @@ export default class Login extends Component {
username: 'admin',
password: '',
},
+ loginCount: 0,
}
this.handleChange = this.handleChange.bind(this)
this.autoFillLogin = this.autoFillLogin.bind(this)
@@ -62,6 +63,7 @@ export default class Login extends Component {
})
.catch((errors) => {})
}
+
}
handleChange(e: React.ChangeEvent): void {
@@ -91,6 +93,12 @@ export default class Login extends Component {
return !isValid
}
+ onClickSSO = (): void => {
+ if (typeof Storage !== 'undefined') {
+ localStorage.setItem('isSSOLogin', 'true')
+ }
+ }
+
login(e): void {
e.preventDefault()
let data = this.state.form
@@ -101,7 +109,14 @@ export default class Login extends Component {
this.setState({ loading: false })
let queryString = this.props.location.search.split('continue=')[1]
let url = queryString ? `${queryString}` : URLS.APP
- this.props.history.push(`${url}`)
+
+ getLoginData().then((response) => {
+ const count = response.result?.value ? parseInt(response.result.value) : 0
+ this.setState({ loginCount: count ?? 1 })
+ localStorage.setItem('isAdminLogin', 'true')
+
+ this.props.history.push(url)
+ })
}
})
.catch((errors: ServerErrors) => {
@@ -124,6 +139,7 @@ export default class Login extends Component {