Guided onboarding

src/components/app/create/createApp.css

@@ -1,7 +1,9 @@
 .create-app-modal {
     width: 450px;
     max-height: 90vh;
-    margin-top: 40px;
+    margin-top: 0px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
 }
 
 .footer {

src/components/app/details/main.tsx

@@ -19,6 +19,7 @@ import { ReactComponent as Settings } from '../../../assets/icons/ic-settings.sv
 import { ReactComponent as Info } from '../../../assets/icons/ic-info-outlined.svg'
 import { EnvType } from '../../v2/appDetails/appDetails.type'
 import PageHeader from '../../common/header/PageHeader'
+import { AppDetailsProps } from './triggerView/types'
 
 const TriggerView = lazy(() => import('./triggerView/TriggerView'))
 const DeploymentMetrics = lazy(() => import('./metrics/DeploymentMetrics'))
@@ -29,7 +30,7 @@ const IndexComponent = lazy(() => import('../../v2/index'))
 const CDDetails = lazy(() => import('./cdDetails/CDDetails'))
 const TestRunList = lazy(() => import('./testViewer/TestRunList'))
 
-export default function AppDetailsPage({ isV2 }) {
+export default function AppDetailsPage({ isV2 }: AppDetailsProps) {
     const { path } = useRouteMatch()
     const { appId } = useParams<{ appId }>()
 

src/components/app/details/triggerView/types.ts

@@ -469,3 +469,6 @@ export interface BranchRegexModalProps {
     regexValue
     onCloseBranchRegexModal
 }
+export interface AppDetailsProps {
+    isV2: boolean
+}

src/components/app/list-new/AppList.tsx

@@ -14,8 +14,6 @@ import {
 import { ReactComponent as Search } from '../../../assets/icons/ic-search.svg'
 import { ReactComponent as ChartIcon } from '../../../assets/icons/ic-charts.svg'
 import { ReactComponent as AddIcon } from '../../../assets/icons/ic-add.svg'
-import InstallDevtronFullImage from '../../../assets/img/[email protected]'
-import EmptyState from '../../EmptyState/EmptyState'
 import { getInitData, buildClusterVsNamespace, getNamespaces } from './AppListService'
 import { ServerErrors } from '../../../modals/commonTypes'
 import { AppListViewType } from '../config'
@@ -24,7 +22,7 @@ import { ReactComponent as Clear } from '../../../assets/icons/ic-error.svg'
 import DevtronAppListContainer from '../list/DevtronAppListContainer'
 import HelmAppList from './HelmAppList'
 import * as queryString from 'query-string'
-import { OrderBy, SortBy } from '../list/types'
+import { AppListPropType, OrderBy, SortBy } from '../list/types'
 import { AddNewApp } from '../create/CreateApp'
 import { mainContext } from '../../common/navigation/NavigationRoutes'
 import '../list/list.css'
@@ -37,9 +35,8 @@ import { FILE_NAMES } from '../../common/ExportToCsv/constants'
 import { getAppList } from '../service'
 import moment from 'moment'
 import { getUserRole } from '../../userGroups/userGroup.service'
-import Tippy from '@tippyjs/react'
 
-export default function AppList() {
+export default function AppList({isSuperAdmin, appListCount} : AppListPropType) {
     const location = useLocation()
     const history = useHistory()
     const params = useParams<{ appType: string }>()
@@ -50,7 +47,6 @@ export default function AppList() {
     const [lastDataSync, setLastDataSync] = useState(false)
     const [fetchingNamespaces, setFetchingNamespaces] = useState(false)
     const [fetchingNamespacesErrored, setFetchingNamespacesErrored] = useState(false)
-
     const [parsedPayloadOnUrlChange, setParsedPayloadOnUrlChange] = useState({})
     const [currentTab, setCurrentTab] = useState(undefined)
     const [showCreateNewAppSelectionModal, setShowCreateNewAppSelectionModal] = useState(false)
@@ -79,7 +75,7 @@ export default function AppList() {
     // on page load
     useEffect(() => {
         let _currentTab =
-            params.appType == AppListConstants.AppType.DEVTRON_APPS
+            params.appType === AppListConstants.AppType.DEVTRON_APPS
                 ? AppListConstants.AppTabs.DEVTRON_APPS
                 : AppListConstants.AppTabs.HELM_APPS
         setCurrentTab(_currentTab)
@@ -104,7 +100,7 @@ export default function AppList() {
                 setEnvironmentListRes(initData.environmentListRes)
                 setMasterFilters(initData.filters)
                 setDataStateType(AppListViewType.LIST)
-                if (serverMode == SERVER_MODE.EA_ONLY) {
+                if (serverMode === SERVER_MODE.EA_ONLY) {
                     applyClusterSelectionFilterOnPageLoadIfSingle(initData.filters.clusters, _currentTab)
                 }
             })
@@ -1014,65 +1010,70 @@ export default function AppList() {
 
     return (
         <div>
-            {dataStateType == AppListViewType.LOADING && (
+            {dataStateType === AppListViewType.LOADING && (
                 <div className="loading-wrapper">
                     <Progressing pageLoader />
                 </div>
             )}
-            {dataStateType == AppListViewType.ERROR && (
+            {dataStateType === AppListViewType.ERROR && (
                 <div className="loading-wrapper">
                     <ErrorScreenManager code={errorResponseCode} />
                 </div>
             )}
-            {dataStateType == AppListViewType.LIST && (
+            {dataStateType === AppListViewType.LIST && (
                 <>
                     {renderPageHeader()}
                     {renderMasterFilters()}
                     {renderAppliedFilters()}
                     {renderAppTabs()}
-                    {serverMode == SERVER_MODE.FULL && renderAppCreateRouter()}
-                    {params.appType == AppListConstants.AppType.DEVTRON_APPS && serverMode == SERVER_MODE.FULL && (
-                        <DevtronAppListContainer
-                            payloadParsedFromUrl={parsedPayloadOnUrlChange}
-                            appCheckListRes={appCheckListRes}
-                            clearAllFilters={removeAllFilters}
-                            sortApplicationList={sortApplicationList}
-                            updateLastDataSync={updateLastDataSync}
-                            setAppCount={setAppCount}
-                        />
-                    )}
-                    {params.appType == AppListConstants.AppType.DEVTRON_APPS && serverMode == SERVER_MODE.EA_ONLY && (
-                        <div style={{ height: 'calc(100vh - 250px)' }}>
-                            <EAEmptyState
-                                title={'Create, build, deploy and debug custom apps'}
-                                msg={
-                                    'Create custom application by connecting your code repository. Build and deploy images at the click of a button. Debug your applications using the interactive UI.'
-                                }
-                                stateType={EAEmptyStateType.DEVTRONAPPS}
-                                knowMoreLink={DOCUMENTATION.HOME_PAGE}
-                            />
-                        </div>
-                    )}
-                    {params.appType == AppListConstants.AppType.HELM_APPS && (
+                    {serverMode === SERVER_MODE.FULL && renderAppCreateRouter()}
                         <>
-                            <HelmAppList
-                                serverMode={serverMode}
-                                payloadParsedFromUrl={parsedPayloadOnUrlChange}
-                                sortApplicationList={sortApplicationList}
-                                clearAllFilters={removeAllFilters}
-                                fetchingExternalApps={fetchingExternalApps}
-                                setFetchingExternalAppsState={setFetchingExternalAppsState}
-                                updateLastDataSync={updateLastDataSync}
-                                setShowPulsatingDotState={setShowPulsatingDotState}
-                                masterFilters={masterFilters}
-                            />
-                            {fetchingExternalApps && (
-                                <div className="mt-16">
-                                    <Progressing size={32} />
-                                </div>
+                            {params.appType === AppListConstants.AppType.DEVTRON_APPS &&
+                                serverMode === SERVER_MODE.FULL && (
+                                    <DevtronAppListContainer
+                                        payloadParsedFromUrl={parsedPayloadOnUrlChange}
+                                        appCheckListRes={appCheckListRes}
+                                        clearAllFilters={removeAllFilters}
+                                        sortApplicationList={sortApplicationList}
+                                        updateLastDataSync={updateLastDataSync}
+                                        appListCount={appListCount}
+                                        isSuperAdmin={isSuperAdmin}
+                                        openDevtronAppCreateModel={openDevtronAppCreateModel}
+                                        setAppCount={setAppCount}
+                                    />
+                                )}
+                            {params.appType === AppListConstants.AppType.DEVTRON_APPS &&
+                                serverMode === SERVER_MODE.EA_ONLY && (
+                                    <div style={{ height: 'calc(100vh - 250px)' }}>
+                                        <EAEmptyState
+                                            title='Create, build, deploy and debug custom apps'
+                                            msg='Create custom application by connecting your code repository. Build and deploy images at the click of a button. Debug your applications using the interactive UI.'
+                                            stateType={EAEmptyStateType.DEVTRONAPPS}
+                                            knowMoreLink={DOCUMENTATION.HOME_PAGE}
+                                        />
+                                    </div>
+                                )}
+                            {params.appType === AppListConstants.AppType.HELM_APPS && (
+                                <>
+                                    <HelmAppList
+                                        serverMode={serverMode}
+                                        payloadParsedFromUrl={parsedPayloadOnUrlChange}
+                                        sortApplicationList={sortApplicationList}
+                                        clearAllFilters={removeAllFilters}
+                                        fetchingExternalApps={fetchingExternalApps}
+                                        setFetchingExternalAppsState={setFetchingExternalAppsState}
+                                        updateLastDataSync={updateLastDataSync}
+                                        setShowPulsatingDotState={setShowPulsatingDotState}
+                                        masterFilters={masterFilters}
+                                    />
+                                    {fetchingExternalApps && (
+                                        <div className="mt-16">
+                                            <Progressing size={32} />
+                                        </div>
+                                    )}
+                                </>
                             )}
                         </>
-                    )}
                 </>
             )}
         </div>

src/components/app/list-new/HelmAppList.tsx

@@ -10,7 +10,6 @@ import {
     Pagination,
     LazyImage,
     handleUTCTime,
-    useEventSource,
 } from '../../common';
 import { Host, SERVER_MODE, URLS, DOCUMENTATION } from '../../../config';
 import { AppListViewType } from '../config';

src/components/app/list/AppListView.tsx

@@ -10,8 +10,7 @@ import { ReactComponent as Edit } from '../../../assets/icons/ic-settings.svg';
 import {ReactComponent as DevtronAppIcon} from '../../../assets/icons/ic-devtron-app.svg';
 import {ReactComponent as HelpOutlineIcon} from '../../../assets/icons/ic-help-outline.svg';
 import Tippy from '@tippyjs/react';
-
-
+import DevtronAppGuidePage from '../../onboardingGuide/DevtronAppGuidePage';
 interface AppListViewProps extends AppListState, RouteComponentProps<{}> {
     expandRow: (app: App | null) => void;
     closeExpandedRow: () => void;
@@ -21,6 +20,9 @@ interface AppListViewProps extends AppListState, RouteComponentProps<{}> {
     clearAll: () => void;
     changePage: (pageNo: number) => void;
     changePageSize: (size: number) => void;
+    appListCount: number
+    isSuperAdmin: boolean
+    openDevtronAppCreateModel: (event) => void
 }
 
 export class AppListView extends Component<AppListViewProps>{
@@ -129,18 +131,13 @@ export class AppListView extends Component<AppListViewProps>{
                 </div>
             </React.Fragment>
         }
+
         else if (this.props.view === AppListViewType.EMPTY) {
             return <React.Fragment>
-                <AppCheckListModal history={this.props.history}
-                    location={this.props.location}
-                    match={this.props.match}
-                    appChecklist={this.props.appChecklist}
-                    chartChecklist={this.props.chartChecklist}
-                    appStageCompleted={this.props.appStageCompleted}
-                    chartStageCompleted={this.props.chartStageCompleted}
-                />
+                <DevtronAppGuidePage openDevtronAppCreateModel={this.props.openDevtronAppCreateModel} />
             </React.Fragment>
         }
+
         else if (this.props.view === AppListViewType.NO_RESULT) {
             return <React.Fragment>
                 <Empty view={this.props.view}

src/components/app/list/DevtronAppListContainer.tsx

@@ -183,6 +183,9 @@ class DevtronAppListContainer extends Component<AppListProps, AppListState>{
             clearAll={this.props.clearAllFilters}
             changePage={this.changePage}
             changePageSize={this.changePageSize}
+            isSuperAdmin={this.props.isSuperAdmin}
+            appListCount={this.props.appListCount}
+            openDevtronAppCreateModel={this.props.openDevtronAppCreateModel}
         />
     }
 }

src/components/app/list/list.css

@@ -482,3 +482,7 @@
     background-color: var(--R100);
     border: solid 1px var(--R200);
 }
+
+.first-app-container {
+    margin-top: 60px;
+}

src/components/app/list/types.tsx

@@ -59,6 +59,9 @@ export interface AppListProps extends RouteComponentProps<{ route: string }> {
     clearAllFilters: () => void;
     sortApplicationList : (key: string) => void;
     updateLastDataSync : () => void;
+    appListCount: number
+    isSuperAdmin: boolean
+    openDevtronAppCreateModel: (event) => void
     setAppCount: React.Dispatch<React.SetStateAction<number>>
 }
 
@@ -114,3 +117,7 @@ export const SortBy = {
     ENVIRONMENT: "environmentSort",
 }
 
+export interface AppListPropType {
+  isSuperAdmin: boolean
+  appListCount: number
+}

src/components/common/HelpNav.tsx

@@ -6,17 +6,21 @@ import { ReactComponent as Discord } from '../../assets/icons/ic-discord-fill.sv
 import { ReactComponent as Edit } from '../../assets/icons/ic-pencil.svg'
 import { ReactComponent as Chat } from '../../assets/icons/ic-chat-circle-dots.svg'
 import { InstallationType, ServerInfo } from '../v2/devtronStackManager/DevtronStackManager.type'
-import { NavLink } from 'react-router-dom'
+import { NavLink, useHistory } from 'react-router-dom'
+import { ReactComponent as GettingStartedIcon } from '../../assets/icons/ic-onboarding.svg'
 
 export interface HelpNavType {
     className: string
     showHelpCard: boolean
     setShowHelpCard: React.Dispatch<React.SetStateAction<boolean>>
     serverInfo: ServerInfo
     fetchingServerInfo: boolean
+    setGettingStartedClicked: (isClicked: boolean) => void
 }
 
-function HelpNav({ className, showHelpCard, setShowHelpCard, serverInfo, fetchingServerInfo }: HelpNavType) {
+function HelpNav({ className, showHelpCard, setShowHelpCard, serverInfo, fetchingServerInfo, setGettingStartedClicked }: HelpNavType) {
+  const history = useHistory()
+
     const HelpOptions = [
         {
             name: 'View documentation',
@@ -28,6 +32,7 @@ function HelpNav({ className, showHelpCard, setShowHelpCard, serverInfo, fetchin
             name: 'Chat with support',
             link: 'https://discord.devtron.ai/',
             icon: Chat,
+            showSeparator: true,
         },
         {
             name: 'Join discord community',
@@ -42,30 +47,42 @@ function HelpNav({ className, showHelpCard, setShowHelpCard, serverInfo, fetchin
         },
     ]
 
+    const onClickGettingStarted = () => {
+      setGettingStartedClicked(true)
+    }
+
     return (
         <div className="transparent-div" onClick={() => setShowHelpCard(!showHelpCard)}>
             <div className={`help-card pt-4 pb-4 ${className}`}>
+                <NavLink
+                    to={`/${URLS.GETTING_STARTED}`}
+                    className="help-card__option no-decor help-card__link flex left cn-9"
+                    activeClassName="active"
+                    onClick={onClickGettingStarted}
+                >
+                    <GettingStartedIcon />
+                    <div className="help-card__option-name ml-12 cn-9 fs-14">Getting started</div>
+                </NavLink>
+
                 {HelpOptions.map((option) => {
                     return (
                         <Fragment key={option.name}>
-                            <div className="help-card__option">
-                                <a
-                                    key={option.name}
-                                    className="help-card__link flex left cn-9"
-                                    href={option.link}
-                                    target="_blank"
-                                    rel="noreferrer noopener"
-                                    onClick={(event) => {
-                                        ReactGA.event({
-                                            category: 'Main Navigation',
-                                            action: `${option.name} Clicked`,
-                                        })
-                                    }}
-                                >
-                                    <option.icon />
-                                    <div className="help-card__option-name ml-12 cn-9 fs-14">{option.name}</div>
-                                </a>
-                            </div>
+                            <a
+                                key={option.name}
+                                className="no-decor help-card__option help-card__link flex left cn-9"
+                                href={option.link}
+                                target="_blank"
+                                rel="noreferrer noopener"
+                                onClick={(event) => {
+                                    ReactGA.event({
+                                        category: 'Main Navigation',
+                                        action: `${option.name} Clicked`,
+                                    })
+                                }}
+                            >
+                                <option.icon />
+                                <div className="help-card__option-name ml-12 cn-9 fs-14">{option.name}</div>
+                            </a>
                             {option.showSeparator && <div className="help-card__option-separator" />}
                         </Fragment>
                     )