Refs #36867 - add register/create buttons; fix links

theforeman · Oct 30, 2023 · 92a964c · 92a964c
1 parent d6a8e46
commit 92a964c
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 11 deletions.
diff --git a/webpack/assets/javascripts/react_app/components/HostsIndex/index.js b/webpack/assets/javascripts/react_app/components/HostsIndex/index.js
@@ -1,9 +1,17 @@
 import React, { createContext } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { Td } from '@patternfly/react-table';
-import { ToolbarItem, DropdownItem } from '@patternfly/react-core';
+import {
+  ToolbarItem,
+  DropdownItem,
+  Flex,
+  FlexItem,
+  Button,
+  Split,
+  SplitItem,
+} from '@patternfly/react-core';
 import { TrashIcon } from '@patternfly/react-icons';
 import { translate as __ } from '../../common/I18n';
 import TableIndexPage from '../PF4/TableIndexPage/TableIndexPage';
@@ -18,14 +26,16 @@ import { deleteHost } from '../HostDetails/ActionsBar/actions';
 import { useForemanSettings } from '../../Root/Context/ForemanContext';
 import { getURIsearch } from '../../common/urlHelpers';
 import { bulkDeleteHosts } from './BulkActions/bulkDelete';
+import { foremanUrl } from '../../common/helpers';
+import Slot from '../common/Slot';
 
 export const ForemanHostsIndexActionsBarContext = createContext({});
 
 const HostsIndex = () => {
   const columns = {
     name: {
       title: __('Name'),
-      wrapper: ({ id, name }) => <a href={`hosts/${id}`}>{name}</a>,
+      wrapper: ({ name }) => <Link to={`hosts/${name}`}>{name}</Link>,
       isSorted: true,
     },
   };
@@ -159,11 +169,48 @@ const HostsIndex = () => {
     },
   ];
 
+  const hostsIndexHeader = (
+    <Flex alignItems="center" justifyContent="space-between">
+      <FlexItem>
+        <h1>{__('Hosts')}</h1>
+      </FlexItem>
+      <FlexItem align={{ default: 'alignRight' }}>
+        <Split hasGutter>
+          <SplitItem>
+            <Slot id="_all-hosts-schedule-a-job" />
+          </SplitItem>
+          <SplitItem>
+            <Button
+              component="a"
+              ouiaId="register-host-button"
+              href={foremanUrl('/hosts/register')}
+              variant="secondary"
+              isDisabled={false}
+            >
+              {__('Register')}
+            </Button>
+          </SplitItem>
+          <SplitItem>
+            <Button
+              variant="primary"
+              component="a"
+              ouiaId="create-host-button"
+              href={foremanUrl('/hosts/new')}
+            >
+              {__('Create')}
+            </Button>
+          </SplitItem>
+        </Split>
+      </FlexItem>
+    </Flex>
+  );
+
   return (
     <TableIndexPage
       apiUrl={HOSTS_API_PATH}
       apiOptions={{ key: API_REQUEST_KEY }}
-      header={__('Hosts')}
+      headerText={__('Hosts')}
+      header={hostsIndexHeader}
       controller="hosts"
       columns={columns}
       creatable={false}

diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.js
@@ -55,7 +55,8 @@ A page component that displays a table with data fetched from an API. It provide
 @param {Array<Object>} {customToolbarItems} - an array of custom toolbar items to be displayed
 @param {boolean} {exportable} - whether or not to show export button
 @param {boolean} {hasHelpPage} - whether or not to show documentation button
-@param {string}{header} - the header text for the page
+@param {string}{headerText} - the header text for the page
+@param {string}{header} - header node; default is <title>{headerText}</title>
 @param {boolean} {isDeleteable} - whether or not entries can be deleted
 @param {boolean} {searchable} - whether or not the table can be searched
 @param {React.ReactNode} {children} - optional children to be rendered inside the page instead of the table
@@ -77,6 +78,7 @@ const TableIndexPage = ({
   customToolbarItems,
   exportable,
   hasHelpPage,
+  headerText,
   header,
   isDeleteable,
   searchable,
@@ -188,9 +190,7 @@ const TableIndexPage = ({
 
   return (
     <div id="foreman-page">
-      <Head>
-        <title>{header}</title>
-      </Head>
+      <Head>{headerText}</Head>
       {breadcrumbOptions && (
         <PageSection variant={PageSectionVariants.light} type="breadcrumb">
           <BreadcrumbBar {...breadcrumbOptions} />
@@ -199,7 +199,7 @@ const TableIndexPage = ({
       <PageSection variant={PageSectionVariants.light}>
         <TextContent>
           <Text ouiaId="header-text" component="h1">
-            {header}
+            {header ?? <title>{headerText}</title>}
           </Text>
         </TextContent>
       </PageSection>
@@ -318,7 +318,8 @@ TableIndexPage.propTypes = {
   replacementResponse: PropTypes.object,
   exportable: PropTypes.bool,
   hasHelpPage: PropTypes.bool,
-  header: PropTypes.string,
+  headerText: PropTypes.string,
+  header: PropTypes.node,
   isDeleteable: PropTypes.bool,
   searchable: PropTypes.bool,
   children: PropTypes.node,
@@ -345,7 +346,8 @@ TableIndexPage.defaultProps = {
   customToolbarItems: null,
   exportable: false,
   hasHelpPage: false,
-  header: '',
+  headerText: '',
+  header: undefined,
   isDeleteable: false,
   searchable: true,
   selectionToolbar: null,

diff --git a/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss b/webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/TableIndexPage.scss
@@ -16,5 +16,9 @@
     &.pf-m-align-right{
       justify-content: flex-end;
     }
+    &:first-child {
+      margin-right: auto;
+      width: min-content;
+    }
   }
 }