feat: [CDE-147]: Add zero day graphics (#2233)

* feat: [CDE-147]: Add zero day graphics

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;
+}

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

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 (
+    <Page.Body className={css.main}>
+      <Container height="30%">
+        <img src={gitspace} height={70} width={70} />
+        <Layout.Vertical>
+          <Layout.Horizontal spacing="large">
+            <Text tag="h1" color={Color.BLACK} font={{ variation: FontVariation.H1 }}>
+              {getString('cde.homePage.start')}
+            </Text>
+            <Text tag="h1" color={Color.PRIMARY_8} font={{ variation: FontVariation.H1 }}>{`<Coding>_`}</Text>
+          </Layout.Horizontal>
+          <Text color={Color.BLACK} font={{ variation: FontVariation.H1 }}>
+            {getString('cde.homePage.noSetupRequired')}
+          </Text>
+        </Layout.Vertical>
+        <Container margin={{ top: 'large' }}>
+          <Text>{getString('cde.homePage.noteOne')}</Text>
+          <Text>{getString('cde.homePage.noteTwo')}</Text>
+        </Container>
+      </Container>
+      <Container margin={{ top: 'xxxlarge' }} width="70%">
+        <Layout.Horizontal margin={{ bottom: 'large' }}>
+          <Button
+            onClick={() => history.push(routes.toCDEGitspacesCreate({ space }))}
+            variation={ButtonVariation.PRIMARY}
+            rightIcon="chevron-right">
+            {getString('cde.homePage.getStartedNow')}
+          </Button>
+          <Button
+            onClick={e => {
+              e.preventDefault()
+              window.open('https://developer.harness.io/docs/', '_blank')
+            }}
+            variation={ButtonVariation.LINK}
+            rightIcon="code-open">
+            {getString('cde.homePage.learnMoreAboutGitspaces')}
+          </Button>
+        </Layout.Horizontal>
+        <img src={homepageGraphics} style={{ width: '60vw' }} />
+      </Container>
+    </Page.Body>
+  )
+}
+
+export default CDEHomePage

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 (
     <>
-      <Page.Header
-        title={
-          <div className="ng-tooltip-native">
-            <h2 data-tooltip-id="artifactListPageHeading"> {getString('cde.gitspaces')}</h2>
-            <HarnessDocTooltip tooltipId="GitSpaceListPageHeading" useStandAlone={true} />
-          </div>
-        }
-        breadcrumbs={
-          <Breadcrumbs links={[{ url: routes.toCDEGitspaces({ space }), label: getString('cde.gitspaces') }]} />
-        }
-        toolbar={
-          <Button
-            onClick={() => history.push(routes.toCDEGitspacesCreate({ space }))}
-            variation={ButtonVariation.PRIMARY}>
-            {getString('cde.newGitspace')}
-          </Button>
-        }
-      />
-      <Container className={css.main}>
+      {data?.length !== 0 && (
+        <Page.Header
+          title={
+            <div className="ng-tooltip-native">
+              <h2 data-tooltip-id="artifactListPageHeading"> {getString('cde.gitspaces')}</h2>
+              <HarnessDocTooltip tooltipId="GitSpaceListPageHeading" useStandAlone={true} />
+            </div>
+          }
+          breadcrumbs={
+            <Breadcrumbs links={[{ url: routes.toCDEGitspaces({ space }), label: getString('cde.gitspaces') }]} />
+          }
+          toolbar={
+            <Button
+              onClick={() => history.push(routes.toCDEGitspacesCreate({ space }))}
+              variation={ButtonVariation.PRIMARY}>
+              {getString('cde.newGitspace')}
+            </Button>
+          }
+        />
+      )}
+      <Container className={data?.length === 0 ? zeroDayCss.background : css.main}>
         <Layout.Vertical spacing={'large'}>
-          <Page.Body
-            loading={loading}
-            error={
-              error ? (
-                <Layout.Vertical spacing={'large'}>
-                  <Text font={{ variation: FontVariation.FORM_MESSAGE_DANGER }}>{getErrorMessage(error)}</Text>
-                  <Button
-                    onClick={() => refetch?.()}
-                    variation={ButtonVariation.PRIMARY}
-                    text={getString('cde.retry')}
-                  />
-                </Layout.Vertical>
-              ) : null
-            }
-            noData={{
-              when: () => data?.length === 0,
-              image: noSpace,
-              message: getString('cde.noGitspaces')
-            }}>
-            <ListGitspaces data={data || []} refreshList={refetch} />
-            <ResourceListingPagination response={response} page={page} setPage={setPage} />
-          </Page.Body>
+          {data && data?.length === 0 ? (
+            <CDEHomePage />
+          ) : (
+            <Page.Body
+              loading={loading}
+              error={
+                error ? (
+                  <Layout.Vertical spacing={'large'}>
+                    <Text font={{ variation: FontVariation.FORM_MESSAGE_DANGER }}>{getErrorMessage(error)}</Text>
+                    <Button
+                      onClick={() => refetch?.()}
+                      variation={ButtonVariation.PRIMARY}
+                      text={getString('cde.retry')}
+                    />
+                  </Layout.Vertical>
+                ) : null
+              }
+              noData={{
+                when: () => data?.length === 0,
+                image: noSpace,
+                message: getString('cde.noGitspaces')
+              }}>
+              {data?.length && (
+                <>
+                  <ListGitspaces data={data || []} refreshList={refetch} />
+                  <ResourceListingPagination response={response} page={page} setPage={setPage} />
+                </>
+              )}
+            </Page.Body>
+          )}
         </Layout.Vertical>
       </Container>
     </>

web/src/framework/strings/stringTypes.ts

@@ -191,6 +191,12 @@ export interface StringsMap {
   'cde.gitspaceDetail': string
   'cde.gitspaceUpdateSuccess': string
   'cde.gitspaces': string
+  'cde.homePage.getStartedNow': string
+  'cde.homePage.learnMoreAboutGitspaces': string
+  'cde.homePage.noSetupRequired': string
+  'cde.homePage.noteOne': string
+  'cde.homePage.noteTwo': string
+  'cde.homePage.start': string
   'cde.hours': string
   'cde.ide.browser': string
   'cde.ide.desktop': string

web/src/i18n/strings.en.yaml

@@ -1168,6 +1168,13 @@ cde:
   status: Status
   getStarted: Get started with Gitspaces by
   createImport: creating or importing repositories
+  homePage:
+    start: Start
+    noSetupRequired: no setup required
+    noteOne: Dedicated cloud development environments with your favorite editor
+    noteTwo: Get always consistent development environments that boost productivity and empower collaboration.
+    getStartedNow: Get Started Now
+    learnMoreAboutGitspaces: Learn more about Gitspaces
   listing:
     online: Active
     offline: Stopped