Refs #36867 - address UX comments

Remove icon from delete action in the toolbar’s kebab In the delete modal as a primary button use just “Delete” (not delete host) To the top part: Add a kebab with legacy UI button Ensure the loading screen doesn't say 'No Results'
theforeman · Nov 1, 2023 · 7062fdf · 7062fdf
1 parent 49109f8
commit 7062fdf
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 13 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/HostDetails/ActionsBar/actions.js b/webpack/assets/javascripts/react_app/components/HostDetails/ActionsBar/actions.js
@@ -36,7 +36,7 @@ export const deleteHost = (
     openConfirmModal({
       isWarning: true,
       title: __('Delete host?'),
-      confirmButtonText: __('Delete host'),
+      confirmButtonText: __('Delete'),
       onConfirm: () =>
         dispatch(
           APIActions.delete({

diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/index.js b/webpack/assets/javascripts/react_app/components/HostsIndex/index.js
@@ -5,14 +5,16 @@ import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { Td } from '@patternfly/react-table';
 import {
   ToolbarItem,
+  Dropdown,
   DropdownItem,
+  KebabToggle,
   Flex,
   FlexItem,
   Button,
   Split,
   SplitItem,
 } from '@patternfly/react-core';
-import { TrashIcon } from '@patternfly/react-icons';
+import { UndoIcon } from '@patternfly/react-icons';
 import { translate as __ } from '../../common/I18n';
 import TableIndexPage from '../PF4/TableIndexPage/TableIndexPage';
 import { ActionKebab } from './ActionKebab';
@@ -28,6 +30,7 @@ import { getURIsearch } from '../../common/urlHelpers';
 import { bulkDeleteHosts } from './BulkActions/bulkDelete';
 import { foremanUrl } from '../../common/helpers';
 import Slot from '../common/Slot';
+import './index.scss';
 
 export const ForemanHostsIndexActionsBarContext = createContext({});
 
@@ -142,7 +145,6 @@ const HostsIndex = () => {
       key="delete=hosts-dropdown-item"
       onClick={handleBulkDelete}
       isDisabled={selectedCount === 0}
-      icon={<TrashIcon />}
     >
       {__('Delete')}
     </DropdownItem>,
@@ -169,8 +171,40 @@ const HostsIndex = () => {
     },
   ];
 
+  const [legacyUIKebabOpen, setLegacyUIKebabOpen] = React.useState(false);
+  const legacyUIKebab = (
+    <Dropdown
+      ouiaId="legacy-ui-kebab"
+      id="legacy-ui-kebab"
+      position="right"
+      toggle={
+        <KebabToggle
+          aria-label="legacy-ui-kebab-toggle"
+          id="legacy-ui-kebab-toggle"
+          onToggle={setLegacyUIKebabOpen}
+        />
+      }
+      isOpen={legacyUIKebabOpen}
+      isPlain
+      dropdownItems={[
+        <DropdownItem
+          component="a"
+          ouiaId="legacy-ui-link-dropdown-item"
+          key="legacy-ui-link-dropdown-item"
+          href="/hosts"
+          icon={<UndoIcon />}
+        >
+          {__('Legacy UI')}
+        </DropdownItem>,
+      ]}
+    />
+  );
+
   const hostsIndexHeader = (
-    <Flex alignItems="center" justifyContent="space-between">
+    <Flex
+      alignItems={{ default: 'alignItemsCenter' }}
+      justifyContent={{ default: 'justifyContentSpaceBetween' }}
+    >
       <FlexItem>
         <h1>{__('Hosts')}</h1>
       </FlexItem>
@@ -200,6 +234,7 @@ const HostsIndex = () => {
               {__('Create')}
             </Button>
           </SplitItem>
+          <SplitItem>{legacyUIKebab}</SplitItem>
         </Split>
       </FlexItem>
     </Flex>

diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/index.scss b/webpack/assets/javascripts/react_app/components/HostsIndex/index.scss
@@ -0,0 +1,15 @@
+#legacy-ui-kebab ul.pf-c-dropdown__menu {
+  padding-left: 0;
+  li {
+    display: unset;
+    a {
+      font-size: 16px;
+      color: var(--pf-c-dropdown__menu-item--Color);
+      font-weight: 300;
+    }
+  }
+}
+
+#header-text .pf-l-flex {
+  align-items: center;
+}
diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js
@@ -105,7 +105,7 @@ export const Table = ({
               <Td colSpan={100}>
                 <EmptyPage
                   message={{
-                    type: 'empty',
+                    type: 'loading',
                     text: __('Loading...'),
                   }}
                 />

diff --git a/webpack/assets/javascripts/react_app/routes/common/EmptyPage/index.js b/webpack/assets/javascripts/react_app/routes/common/EmptyPage/index.js
@@ -4,17 +4,25 @@ import { translate as __ } from '../../../common/I18n';
 import DefaultEmptyState from '../../../components/common/EmptyState';
 import './emptypage.scss';
 
-const EmptyPage = ({ message: { type, text } }) => (
-  <DefaultEmptyState
-    icon={type === 'error' ? 'error-circle-o' : 'add-circle-o'}
-    header={type === 'error' ? __('Error') : __('No Results')}
-    description={text}
-  />
-);
+const EmptyPage = ({ message: { type, text } }) => {
+  const headerTextMap = {
+    empty: __('No Results'),
+    error: __('Error'),
+    loading: __('Loading'),
+  };
+  const headerText = headerTextMap[type];
+  return (
+    <DefaultEmptyState
+      icon={type === 'error' ? 'error-circle-o' : 'add-circle-o'}
+      header={headerText}
+      description={text}
+    />
+  );
+};
 
 EmptyPage.propTypes = {
   message: PropTypes.shape({
-    type: PropTypes.oneOf(['empty', 'error']),
+    type: PropTypes.oneOf(['empty', 'error', 'loading']),
     text: PropTypes.string,
   }),
 };