Skip to content

Commit

Permalink
Fixes #36822 - Design new hosts page
Browse files Browse the repository at this point in the history
Update the TableIndexPage as a part of this action to accept things like
select all
  • Loading branch information
parthaa committed Oct 10, 2023
1 parent a406cf2 commit 6c8b1f5
Show file tree
Hide file tree
Showing 11 changed files with 620 additions and 6 deletions.
3 changes: 3 additions & 0 deletions config/routes.rb
Original file line number Diff line number Diff line change
Expand Up @@ -550,10 +550,13 @@
mount GraphiQL::Rails::Engine, at: '/graphiql', graphql_path: '/api/graphql'
end


match 'host_statuses' => 'react#index', :via => :get
constraints(id: /[^\/]+/) do
match 'new/hosts/:id' => 'react#index', :via => :get, :as => :host_details_page
end
match 'new/hosts/' => 'react#index', :via => :get

get 'page-not-found' => 'react#index'
get 'links/:type(/:section)' => 'links#show', :as => 'external_link', :constraints => { section: %r{.*} }
end
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Dropdown, DropdownToggle, DropdownToggleCheckbox,

Check failure on line 3 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Replace `·Dropdown,·DropdownToggle,` with `⏎··Dropdown,⏎··DropdownToggle,⏎·`

Check failure on line 3 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Replace `·Dropdown,·DropdownToggle,` with `⏎··Dropdown,⏎··DropdownToggle,⏎·`
DropdownItem } from '@patternfly/react-core';

Check failure on line 4 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Replace `·` with `,⏎`

Check failure on line 4 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Replace `·` with `,⏎`
import { translate as __ } from 'foremanReact/common/I18n';

Check failure on line 5 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Unable to resolve path to module 'foremanReact/common/I18n'

Check failure on line 5 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Missing file extension for "foremanReact/common/I18n"

Check failure on line 5 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Unable to resolve path to module 'foremanReact/common/I18n'

Check failure on line 5 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Missing file extension for "foremanReact/common/I18n"
import { noop } from 'foremanReact/common/helpers';

Check failure on line 6 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Unable to resolve path to module 'foremanReact/common/helpers'

Check failure on line 6 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Missing file extension for "foremanReact/common/helpers"

Check failure on line 6 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Unable to resolve path to module 'foremanReact/common/helpers'

Check failure on line 6 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Missing file extension for "foremanReact/common/helpers"

import './SelectAllCheckbox.scss';

const SelectAllCheckbox = ({
selectNone,
selectPage,
selectedCount,
pageRowCount,
totalCount,
areAllRowsOnPageSelected,
areAllRowsSelected,
selectAll,
}) => {
const [isSelectAllDropdownOpen, setSelectAllDropdownOpen] = useState(false);
const [selectionToggle, setSelectionToggle] = useState(false);

const canSelectAll = selectAll !== noop;
// Checkbox states: false = unchecked, null = partially-checked, true = checked
// Flow: All are selected -> click -> none are selected
// Some are selected -> click -> none are selected
// None are selected -> click -> page is selected
const onSelectAllCheckboxChange = (checked) => {

Check failure on line 28 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Replace `(checked)` with `checked`

Check failure on line 28 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Replace `(checked)` with `checked`
if (checked && selectionToggle !== null) {
if (!canSelectAll) {
selectPage();
} else {
selectAll(true);
}
} else {
selectNone();
}
};

const onSelectAllDropdownToggle = () => setSelectAllDropdownOpen(isOpen => !isOpen);

Check failure on line 40 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Insert `⏎···`

Check failure on line 40 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Insert `⏎···`

const handleSelectAll = () => {
setSelectAllDropdownOpen(false);
setSelectionToggle(true);
selectAll(true);
};
const handleSelectPage = () => {
setSelectAllDropdownOpen(false);
setSelectionToggle(true);
selectPage();
};
const handleSelectNone = () => {
setSelectAllDropdownOpen(false);
setSelectionToggle(false);
selectNone();
};

useEffect(() => {
let newCheckedState = null; // null is partially-checked state

if (areAllRowsSelected) {
newCheckedState = true;
} else if (selectedCount === 0) {
newCheckedState = false;
}
setSelectionToggle(newCheckedState);
}, [selectedCount, areAllRowsSelected]);

const selectAllDropdownItems = [
<DropdownItem key="select-none" ouiaId="select-none" component="button" isDisabled={selectedCount === 0} onClick={handleSelectNone} >

Check failure on line 70 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Replace `·key="select-none"·ouiaId="select-none"·component="button"·isDisabled={selectedCount·===·0}·onClick={handleSelectNone}` with `⏎······key="select-none"⏎······ouiaId="select-none"⏎······component="button"⏎······isDisabled={selectedCount·===·0}⏎······onClick={handleSelectNone}⏎···`

Check failure on line 70 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Replace `·key="select-none"·ouiaId="select-none"·component="button"·isDisabled={selectedCount·===·0}·onClick={handleSelectNone}` with `⏎······key="select-none"⏎······ouiaId="select-none"⏎······component="button"⏎······isDisabled={selectedCount·===·0}⏎······onClick={handleSelectNone}⏎···`
{`${__('Select none')} (0)`}
</DropdownItem>,
<DropdownItem key="select-page" ouiaId="select-page" component="button" isDisabled={pageRowCount === 0 || areAllRowsOnPageSelected} onClick={handleSelectPage}>

Check failure on line 73 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (12)

Replace `·key="select-page"·ouiaId="select-page"·component="button"·isDisabled={pageRowCount·===·0·||·areAllRowsOnPageSelected}·onClick={handleSelectPage}` with `⏎······key="select-page"⏎······ouiaId="select-page"⏎······component="button"⏎······isDisabled={pageRowCount·===·0·||·areAllRowsOnPageSelected}⏎······onClick={handleSelectPage}⏎····`

Check failure on line 73 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/SelectAllCheckbox.js

View workflow job for this annotation

GitHub Actions / test (14)

Replace `·key="select-page"·ouiaId="select-page"·component="button"·isDisabled={pageRowCount·===·0·||·areAllRowsOnPageSelected}·onClick={handleSelectPage}` with `⏎······key="select-page"⏎······ouiaId="select-page"⏎······component="button"⏎······isDisabled={pageRowCount·===·0·||·areAllRowsOnPageSelected}⏎······onClick={handleSelectPage}⏎····`
{`${__('Select page')} (${pageRowCount})`}
</DropdownItem>,
];
if (canSelectAll) {
selectAllDropdownItems.push((
<DropdownItem key="select-all" id="all" ouiaId="select-all" component="button" isDisabled={totalCount === 0 || areAllRowsSelected} onClick={handleSelectAll}>
{`${__('Select all')} (${totalCount})`}
</DropdownItem>));
}

return (
<Dropdown
toggle={
<DropdownToggle
onToggle={onSelectAllDropdownToggle}
id="select-all-checkbox-dropdown-toggle"
ouiaId="select-all-checkbox-dropdown-toggle"
splitButtonItems={[
<DropdownToggleCheckbox
className="tablewrapper-select-all-checkbox"
key="tablewrapper-select-all-checkbox"
ouiaId="select-all-checkbox-dropdown-toggle-checkbox"
aria-label="Select all"
onChange={checked => onSelectAllCheckboxChange(checked)}
isChecked={selectionToggle}
isDisabled={totalCount === 0 && selectedCount === 0}
>
{selectedCount > 0 && `${selectedCount} selected`}
</DropdownToggleCheckbox>,
]}
/>
}
isOpen={isSelectAllDropdownOpen}
dropdownItems={selectAllDropdownItems}
id="selection-checkbox"
ouiaId="selection-checkbox"
/>
);
};

SelectAllCheckbox.propTypes = {
selectedCount: PropTypes.number.isRequired,
selectNone: PropTypes.func.isRequired,
selectPage: PropTypes.func.isRequired,
selectAll: PropTypes.func,
pageRowCount: PropTypes.number.isRequired,
totalCount: PropTypes.number.isRequired,
areAllRowsOnPageSelected: PropTypes.bool.isRequired,
areAllRowsSelected: PropTypes.bool.isRequired,
};

SelectAllCheckbox.defaultProps = {
selectAll: noop,
pageRowCount: 0,
totalCount: 0
};

export default SelectAllCheckbox;
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.tablewrapper-select-all-checkbox {
font-weight: normal;
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@ import {
Td,
ActionsColumn,
} from '@patternfly/react-table';
import { noop } from '../../../../common/helpers';
import { translate as __ } from '../../../../common/I18n';
import { useTableSort } from '../../Helpers/useTableSort';
import Pagination from '../../../Pagination';
import { DeleteModal } from './DeleteModal';
import SelectAllCheckbox from './SelectAllCheckbox';
import EmptyPage from '../../../../routes/common/EmptyPage';

export const Table = ({
columns,
errorMessage,
Expand All @@ -27,6 +28,18 @@ export const Table = ({
setParams,
url,
isPending,
displaySelectAllCheckbox,
selectAll,
selectAllMode,
selectNone,
selectPage,
areAllRowsOnPageSelected,
areAllRowsSelected,
selectedCount,
selectedResults,
clearSelectedResults,
isSelected,
selectOne
}) => {
const columnsToSortParams = {};
Object.keys(columns).forEach(key => {
Expand Down Expand Up @@ -68,6 +81,7 @@ export const Table = ({
getActions && getActions({ id, name, ...item }),
].filter(Boolean);
const columnNamesKeys = Object.keys(columns);

return (
<>
<DeleteModal
Expand All @@ -80,14 +94,14 @@ export const Table = ({
<TableComposable variant="compact" ouiaId="table">
<Thead>
<Tr ouiaId="table-header">
{displaySelectAllCheckbox && <Th key="checkbox-th"/>}
{columnNamesKeys.map(k => (
<Th
key={k}
sort={
Object.values(columnsToSortParams).includes(k) &&
pfSortParams(columnNames[k])
}
>
}>
{columnNames[k]}
</Th>
))}
Expand Down Expand Up @@ -122,6 +136,18 @@ export const Table = ({
)}
{results.map((result, rowIndex) => (
<Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`}>
{displaySelectAllCheckbox &&
<Td
select={{
rowIndex: result.id,
onSelect: (_event, isSelecting) => {
console.log({result, isSelecting});

Check warning on line 144 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js

View workflow job for this annotation

GitHub Actions / test (12)

Unexpected console statement

Check warning on line 144 in webpack/assets/javascripts/react_app/components/PF4/TableIndexPage/Table/Table.js

View workflow job for this annotation

GitHub Actions / test (14)

Unexpected console statement
selectOne(isSelecting, result.id);
},
isSelected: isSelected(result.id),
disable: false
}}
/>}
{columnNamesKeys.map(k => (
<Td key={k} dataLabel={columnNames[k]}>
{columns[k].wrapper ? columns[k].wrapper(result) : result[k]}
Expand Down Expand Up @@ -162,6 +188,18 @@ Table.propTypes = {
setParams: PropTypes.func.isRequired,
url: PropTypes.string.isRequired,
isPending: PropTypes.bool.isRequired,
displaySelectAllCheckbox: PropTypes.bool,
selectedCount: PropTypes.number,
selectedResults: PropTypes.arrayOf(PropTypes.shape({})),
clearSelectedResults: PropTypes.func,
selectAll: PropTypes.func,
selectAllMode: PropTypes.bool,
selectNone: PropTypes.func,
selectPage: PropTypes.func,
areAllRowsOnPageSelected: PropTypes.func,
areAllRowsSelected: PropTypes.func,
isSelected: PropTypes.func,
selectOne: PropTypes.func,
};

Table.defaultProps = {
Expand All @@ -170,4 +208,16 @@ Table.defaultProps = {
itemCount: 0,
getActions: null,
results: [],
displaySelectAllCheckbox: false,
selectedCount: 0,
selectedResults: [],
clearSelectedResults: noop,
selectAll: undefined,
selectAllMode: false,
selectNone: undefined,
selectPage: undefined,
selectOne: noop,
areAllRowsOnPageSelected: noop,
areAllRowsSelected: noop,
isSelected: noop
};
Loading

0 comments on commit 6c8b1f5

Please sign in to comment.