diff --git a/web/src/assets/group.svg b/web/src/assets/group.svg new file mode 100644 index 0000000000..6eafff5a96 --- /dev/null +++ b/web/src/assets/group.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/media.svg b/web/src/assets/media.svg new file mode 100644 index 0000000000..9258bb02d0 --- /dev/null +++ b/web/src/assets/media.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/pages.svg b/web/src/assets/pages.svg new file mode 100644 index 0000000000..269fd5976c --- /dev/null +++ b/web/src/assets/pages.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/Resources/Content/Content.styled.ts b/web/src/components/Resources/Content/Content.styled.ts new file mode 100644 index 0000000000..16a94e810a --- /dev/null +++ b/web/src/components/Resources/Content/Content.styled.ts @@ -0,0 +1,39 @@ +import {Typography} from 'antd'; +import styled from 'styled-components'; + +export const Body = styled.div` + display: flex; + gap: 24px; + width: 100%; +`; + +export const Container = styled.div` + padding: 0; +`; + +export const Title = styled(Typography.Title)` + && { + margin-bottom: 6px; + } +`; + +export const Text = styled(Typography.Text)``; + +export const Link = styled(Typography.Link)` + font-weight: bold; +`; + +export const Card = styled.div` + background-color: ${({theme}) => theme.color.white}; + border-radius: 2px; + display: flex; + flex: 1; + flex-direction: column; + gap: 14px; + padding: 24px; +`; + +export const Icon = styled.img` + width: 64px; + height: auto; +`; diff --git a/web/src/components/Resources/Content/Content.tsx b/web/src/components/Resources/Content/Content.tsx new file mode 100644 index 0000000000..d600537d16 --- /dev/null +++ b/web/src/components/Resources/Content/Content.tsx @@ -0,0 +1,62 @@ +import {ArrowRightOutlined} from '@ant-design/icons'; +import pagesIcon from 'assets/pages.svg'; +import groupIcon from 'assets/group.svg'; +import mediaIcon from 'assets/media.svg'; +import {COMMUNITY_SLACK_URL, DOCUMENTATION_URL} from 'constants/Common.constants'; +import {useDashboard} from 'providers/Dashboard/Dashboard.provider'; +import * as S from './Content.styled'; + +const Content = () => { + const {navigate} = useDashboard(); + + return ( + + + + +
+ Tests + + Haven't created a test yet? Go to the 'Tests' page to kickstart your testing adventure. + + { + e.preventDefault(); + navigate(`/tests`); + }} + > + {' '} + Go to tests + +
+ + + + +
+ Documentation + The ultimate technical resources and step-by-step guides that allows you to quickly start. + + {' '} + View documentation + +
+ + + + +
+ Community + Check the latest updates and support from the community. + + {' '} + Join our community + +
+ + + + ); +}; + +export default Content; diff --git a/web/src/components/Resources/Content/index.ts b/web/src/components/Resources/Content/index.ts new file mode 100644 index 0000000000..3ed5f67081 --- /dev/null +++ b/web/src/components/Resources/Content/index.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line no-restricted-exports +export {default} from './Content'; diff --git a/web/src/components/Resources/Header/Header.styled.ts b/web/src/components/Resources/Header/Header.styled.ts new file mode 100644 index 0000000000..90d37f1737 --- /dev/null +++ b/web/src/components/Resources/Header/Header.styled.ts @@ -0,0 +1,20 @@ +import {Typography} from 'antd'; +import styled from 'styled-components'; + +export const Container = styled.div` + align-items: center; + display: flex; + flex: 1; + justify-content: space-between; + padding: 4px 0; +`; + +export const Title = styled(Typography.Title)` + && { + margin-bottom: 8px; + } +`; + +export const Text = styled(Typography.Text)` + font-size: ${({theme}) => theme.size.md}; +`; diff --git a/web/src/components/Resources/Header/Header.tsx b/web/src/components/Resources/Header/Header.tsx new file mode 100644 index 0000000000..b24fd19d1e --- /dev/null +++ b/web/src/components/Resources/Header/Header.tsx @@ -0,0 +1,12 @@ +import * as S from './Header.styled'; + +const Header = () => ( + +
+ 📚 More resources + Get acquainted with useful information. +
+ +); + +export default Header; diff --git a/web/src/components/Resources/Header/index.ts b/web/src/components/Resources/Header/index.ts new file mode 100644 index 0000000000..3e9dde4818 --- /dev/null +++ b/web/src/components/Resources/Header/index.ts @@ -0,0 +1,2 @@ +// eslint-disable-next-line no-restricted-exports +export {default} from './Header'; diff --git a/web/src/components/Wizard/Header/Header.styled.ts b/web/src/components/Wizard/Header/Header.styled.ts index 753a082691..991fc3bc52 100644 --- a/web/src/components/Wizard/Header/Header.styled.ts +++ b/web/src/components/Wizard/Header/Header.styled.ts @@ -3,10 +3,10 @@ import styled from 'styled-components'; export const Container = styled.div` align-items: center; - border-bottom: 1px solid ${({theme}) => theme.color.border}; display: flex; + flex: 1; justify-content: space-between; - padding: 16px; + padding: 4px 0; `; export const ProgressContainer = styled.div` diff --git a/web/src/pages/Wizard/HomeContent.tsx b/web/src/pages/Wizard/HomeContent.tsx index da776e5c6c..21a2a874c3 100644 --- a/web/src/pages/Wizard/HomeContent.tsx +++ b/web/src/pages/Wizard/HomeContent.tsx @@ -1,5 +1,8 @@ -import Header from 'components/Wizard/Header'; +import {Collapse} from 'antd'; +import ContentResources from 'components/Resources/Content'; +import HeaderResources from 'components/Resources/Header'; import Content from 'components/Wizard/Content'; +import Header from 'components/Wizard/Header'; import {withCustomization} from 'providers/Customization'; import {useWizard} from 'providers/Wizard'; import * as S from './Wizard.styled'; @@ -7,6 +10,7 @@ import * as S from './Wizard.styled'; const HomeContent = () => { const {activeStepId, isLoading, onGoTo, onNext, steps} = useWizard(); const completedSteps = steps.filter(({state}) => state === 'completed').length; + const isWizardComplete = !!steps.length && completedSteps === steps.length; return ( @@ -17,10 +21,30 @@ const HomeContent = () => { - -
- - + {!!steps.length && ( + <> + + } + key="wizard" + > + + + + + + } key="resources"> + + + + + )} ); }; diff --git a/web/src/pages/Wizard/Wizard.styled.ts b/web/src/pages/Wizard/Wizard.styled.ts index bcd222bd1f..c147075136 100644 --- a/web/src/pages/Wizard/Wizard.styled.ts +++ b/web/src/pages/Wizard/Wizard.styled.ts @@ -3,18 +3,27 @@ import styled from 'styled-components'; export const Container = styled.div` padding: 24px; + + .ant-collapse { + background-color: ${({theme}) => theme.color.white}; + margin-bottom: 24px; + } + + && { + .ant-collapse-header { + align-items: center; + } + } + + .ant-collapse-content > .ant-collapse-content-box { + padding: 0; + } `; export const Header = styled.div` margin-bottom: 16px; `; -export const Body = styled.div` - background-color: ${({theme}) => theme.color.white}; - border: 1px solid ${({theme}) => theme.color.border}; - margin-bottom: 24px; -`; - export const Title = styled(Typography.Title)` && { margin-bottom: 6px; diff --git a/web/src/providers/Wizard/Wizard.provider.tsx b/web/src/providers/Wizard/Wizard.provider.tsx index b2fb6fe793..2a9c02a1d4 100644 --- a/web/src/providers/Wizard/Wizard.provider.tsx +++ b/web/src/providers/Wizard/Wizard.provider.tsx @@ -1,6 +1,6 @@ import {noop} from 'lodash'; import Wizard, {TWizardStepId, isStepEnabled} from 'models/Wizard.model'; -import {createContext, useCallback, useContext, useMemo, useState} from 'react'; +import {createContext, useCallback, useContext, useEffect, useMemo, useState} from 'react'; import Tracetest from 'redux/apis/Tracetest'; import WizardAnalytics from 'services/Analytics/Wizard.service'; import {IWizardState, IWizardStep, TWizardMap} from 'types/Wizard.types'; @@ -92,6 +92,13 @@ const WizardProvider = ({children, stepsMap}: IProps) => { [steps] ); + useEffect(() => { + const activeStepIndex = steps.findIndex(step => step.state === 'pending'); + if (activeStepIndex !== -1) { + setActiveStep(activeStepIndex); + } + }, [steps]); + const value = useMemo( () => ({ activeStep,