Skip to content

Commit

Permalink
inital pass at component changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Andrewgdewar
Andrewgdewar committed Sep 21, 2023
1 parent 8807084 commit 5b4cf6f
Show file tree
Hide file tree
Showing 24 changed files with 292 additions and 253 deletions.
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"editor.detectIndentation": false,
"[typescriptreact]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
Expand Down
16 changes: 5 additions & 11 deletions src/Pages/AdminTaskTable/AdminTaskTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
Spinner,
} from '@patternfly/react-core';
import {
TableComposable,
Table /* data-codemods */,
TableVariant,
Tbody,
Td,
Expand Down Expand Up @@ -176,7 +176,6 @@ const AdminTaskTable = () => {
<Pagination
id='top-pagination-id'
widgetId='topPaginationWidgetId'
perPageComponent='button'
isDisabled={isLoading}
itemCount={count}
perPage={perPage}
Expand All @@ -191,19 +190,15 @@ const AdminTaskTable = () => {
<Hide hide={!isLoading}>
<Grid className={classes.mainContainer}>
<SkeletonTable
rowSize={perPage}
colSize={columnHeaders.length}
rows={perPage}
numberOfColumns={columnHeaders.length}
variant={TableVariant.compact}
/>
</Grid>
</Hide>
<Hide hide={countIsZero || isLoading}>
<>
<TableComposable
aria-label='Admin tasks table'
ouiaId='admin_tasks_table'
variant='compact'
>
<Table aria-label='Admin tasks table' ouiaId='admin_tasks_table' variant='compact'>
<Thead>
<Tr>
{columnHeaders.map((columnHeader, index) => (
Expand Down Expand Up @@ -238,14 +233,13 @@ const AdminTaskTable = () => {
</Tr>
))}
</Tbody>
</TableComposable>
</Table>
<Flex className={classes.bottomContainer}>
<FlexItem />
<FlexItem>
<Pagination
id='bottom-pagination-id'
widgetId='bottomPaginationWidgetId'
perPageComponent='button'
itemCount={count}
perPage={perPage}
page={page}
Expand Down
48 changes: 29 additions & 19 deletions src/Pages/AdminTaskTable/components/AdminTaskFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@ import {
Flex,
FlexItem,
InputGroup,
SelectVariant,
TextInput,
InputGroupItem,
Icon,
} from '@patternfly/react-core';
import { SelectVariant } from '@patternfly/react-core/deprecated';
import DropdownSelect from '../../../components/DropdownSelect/DropdownSelect';
import { FilterIcon, SearchIcon } from '@patternfly/react-icons';
import { global_BackgroundColor_100, global_secondary_color_100 } from '@patternfly/react-tokens';
Expand Down Expand Up @@ -109,10 +111,12 @@ const AdminTaskFilters = ({ isLoading, setFilterData, filterData }: Props) => {
ouiaId='filter_account_id'
placeholder='Filter by account ID'
value={accountId}
onChange={(value) => setAccountId(value)}
onChange={(_event, value) => setAccountId(value)}
className={classes.searchInput}
/>
<SearchIcon size='sm' className={classes.searchIcon} />
<Icon size='sm'>
<SearchIcon className={classes.searchIcon} />
</Icon>
</Flex>
);
case 'Org ID':
Expand All @@ -124,10 +128,12 @@ const AdminTaskFilters = ({ isLoading, setFilterData, filterData }: Props) => {
ouiaId='filter_org_id'
placeholder='Filter by org ID'
value={orgId}
onChange={(value) => setOrgId(value)}
onChange={(_event, value) => setOrgId(value)}
className={classes.searchInput}
/>
<SearchIcon size='sm' className={classes.searchIcon} />
<Icon size='sm'>
<SearchIcon className={classes.searchIcon} />
</Icon>
</Flex>
);
case 'Status':
Expand All @@ -153,20 +159,24 @@ const AdminTaskFilters = ({ isLoading, setFilterData, filterData }: Props) => {
<Flex>
<FlexItem>
<InputGroup>
<FlexItem>
<DropdownSelect
toggleId='filterSelectionDropdown'
ouiaId='filter_type'
isDisabled={isLoading}
options={filters}
variant={SelectVariant.single}
selectedProp={filterType}
setSelected={setFilterType}
placeholderText='filter'
toggleIcon={<FilterIcon />}
/>
</FlexItem>
<FlexItem>{Filter}</FlexItem>
<InputGroupItem>
<FlexItem>
<DropdownSelect
toggleId='filterSelectionDropdown'
ouiaId='filter_type'
isDisabled={isLoading}
options={filters}
variant={SelectVariant.single}
selectedProp={filterType}
setSelected={setFilterType}
placeholderText='filter'
toggleIcon={<FilterIcon />}
/>
</FlexItem>
</InputGroupItem>
<InputGroupItem>
<FlexItem>{Filter}</FlexItem>
</InputGroupItem>
</InputGroup>
</FlexItem>
<Hide hide={!(accountId !== '' || orgId !== '' || selectedStatuses.length)}>
Expand Down
10 changes: 7 additions & 3 deletions src/Pages/AdminTaskTable/components/StatusIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
BanIcon,
ClockIcon,
} from '@patternfly/react-icons';
import { Flex, FlexItem, Spinner } from '@patternfly/react-core';
import { Flex, FlexItem, Icon, Spinner } from '@patternfly/react-core';
import StatusText from '../../../components/StatusText/StatusText';
import {
global_danger_color_100,
Expand Down Expand Up @@ -48,7 +48,9 @@ const StatusIcon = ({ status }: Props) => {
return (
<Flex alignContent={{ default: 'alignContentCenter' }} direction={{ default: 'row' }}>
<FlexItem spacer={{ default: 'spacerSm' }}>
<ExclamationCircleIcon color={red} />
<Icon color={red}>
<ExclamationCircleIcon />
</Icon>
</FlexItem>
<FlexItem>
<StatusText color='green'>Failed</StatusText>
Expand Down Expand Up @@ -81,7 +83,9 @@ const StatusIcon = ({ status }: Props) => {
return (
<Flex alignContent={{ default: 'alignContentCenter' }} direction={{ default: 'row' }}>
<FlexItem spacer={{ default: 'spacerSm' }}>
<ClockIcon color={gold} />
<Icon color={gold}>
<ClockIcon />
</Icon>
</FlexItem>
<FlexItem>
<StatusText color='blue'>Pending</StatusText>
Expand Down
45 changes: 24 additions & 21 deletions src/Pages/AdminTaskTable/components/ViewPayloadModal/ViewPayloadModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { createUseStyles } from 'react-jss';
import { createRef, useEffect, useMemo, useState } from 'react';
import { AdminTask } from '../../../../services/AdminTasks/AdminTaskApi';
import AdminTaskInfo from './components/AdminTaskInfo';
import ReactJson from 'react-json-view';
import ReactJson from 'react18-json-view';
import Hide from '../../../../components/Hide/Hide';
import { useFetchAdminTaskQuery } from '../../../../services/AdminTasks/AdminTaskQueries';
import { useNavigate, useParams } from 'react-router-dom';
Expand Down Expand Up @@ -120,23 +120,26 @@ const ViewPayloadModal = () => {
aria-label='Task tabs'
ouiaId='task-tabs'
>
<Tab
title={<TabTitleText>Task details</TabTitleText>}
aria-label='Task details'
ouiaId='task-details'
eventKey={0}
tabContentRef={detailRef}
/>
{tabs.map(({ title, contentRef }) => (
{[
<Tab
key={title}
eventKey={title}
aria-label={title}
ouiaId={title}
tabContentRef={contentRef}
title={<TabTitleText>{title}</TabTitleText>}
/>
))}
key='taskDetails'
title={<TabTitleText>Task details</TabTitleText>}
aria-label='Task details'
ouiaId='task-details'
eventKey={0}
tabContentRef={detailRef}
/>,
...tabs.map(({ title, contentRef }, key) => (
<Tab
key={title + key}
eventKey={title}
aria-label={title}
ouiaId={title}
tabContentRef={contentRef}
title={<TabTitleText>{title}</TabTitleText>}
/>
)),
]}
</Tabs>
</Hide>
}
Expand All @@ -162,11 +165,11 @@ const ViewPayloadModal = () => {
hidden
>
<ReactJson
name={null}
src={data}
enableClipboard={(copy) => {
navigator.clipboard.writeText(JSON.stringify(copy.src, null, '\t'));
}}
enableClipboard
// enableClipboard={(copy) => {
// navigator.clipboard.writeText(JSON.stringify(copy.src, null, '\t'));
// }}
/>
</TabContent>
))}
Expand Down
14 changes: 6 additions & 8 deletions src/Pages/ContentListTable/ContentListTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import {
ActionsColumn,
IAction,
TableComposable,
Table /* data-codemods */,
TableVariant,
Tbody,
Td,
Expand Down Expand Up @@ -379,7 +379,6 @@ const ContentListTable = () => {
<Pagination
id='top-pagination-id'
widgetId='topPaginationWidgetId'
perPageComponent='button'
isDisabled={isLoading}
itemCount={count}
perPage={perPage}
Expand All @@ -394,15 +393,15 @@ const ContentListTable = () => {
<Hide hide={!isLoading}>
<Grid className={classes.mainContainer}>
<SkeletonTable
rowSize={perPage}
colSize={columnHeaders.length}
rows={perPage}
numberOfColumns={columnHeaders.length}
variant={TableVariant.compact}
/>
</Grid>
</Hide>
<Hide hide={countIsZero || isLoading}>
<>
<TableComposable
<Table
aria-label='Custom repositories table'
ouiaId='custom_repositories_table'
variant='compact'
Expand Down Expand Up @@ -448,7 +447,7 @@ const ContentListTable = () => {
onSelect: (_event, isSelecting) =>
onSelectRepo(rowData.uuid, isSelecting),
isSelected: checkedRepositories.has(rowData.uuid),
disable: !repoCanBeChecked(rowData),
isDisabled: !repoCanBeChecked(rowData),
}}
/>
</Hide>
Expand Down Expand Up @@ -483,14 +482,13 @@ const ContentListTable = () => {
);
})}
</Tbody>
</TableComposable>
</Table>
<Flex className={classes.bottomContainer}>
<FlexItem />
<FlexItem>
<Pagination
id='bottom-pagination-id'
widgetId='bottomPaginationWidgetId'
perPageComponent='button'
itemCount={count}
perPage={perPage}
page={page}
Expand Down
Loading

0 comments on commit 5b4cf6f

Please sign in to comment.