Skip to content

Commit

Permalink
Refs #36793 - Refactored based on suggestions
Browse files Browse the repository at this point in the history
  • Loading branch information
parthaa committed Oct 17, 2023
1 parent 1b1c644 commit bc39865
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 162 deletions.
131 changes: 122 additions & 9 deletions webpack/assets/javascripts/react_app/components/HostsIndex/index.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,140 @@
import React from 'react';
import { CubeIcon } from '@patternfly/react-icons';
import { Td } from '@patternfly/react-table';
import {
Dropdown,

Check failure on line 5 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'Dropdown' is defined but never used

Check failure on line 5 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'Dropdown' is defined but never used

Check failure on line 5 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'Dropdown' is defined but never used

Check failure on line 5 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'Dropdown' is defined but never used
KebabToggle,

Check failure on line 6 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'KebabToggle' is defined but never used

Check failure on line 6 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'KebabToggle' is defined but never used

Check failure on line 6 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'KebabToggle' is defined but never used

Check failure on line 6 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'KebabToggle' is defined but never used
DropdownItem,
ToolbarItem,
} from '@patternfly/react-core';
import { translate as __ } from '../../common/I18n';
import TableIndexPage from '../PF4/TableIndexPage/TableIndexPage';
import { ActionKebab } from '../PF4/TableIndexPage/ActionKebab';
import { HOSTS_API_PATH, API_REQUEST_KEY } from '../../routes/Hosts/constants';
import { useAPI } from '../../common/hooks/API/APIHooks';
import { useBulkSelect } from '../PF4/TableIndexPage/Table/TableHooks';
import SelectAllCheckbox from '../PF4/TableIndexPage/Table/SelectAllCheckbox';
import { getPageStats } from '../PF4/TableIndexPage/Table/helpers';
import { STATUS } from '../../constants';

const HostsIndex = () => {
const columns = {
name: {
title: __('Name'),
wrapper: ({ id, name }) => (<a href={`hosts/${id}`}>{name}</a>),
wrapper: ({ id, name }) => <a href={`hosts/${id}`}>{name}</a>,
isSorted: true,
},
};
const defaultParams = { search: '' }; // search ||

const response = useAPI(
'get',
HOSTS_API_PATH.includes('include_permissions')
? HOSTS_API_PATH
: `${HOSTS_API_PATH}?include_permissions=true`,
{
...{ key: API_REQUEST_KEY },
params: defaultParams,
}
);

const {
response: {
search: apiSearchQuery,

Check failure on line 43 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'apiSearchQuery' is assigned a value but never used

Check failure on line 43 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'apiSearchQuery' is assigned a value but never used

Check failure on line 43 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'apiSearchQuery' is assigned a value but never used

Check failure on line 43 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'apiSearchQuery' is assigned a value but never used
can_create: canCreate,

Check failure on line 44 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'canCreate' is assigned a value but never used

Check failure on line 44 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'canCreate' is assigned a value but never used

Check failure on line 44 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'canCreate' is assigned a value but never used

Check failure on line 44 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'canCreate' is assigned a value but never used
results,
total,
per_page: perPage,
page,
subtotal,

Check failure on line 49 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'subtotal' is assigned a value but never used

Check failure on line 49 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'subtotal' is assigned a value but never used

Check failure on line 49 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'subtotal' is assigned a value but never used

Check failure on line 49 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'subtotal' is assigned a value but never used
message: errorMessage,

Check failure on line 50 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'errorMessage' is assigned a value but never used

Check failure on line 50 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'errorMessage' is assigned a value but never used

Check failure on line 50 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'errorMessage' is assigned a value but never used

Check failure on line 50 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'errorMessage' is assigned a value but never used
},
status = STATUS.PENDING,

Check failure on line 52 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'status' is assigned a value but never used

Check failure on line 52 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'status' is assigned a value but never used

Check failure on line 52 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'status' is assigned a value but never used

Check failure on line 52 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'status' is assigned a value but never used
setAPIOptions,

Check failure on line 53 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'setAPIOptions' is assigned a value but never used

Check failure on line 53 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'setAPIOptions' is assigned a value but never used

Check failure on line 53 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (12)

'setAPIOptions' is assigned a value but never used

Check failure on line 53 in webpack/assets/javascripts/react_app/components/HostsIndex/index.js

View workflow job for this annotation

GitHub Actions / test (14)

'setAPIOptions' is assigned a value but never used
} = response;

const { pageRowCount } = getPageStats({ total, page, perPage });

const {
updateSearchQuery,
fetchBulkParams,
...selectAllOptions
} = useBulkSelect({
results,
metadata: {},
});

const {
selectAll,
selectPage,
selectNone,
selectedCount,
selectOne,
areAllRowsOnPageSelected,
areAllRowsSelected,
isSelected,
} = selectAllOptions;

const computeContentSource = search =>
`/change_host_content_source?search=${search}`;

const customActionKebabs = [
{
title: __('Change content source'),
icon: <CubeIcon />,
computeHref: computeContentSource,
},
const item = {
title: __('Change content source'),
icon: <CubeIcon />,
computeHref: computeContentSource,
};

const selectionToolbar = (
<ToolbarItem key="selectAll">
<SelectAllCheckbox
{...{
selectAll,
selectPage,
selectNone,
selectedCount,
pageRowCount,
}}
totalCount={total}
areAllRowsOnPageSelected={areAllRowsOnPageSelected()}
areAllRowsSelected={areAllRowsSelected()}
/>
</ToolbarItem>
);

const rowSelectNodeFunc = result => (
<Td
select={{
rowIndex: result.id,
onSelect: (_event, isSelecting) => {
selectOne(isSelecting, result.id);
},
isSelected: isSelected(result.id),
disable: false,
}}
/>
);

const computeHref = () => {
if (selectedCount > 0) {
return `/change_host_content_source?search=${fetchBulkParams()}`;
}
return '';
};

const actionNode = [
<DropdownItem
ouiaId="change-content-s-dropdown-item"
key={item.title}
title={item.title}
href={computeHref()}
isDisabled={selectedCount === 0}
>
{item.icon} {item.title}
</DropdownItem>,
];

const customToolbarItems = <ActionKebab items={actionNode} />;

return (
<TableIndexPage
apiUrl={HOSTS_API_PATH}
Expand All @@ -32,9 +143,11 @@ const HostsIndex = () => {
controller="hosts"
isDeleteable
columns={columns}
displaySelectAllCheckbox
customActionKebabs={customActionKebabs}
creatable={false}
response={response}
customToolbarItems={customToolbarItems}
selectionToolbar={selectionToolbar}
rowSelectNodeFunc={rowSelectNodeFunc}
/>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button } from '@patternfly/react-core';
import {
Button,
Dropdown,
KebabToggle,
DropdownItem,
} from '@patternfly/react-core';

/**
* Generate a button or a dropdown of buttons
Expand All @@ -10,20 +15,43 @@ import { Button } from '@patternfly/react-core';
*/
export const ActionButtons = ({ buttons: originalButtons }) => {
const buttons = [...originalButtons];
const [isOpen, setIsOpen] = useState(false);
if (!buttons.length) return null;

const pfButtons = buttons.map(button => (
<Button
key={button.title}
ouiaId="action-buttons-button"
component={button.action?.href ? 'a' : undefined}
{...button.action}
>
{button.title}
</Button>
));

return <>{pfButtons}</>;
const firstButton = buttons.shift();
return (
<>
<Button
ouiaId="action-buttons-button"
component={firstButton.action?.href ? 'a' : undefined}
{...firstButton.action}
>
{firstButton.title}
</Button>
{buttons.length > 0 && (
<Dropdown
ouiaId="action-buttons-dropdown"
toggle={
<KebabToggle
aria-label="toggle action dropdown"
onToggle={setIsOpen}
/>
}
isOpen={isOpen}
isPlain
dropdownItems={buttons.map(button => (
<DropdownItem
ouiaId={`${button.title}-dropdown-item`}
key={button.title}
title={button.title}
{...button.action}
>
{button.icon} {button.title}
</DropdownItem>
))}
/>
)}
</>
);
};

ActionButtons.propTypes = {
Expand All @@ -32,7 +60,6 @@ ActionButtons.propTypes = {
action: PropTypes.object,
title: PropTypes.string,
icon: PropTypes.node,
isDisabled: PropTypes.bool,
})
),
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { Dropdown, KebabToggle, DropdownItem } from '@patternfly/react-core';
* @param {Object} action action to preform when the button is click can be href with data-method or Onclick
* @return {Function} button component or splitbutton component
*/
export const ActionKebab = ({ items: originalItems }) => {
const items = [...originalItems];
export const ActionKebab = ({ items }) => {
const [isOpen, setIsOpen] = useState(false);
if (!items.length) return null;
return (
Expand All @@ -25,32 +24,15 @@ export const ActionKebab = ({ items: originalItems }) => {
}
isOpen={isOpen}
isPlain
dropdownItems={items.map(item => (
<DropdownItem
ouiaId={`${item.title}-dropdown-item`}
key={item.title}
title={item.title}
{...item.action}
isDisabled={item.isDisabled}
>
{item.icon} {item.title}
</DropdownItem>
))}
dropdownItems={items}
/>
)}
</>
);
};

ActionKebab.propTypes = {
items: PropTypes.arrayOf(
PropTypes.shape({
action: PropTypes.object,
title: PropTypes.string,
icon: PropTypes.node,
isDisabled: PropTypes.bool,
})
),
items: PropTypes.arrayOf(PropTypes.node),
};

ActionKebab.defaultProps = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,7 @@ export const Table = ({
url,
isPending,
isEmbedded,
displaySelectAllCheckbox,
isSelected,
selectOne,
rowSelectNodeFunc,
}) => {
const columnsToSortParams = {};
Object.keys(columns).forEach(key => {
Expand Down Expand Up @@ -86,7 +84,7 @@ export const Table = ({
<TableComposable variant="compact" ouiaId="table">
<Thead>
<Tr ouiaId="table-header">
{displaySelectAllCheckbox && <Th key="checkbox-th" />}
{rowSelectNodeFunc && <Th key="checkbox-th" />}
{columnNamesKeys.map(k => (
<Th
key={k}
Expand Down Expand Up @@ -129,18 +127,7 @@ export const Table = ({
)}
{results.map((result, rowIndex) => (
<Tr key={rowIndex} ouiaId={`table-row-${rowIndex}`}>
{displaySelectAllCheckbox && (
<Td
select={{
rowIndex: result.id,
onSelect: (_event, isSelecting) => {
selectOne(isSelecting, result.id);
},
isSelected: isSelected(result.id),
disable: false,
}}
/>
)}
{rowSelectNodeFunc && rowSelectNodeFunc(result)}
{columnNamesKeys.map(k => (
<Td key={k} dataLabel={columnNames[k]}>
{columns[k].wrapper ? columns[k].wrapper(result) : result[k]}
Expand Down Expand Up @@ -183,19 +170,15 @@ Table.propTypes = {
url: PropTypes.string.isRequired,
isPending: PropTypes.bool.isRequired,
isEmbedded: PropTypes.bool,
displaySelectAllCheckbox: PropTypes.bool,
isSelected: PropTypes.func,
selectOne: PropTypes.func,
rowSelectNodeFunc: PropTypes.func,
};

Table.defaultProps = {
errorMessage: null,
isDeleteable: false,
itemCount: 0,
getActions: null,
rowSelectNodeFunc: undefined,
results: [],
isEmbedded: false,
displaySelectAllCheckbox: false,
selectOne: noop,
isSelected: noop,
};
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,6 @@ export const useBulkSelect = ({
};

const selectAll = checked => {
console.log({ checked });
setSelectAllMode(checked);
if (checked) {
exclusionSet.clear();
Expand All @@ -225,15 +224,13 @@ export const useBulkSelect = ({
};

const fetchBulkParams = (idColumnName = idColumn) => {
console.log('fetchBulkParams');
const searchQueryWithExclusionSet = () => {
const query = [
searchQuery,
filtersQuery,
!isEmpty(exclusionSet) &&
`${idColumnName} !^ (${[...exclusionSet].join(',')})`,
];
console.log(query.filter(item => item).join(' and '));
return query.filter(item => item).join(' and ');
};

Expand All @@ -242,8 +239,6 @@ export const useBulkSelect = ({
throw new Error('Cannot build a search query with no items selected');
return `${idColumnName} ^ (${[...inclusionSet].join(',')})`;
};

console.log({ selectAllMode });
return selectAllMode
? searchQueryWithExclusionSet()
: searchQueryWithInclusionSet();
Expand Down Expand Up @@ -299,4 +294,4 @@ export const useUrlParams = () => {
searchParam,
...urlParams,
};
};
};
Loading

0 comments on commit bc39865

Please sign in to comment.