From b83348c0d774b532c6e7a0cc6790cfc6932d6003 Mon Sep 17 00:00:00 2001 From: Deepesh Kumar Date: Tue, 16 Jul 2024 10:39:36 +0000 Subject: [PATCH] feat: [CDE-147]: Add zero day graphics (#2233) * feat: [CDE-147]: Add zero day graphics --- .../cde-gitness/assests/homepageGraphics.svg | 1 + .../CDEHomePage/CDEHomePage.module.scss | 10 ++ .../CDEHomePage/CDEHomePage.module.scss.d.ts | 20 ++++ .../components/CDEHomePage/CDEHomePage.tsx | 62 ++++++++++++ .../CDEHomePage/CDEHomePageBackground.svg | 1 + .../pages/GitspaceListing/GitspaceListing.tsx | 94 +++++++++++-------- web/src/framework/strings/stringTypes.ts | 6 ++ web/src/i18n/strings.en.yaml | 7 ++ 8 files changed, 160 insertions(+), 41 deletions(-) create mode 100644 web/src/cde-gitness/assests/homepageGraphics.svg create mode 100644 web/src/cde-gitness/components/CDEHomePage/CDEHomePage.module.scss create mode 100644 web/src/cde-gitness/components/CDEHomePage/CDEHomePage.module.scss.d.ts create mode 100644 web/src/cde-gitness/components/CDEHomePage/CDEHomePage.tsx create mode 100644 web/src/cde-gitness/components/CDEHomePage/CDEHomePageBackground.svg diff --git a/web/src/cde-gitness/assests/homepageGraphics.svg b/web/src/cde-gitness/assests/homepageGraphics.svg new file mode 100644 index 000000000..e2ccc5cdb --- /dev/null +++ b/web/src/cde-gitness/assests/homepageGraphics.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.module.scss b/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.module.scss new file mode 100644 index 000000000..8f97bb922 --- /dev/null +++ b/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.module.scss @@ -0,0 +1,10 @@ +.main { + padding: 10% !important; +} + +.background { + background-image: url('./CDEHomePageBackground.svg') !important; + background-repeat: no-repeat !important; + background-position-x: right !important; + background-position-y: bottom !important; +} diff --git a/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.module.scss.d.ts b/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.module.scss.d.ts new file mode 100644 index 000000000..c17b3cec1 --- /dev/null +++ b/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.module.scss.d.ts @@ -0,0 +1,20 @@ +/* + * Copyright 2023 Harness, 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. + */ + +/* eslint-disable */ +// This is an auto-generated file +export declare const background: string +export declare const main: string diff --git a/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.tsx b/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.tsx new file mode 100644 index 000000000..11dafaea4 --- /dev/null +++ b/web/src/cde-gitness/components/CDEHomePage/CDEHomePage.tsx @@ -0,0 +1,62 @@ +import React from 'react' +import { Button, ButtonVariation, Container, Layout, Page, Text } from '@harnessio/uicore' +import { Color, FontVariation } from '@harnessio/design-system' +import { useHistory } from 'react-router-dom' +import gitspace from 'cde-gitness/assests/gitspace.svg?url' +import homepageGraphics from 'cde-gitness/assests/homepageGraphics.svg?url' +import { useStrings } from 'framework/strings' +import { useGetSpaceParam } from 'hooks/useGetSpaceParam' +import { useAppContext } from 'AppContext' +import css from './CDEHomePage.module.scss' + +const CDEHomePage = () => { + const space = useGetSpaceParam() + const history = useHistory() + const { getString } = useStrings() + const { routes } = useAppContext() + + return ( + + + + + + + {getString('cde.homePage.start')} + + {`_`} + + + {getString('cde.homePage.noSetupRequired')} + + + + {getString('cde.homePage.noteOne')} + {getString('cde.homePage.noteTwo')} + + + + + + + + + + + ) +} + +export default CDEHomePage diff --git a/web/src/cde-gitness/components/CDEHomePage/CDEHomePageBackground.svg b/web/src/cde-gitness/components/CDEHomePage/CDEHomePageBackground.svg new file mode 100644 index 000000000..f66e95859 --- /dev/null +++ b/web/src/cde-gitness/components/CDEHomePage/CDEHomePageBackground.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx b/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx index 961a819ab..a53928ea2 100644 --- a/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx +++ b/web/src/cde-gitness/pages/GitspaceListing/GitspaceListing.tsx @@ -22,7 +22,9 @@ import { useQueryParams } from 'hooks/useQueryParams' import { usePageIndex } from 'hooks/usePageIndex' import { ListGitspaces } from 'cde-gitness/components/GitspaceListing/ListGitspaces' import type { TypesGitspaceConfig } from 'cde-gitness/services' +import CDEHomePage from 'cde-gitness/components/CDEHomePage/CDEHomePage' import css from './GitspacesListing.module.scss' +import zeroDayCss from 'cde-gitness/components/CDEHomePage/CDEHomePage.module.scss' export const GitspaceListing = () => { const space = useGetSpaceParam() @@ -53,48 +55,58 @@ export const GitspaceListing = () => { return ( <> - -

{getString('cde.gitspaces')}

- - - } - breadcrumbs={ - - } - toolbar={ - - } - /> - + {data?.length !== 0 && ( + +

{getString('cde.gitspaces')}

+ + + } + breadcrumbs={ + + } + toolbar={ + + } + /> + )} + - - {getErrorMessage(error)} -