Add empty state (#147)

* add empty states

* add two empty states

* updates to empty state

* update PR

* fix merge conflict

* fix formatting and add prettier

* updated test

* review comments

* update snapshot

src/components/list-empty-state/ListEmptyState.tsx

@@ -9,6 +9,7 @@ import {
   EmptyStateSecondaryActions,
 } from "@patternfly/react-core";
 import { PlusCircleIcon } from "@patternfly/react-icons";
+import { SearchIcon } from "@patternfly/react-icons";
 
 export type Action = {
   text: string;
@@ -19,8 +20,10 @@ export type Action = {
 export type ListEmptyStateProps = {
   message: string;
   instructions: string;
-  primaryActionText: string;
+  primaryActionText?: string;
-  onPrimaryAction: MouseEventHandler<HTMLButtonElement>;
+  onPrimaryAction?: MouseEventHandler<HTMLButtonElement>;
+  hasIcon?: boolean;
+  isSearchVariant?: boolean;
   secondaryActions?: Action[];
 };
 
@@ -28,20 +31,28 @@ export const ListEmptyState = ({
   message,
   instructions,
   onPrimaryAction,
+  hasIcon,
+  isSearchVariant,
   primaryActionText,
   secondaryActions,
 }: ListEmptyStateProps) => {
   return (
     <>
       <EmptyState variant="large">
-        <EmptyStateIcon icon={PlusCircleIcon} />
+        {hasIcon && isSearchVariant ? (
+          <EmptyStateIcon icon={SearchIcon} />
+        ) : (
+          <EmptyStateIcon icon={PlusCircleIcon} />
+        )}
         <Title headingLevel="h4" size="lg">
           {message}
         </Title>
         <EmptyStateBody>{instructions}</EmptyStateBody>
-        <Button variant="primary" onClick={onPrimaryAction}>
+        {primaryActionText && (
-          {primaryActionText}
+          <Button variant="primary" onClick={onPrimaryAction}>
-        </Button>
+            {primaryActionText}
+          </Button>
+        )}
         {secondaryActions && (
           <EmptyStateSecondaryActions>
             {secondaryActions.map((action) => (

src/groups/GroupsSection.tsx

@@ -8,6 +8,7 @@ import {
   ServerGroupMembersRepresentation,
 } from "./models/server-info";
 import { TableToolbar } from "../components/table-toolbar/TableToolbar";
+import { ListEmptyState } from "../components/list-empty-state/ListEmptyState";
 import {
   Button,
   Divider,
@@ -90,16 +91,17 @@ export const GroupsSection = () => {
         </Title>
       </PageSection>
       <Divider />
+
       <PageSection variant={PageSectionVariants.light}>
         {!rawData && (
           <div className="pf-u-text-align-center">
             <Spinner />
           </div>
         )}
-        {rawData && (
+        {rawData && rawData.length > 0 ? (
           <TableToolbar
             inputGroupName="groupsToolbarTextInput"
-            inputGroupPlaceholder="Search groups"
+            inputGroupPlaceholder={t("searchGroups")}
             inputGroupOnChange={filterGroups}
             toolbarItem={
               <>
@@ -122,8 +124,25 @@ export const GroupsSection = () => {
               </>
             }
           >
-            <GroupsList list={filteredData || rawData} />
+            {rawData && (
+              <GroupsList list={filteredData ? filteredData : rawData} />
+            )}
+            {filteredData && filteredData.length === 0 && (
+              <ListEmptyState
+                hasIcon={true}
+                isSearchVariant={true}
+                message={t("noSearchResults")}
+                instructions={t("noSearchResultsInstructions")}
+              />
+            )}
           </TableToolbar>
+        ) : (
+          <ListEmptyState
+            hasIcon={true}
+            message={t("noGroupsInThisRealm")}
+            instructions={t("noGroupsInThisRealmInstructions")}
+            primaryActionText={t("createGroup")}
+          />
         )}
       </PageSection>
     </React.Fragment>

src/groups/messages.json

@@ -9,6 +9,10 @@
     "members": "Members",
     "moveTo": "Move to",
     "delete": "Delete",
-    "tableOfGroups": "Table of groups"
+    "tableOfGroups": "Table of groups",
+    "noSearchResults": "No search results",
+    "noSearchResultsInstructions" : "Click on the search bar above to search for groups",
+    "noGroupsInThisRealm" : "No groups in this Realm",
+    "noGroupsInThisRealmInstructions" : "You haven't created any groups in this realm. Create a group to get started."
   }
 }

yarn.lock

@@ -15237,7 +15237,7 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
-prettier@^2.0.5:
+prettier@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
   integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==