feature(frontend): updating empty state UX/UI (#2044)

kubeshop · Feb 24, 2023 · a2b1376 · a2b1376
1 parent 50ca963
commit a2b1376
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 26 deletions.
diff --git a/web/src/components/Empty/Empty.styled.ts b/web/src/components/Empty/Empty.styled.ts
@@ -11,4 +11,6 @@ export const Content = styled.div`
 
 export const Icon = styled.img`
   margin-bottom: 25px;
+  height: 115px;
+  width: 115px;
 `;
diff --git a/web/src/components/Empty/Empty.tsx b/web/src/components/Empty/Empty.tsx
@@ -4,16 +4,18 @@ import icon from 'assets/empty.svg';
 import * as S from './Empty.styled';
 
 interface IProps {
-  message?: string;
+  message?: React.ReactNode;
+  title?: string;
 }
 
-const Empty = ({message = ''}: IProps) => (
+const Empty = ({message = '', title = ''}: IProps) => (
   <S.Container align="middle">
     <Col span={12} offset={6}>
       <S.Content>
         <div>
           <S.Icon alt="empty" src={icon} />
         </div>
+        <Typography.Title>{title}</Typography.Title>
         <Typography.Text>{message}</Typography.Text>
       </S.Content>
     </Col>

diff --git a/web/src/components/TestSpecForm/TestSpecForm.tsx b/web/src/components/TestSpecForm/TestSpecForm.tsx
@@ -110,26 +110,24 @@ const TestSpecForm = ({
           <SelectorInput form={form} testId={testId} runId={runId} onValidSelector={setIsValid} />
 
           <S.SuggestionsContainer>
-            {!isEditing && (
-              <SelectorSuggestions
-                onClick={query => {
-                  onClickPrevSelector(form.getFieldValue('selector'));
-                  onClearSelectorSuggestions();
-                  form.setFieldsValue({
-                    selector: query,
-                  });
-                }}
-                onClickPrevSelector={query => {
-                  onClickPrevSelector('');
-                  onClearSelectorSuggestions();
-                  form.setFieldsValue({
-                    selector: query,
-                  });
-                }}
-                prevSelector={prevSelector}
-                selectorSuggestions={selectorSuggestions}
-              />
-            )}
+            <SelectorSuggestions
+              onClick={query => {
+                onClickPrevSelector(form.getFieldValue('selector'));
+                onClearSelectorSuggestions();
+                form.setFieldsValue({
+                  selector: query,
+                });
+              }}
+              onClickPrevSelector={query => {
+                onClickPrevSelector('');
+                onClearSelectorSuggestions();
+                form.setFieldsValue({
+                  selector: query,
+                });
+              }}
+              prevSelector={prevSelector}
+              selectorSuggestions={selectorSuggestions}
+            />
           </S.SuggestionsContainer>
         </S.FormSection>
 

diff --git a/web/src/pages/Environments/EnvironmentList.tsx b/web/src/pages/Environments/EnvironmentList.tsx
@@ -4,6 +4,7 @@ import usePagination from 'hooks/usePagination';
 import Loading from 'pages/Home/Loading';
 import {useGetEnvironmentsQuery} from 'redux/apis/TraceTest.api';
 import Environment from 'models/Environment.model';
+import {ENVIRONMENTS_DOCUMENTATION_URL} from 'constants/Common.constants';
 import * as S from './Environment.styled';
 import {EnvironmentCard} from './EnvironmentCard';
 
@@ -19,7 +20,15 @@ const EnvironmentList = ({onDelete, onEdit, query}: IProps) => {
   return (
     <Pagination
       emptyComponent={
-        <Empty message="You have not created any environments yet. Use the Create button to create your first environment" />
+        <Empty
+          title="You have not created any environments yet"
+          message={
+            <>
+              Use the Create button to create your first environment. Learn more about test or transactions{' '}
+              <a href={ENVIRONMENTS_DOCUMENTATION_URL}>here.</a>
+            </>
+          }
+        />
       }
       loadingComponent={<Loading />}
       {...pagination}

diff --git a/web/src/pages/Home/HomeFilters.tsx b/web/src/pages/Home/HomeFilters.tsx
@@ -7,9 +7,10 @@ import * as S from './Home.styled';
 interface IProps {
   onSearch(search: string): void;
   onSortBy(sortBy: SortBy, sortDirection: SortDirection): void;
+  isEmpty: boolean;
 }
 
-const HomeFilters = ({onSearch, onSortBy}: IProps) => {
+const HomeFilters = ({onSearch, onSortBy, isEmpty}: IProps) => {
   const handleSort = useCallback(
     (newSortBy: string) => {
       const {
@@ -25,7 +26,7 @@ const HomeFilters = ({onSearch, onSortBy}: IProps) => {
     <S.FiltersContainer>
       <SearchInput onSearch={onSearch} placeholder="Search test" />
       <Typography.Text>Sort by:</Typography.Text>
-      <Select defaultValue={sortOptions[0].value} onChange={handleSort} style={{width: 160}}>
+      <Select disabled={isEmpty} defaultValue={sortOptions[0].value} onChange={handleSort} style={{width: 160}}>
         {sortOptions.map(({value, label}) => (
           <Select.Option key={value} value={value}>
             {label}

diff --git a/web/src/pages/Home/Resources.tsx b/web/src/pages/Home/Resources.tsx
@@ -11,6 +11,7 @@ import useTestCrud from 'providers/Test/hooks/useTestCrud';
 import {useCallback, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 import {useGetResourcesQuery} from 'redux/apis/TraceTest.api';
+import {ADD_TEST_SPECS_DOCUMENTATION_URL} from 'constants/Common.constants';
 import HomeAnalyticsService from 'services/Analytics/HomeAnalytics.service';
 import {ResourceType} from 'types/Resource.type';
 import useTransactionCrud from 'providers/Transaction/hooks/useTransactionCrud';
@@ -68,6 +69,7 @@ const Resources = () => {
           <HomeFilters
             onSearch={pagination.search}
             onSortBy={(sortBy, sortDirection) => setParameters({sortBy, sortDirection})}
+            isEmpty={pagination.list?.length === 0}
           />
           <HomeActions
             onCreateTransaction={() => setIsCreateTransactionOpen(true)}
@@ -77,7 +79,17 @@ const Resources = () => {
 
         <Pagination<Resource>
           emptyComponent={
-            <Empty message="You have not created any tests yet. Use the Create button to create your first test" />
+            <Empty
+              title="You have not created any tests yet"
+              message={
+                <>
+                  Use the Create button to create your first test. Learn more about test or transactions{' '}
+                  <a href={ADD_TEST_SPECS_DOCUMENTATION_URL} target="_blank">
+                    here.
+                  </a>
+                </>
+              }
+            />
           }
           loadingComponent={<Loading />}
           {...pagination}