Feat improve env zero page 5254 (#5275)

* feat: Implement Zero Page for Envirnoment with proper css

Signed-off-by: Kunal Singh Dadhwal <[email protected]>

* Lint Error fix in EnvirnomentList file

Signed-off-by: Kunal Singh Dadhwal <[email protected]>

* Delete chaoscenter/web/.yarn/install-state.gz

Signed-off-by: Hug_Bunter <[email protected]>

* Delete chaoscenter/web/.yarnrc.yml

Signed-off-by: Hug_Bunter <[email protected]>

* Revert yarn.lock to match main branch

Signed-off-by: Kunal Singh Dadhwal <[email protected]>

* Added New Message to the NoEnv Page

Signed-off-by: Kunal Singh Dadhwal <[email protected]>

---------

Signed-off-by: Kunal Singh Dadhwal <[email protected]>
Signed-off-by: Hug_Bunter <[email protected]>
Co-authored-by: Pritesh Kiri <[email protected]>

Author: kunalsinghdadhwal

chaoscenter/web/src/strings/strings.en.yaml

@@ -652,6 +652,9 @@ noDataCV: No Data
 noDataToDisplay: No data to display
 noDescriptionProvided: No description provided
 noEnvironmentFound: No Environments found
+noEnvironmentFoundNewMessage: >-
+  An environment represents where you are installing your chaos infrastructure 
+  and acts as an additional level of abstraction for the same.
 noEnvironmentFoundMessage: >-
   No Environments found in this project, click on 'New Environment' to add
   environments.

chaoscenter/web/src/strings/types.ts

@@ -549,6 +549,7 @@ export interface StringsMap {
   'noDescriptionProvided': unknown
   'noEnvironmentFound': unknown
   'noEnvironmentFoundMessage': unknown
+  'noEnvironmentFoundNewMessage': unknown
   'noExpFound': unknown
   'noExperimentFoundMatchingSearch': unknown
   'noExperimentSelected': unknown

chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.module.scss

@@ -110,3 +110,39 @@
 .maxWidthFormInput {
   max-width: 320px;
 }
+
+
+.noEnvExecution {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    margin-bottom: 20px;
+    height: 250px;
+    width: auto;
+  }
+
+  p.title {
+    width: 60% !important;
+    text-align: center !important;
+    font-weight: 600 !important;
+    font-size: 20px !important;
+    color: var(--grey-600) !important;
+  }
+
+  p.subtitle {
+    padding: 10px !important;
+    text-align: center !important;
+    width: 70% !important;
+    font-weight: 400 !important;
+    font-size: 16px !important;
+    color: var(--grey-600) !important;
+  }
+
+  .button {
+    margin-top: 20px;
+  }
+}

chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.module.scss.d.ts

@@ -1,5 +1,6 @@
 declare namespace EnvironmentsListModuleScssNamespace {
   export interface IEnvironmentsListModuleScss {
+    button: string;
     card: string;
     cardContainer: string;
     content: string;
@@ -12,9 +13,12 @@ declare namespace EnvironmentsListModuleScssNamespace {
     loading: string;
     maxInputNameId: string;
     maxWidthFormInput: string;
+    noEnvExecution: string;
     noEnvHeading: string;
     noEnvText: string;
+    subtitle: string;
     thumbnailSelect: string;
+    title: string;
     toolbar: string;
     yamlToggleEnv: string;
   }

chaoscenter/web/src/views/Environments/EnvironmentList/EnvironmentsList.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Layout, TableV2, useToggleOpen, Dialog } from '@harnessio/uicore';
+import { Layout, TableV2, useToggleOpen, Dialog, Container, Text } from '@harnessio/uicore';
 import type { Column, Row } from 'react-table';
 import { useHistory } from 'react-router-dom';
 import type { MutationFunction } from '@apollo/client';
@@ -20,6 +20,7 @@ import type {
   EnvironmentDetailsTableProps,
   RefetchEnvironments
 } from '@controllers/Environments/types';
+import Envirnoment from '@images/Environment.svg';
 import CreateEnvironment from './CreateEnvironment';
 import { MenuCell } from './EnvironmentsTableMenu';
 import { EnvironmentName, EnvironmentTypes, LastUpdatedBy } from '../EnvironmentsListColumns/EnvironmentsListColumns';
@@ -121,27 +122,39 @@ export default function EnvironmentListView({
         </Layout.Horizontal>
       }
     >
-      <Loader
-        loading={loading.listEnvironments}
-        noData={{
-          when: () => environmentTableData === null,
-          messageTitle: getString('noEnvironmentFound'),
-          message: getString('noEnvironmentFoundMessage')
-        }}
-      >
-        <TableV2<EnvironmentDetails>
-          columns={envColumns}
-          sortable
-          onRowClick={rowDetails =>
-            rowDetails.environmentID &&
-            history.push({
-              pathname: paths.toKubernetesChaosInfrastructures({ environmentID: rowDetails.environmentID })
-            })
-          }
-          data={environmentTableData?.content ?? []}
-          pagination={environmentTableData?.pagination}
-        />
-      </Loader>
+      {environmentTableData === null && !loading.listEnvironments ? (
+        <Container className={css.noEnvExecution} height="calc(100vh - 100px)">
+          <img src={Envirnoment} alt={getString('environment')} />
+          <Text className={css.title}>
+            {getString('noEnvironmentFound')}
+          </Text>
+          <Text className={css.subtitle}>
+            {getString('noEnvironmentFoundNewMessage')}
+          </Text>
+        </Container>
+      ) : (
+        <Loader
+          loading={loading.listEnvironments}
+          noData={{
+            when: () => environmentTableData === null,
+            messageTitle: getString('noEnvironmentFound'),
+            message: getString('noEnvironmentFoundMessage')
+          }}
+        >
+          <TableV2<EnvironmentDetails>
+            columns={envColumns}
+            sortable
+            onRowClick={rowDetails =>
+              rowDetails.environmentID &&
+              history.push({
+                pathname: paths.toKubernetesChaosInfrastructures({ environmentID: rowDetails.environmentID })
+              })
+            }
+            data={environmentTableData?.content ?? []}
+            pagination={environmentTableData?.pagination}
+          />
+        </Loader>
+      )}
     </DefaultLayout>
   );
 }