Skip to content

Commit cf4e775

Browse files
suvikankaresuvikankare
committed
Extract common code for versions
1 parent 2f009f2 commit cf4e775

34 files changed

Lines changed: 346 additions & 302 deletions

ui/src/components/stop-registry/stops/versions/utils/accordionClassNames.ts renamed to ui/src/components/common/accordionClassNames.ts

File renamed without changes.

‎ui/src/components/common/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,7 @@ export * from './RedirectWithQuery';
66
export * from './RouteLineTableRow';
77
export * from './RouteTableRow';
88
export * from './TimeRangeControl';
9+
export * from './versions';
910
export * from './search';
1011
export * from './info-container';
12+
export * from './accordionClassNames';

ui/src/components/stop-registry/stops/versions/components/DateRangeInputs.tsx renamed to ui/src/components/common/versions/DateRangeInputs.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { DateTime } from 'luxon';
44
import { Dispatch, FC, SetStateAction } from 'react';
55
import { useTranslation } from 'react-i18next';
66
import { twMerge } from 'tailwind-merge';
7-
import { Row } from '../../../../../layoutComponents';
8-
import { DateRange } from '../../../../../types';
9-
import { DateInput } from '../../../../common';
7+
import { Row } from '../../../layoutComponents';
8+
import { DateRange } from '../../../types';
9+
import { DateInput } from '../DateInput';
1010

1111
const testIds = {
1212
startDate: 'ScheduledVersionsContainer::DateRangeInputs::startDate',

‎ui/src/components/common/versions/EmptyColumnHeader.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { FC } from 'react';
2+
3+
type EmptyColumnHeaderProps = {
4+
readonly className?: string;
5+
};
6+
7+
export const EmptyColumnHeader: FC<EmptyColumnHeaderProps> = ({
8+
className,
9+
}) => (
10+
// eslint-disable-next-line jsx-a11y/control-has-associated-label
11+
<td className={className} />
12+
);

‎ui/src/components/common/versions/NoVersionRow.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { FC } from 'react';
2+
3+
type NoVersionRowProps = {
4+
readonly noVersionsText: string;
5+
readonly colSpan: number;
6+
};
7+
8+
export const NoVersionRow: FC<NoVersionRowProps> = ({
9+
noVersionsText,
10+
colSpan,
11+
}) => {
12+
return (
13+
<tr>
14+
<td className="border px-4 py-2 text-center font-bold" colSpan={colSpan}>
15+
{noVersionsText}
16+
</td>
17+
</tr>
18+
);
19+
};

ui/src/components/stop-registry/stops/versions/types/StopVersionStatus.ts renamed to ui/src/components/common/versions/VersionStatus.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export enum StopVersionStatus {
1+
export enum VersionStatus {
22
ACTIVE = 'ACTIVE',
33
STANDARD = 'STANDARD',
44
TEMPORARY = 'TEMPORARY',

ui/src/components/stop-registry/stops/versions/types/StopVersionTableColumn.ts renamed to ui/src/components/common/versions/VersionTableColumn.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export type StopVersionTableColumn =
1+
export type VersionTableColumn =
22
| 'STATUS'
33
| 'VALIDITY_START'
44
| 'VALIDITY_END'

ui/src/components/stop-registry/stops/versions/components/StopVersionTableHeaderSortableCell.tsx renamed to ui/src/components/common/versions/VersionTableHeaderSortableCell.tsx

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,10 @@ import { TFunction } from 'i18next';
22
import { AriaAttributes, Dispatch, FC, SetStateAction } from 'react';
33
import { useTranslation } from 'react-i18next';
44
import { twJoin } from 'tailwind-merge';
5-
import { SortOrder } from '../../../../../types';
6-
import { ExpandButton } from '../../../../../uiComponents';
7-
import { StopVersionTableColumn, StopVersionTableSortingInfo } from '../types';
8-
9-
const testIds = {
10-
column: (type: StopVersionTableColumn) =>
11-
`StopVersionTableHeaderSortableCell::${type.toLowerCase()}`,
12-
sortButton: 'StopVersionTableHeaderSortableCell::sortButton',
13-
};
5+
import { SortOrder } from '../../../types';
6+
import { ExpandButton } from '../../../uiComponents';
7+
import { VersionTableSortingInfo } from './useVersionContainerControls';
8+
import { VersionTableColumn } from './VersionTableColumn';
149

1510
function getAriaSortValue(
1611
active: boolean,
@@ -23,39 +18,45 @@ function getAriaSortValue(
2318
return undefined;
2419
}
2520

26-
function trColumnName(t: TFunction, columnType: StopVersionTableColumn) {
21+
function trColumnName(t: TFunction, columnType: VersionTableColumn) {
2722
switch (columnType) {
2823
case 'CHANGED':
29-
return t(($) => $.stopVersion.header.changed);
24+
return t(($) => $.versions.header.changed);
3025
case 'CHANGED_BY':
31-
return t(($) => $.stopVersion.header.changed_by);
26+
return t(($) => $.versions.header.changed_by);
3227
case 'STATUS':
33-
return t(($) => $.stopVersion.header.status);
28+
return t(($) => $.versions.header.status);
3429
case 'VALIDITY_END':
35-
return t(($) => $.stopVersion.header.validity_end);
30+
return t(($) => $.versions.header.validity_end);
3631
case 'VALIDITY_START':
37-
return t(($) => $.stopVersion.header.validity_start);
32+
return t(($) => $.versions.header.validity_start);
3833
case 'VERSION_COMMENT':
39-
return t(($) => $.stopVersion.header.version_comment);
34+
return t(($) => $.versions.header.version_comment);
4035

4136
default:
4237
return '';
4338
}
4439
}
4540

46-
type StopVersionTableHeaderSortableCellProps = {
41+
type VersionTableHeaderSortableCellProps = {
4742
readonly className?: string;
4843
readonly tdClassName?: string;
49-
readonly columnType: StopVersionTableColumn;
50-
readonly sortingInfo: StopVersionTableSortingInfo;
51-
readonly setSortingInfo: Dispatch<
52-
SetStateAction<StopVersionTableSortingInfo>
53-
>;
44+
readonly columnType: VersionTableColumn;
45+
readonly sortingInfo: VersionTableSortingInfo;
46+
readonly setSortingInfo: Dispatch<SetStateAction<VersionTableSortingInfo>>;
47+
readonly testIdPrefix?: string;
5448
};
5549

56-
export const StopVersionTableHeaderSortableCell: FC<
57-
StopVersionTableHeaderSortableCellProps
58-
> = ({ className, tdClassName, columnType, sortingInfo, setSortingInfo }) => {
50+
export const VersionTableHeaderSortableCell: FC<
51+
VersionTableHeaderSortableCellProps
52+
> = ({
53+
className,
54+
tdClassName,
55+
columnType,
56+
sortingInfo,
57+
setSortingInfo,
58+
testIdPrefix = 'VersionTableHeaderSortableCell',
59+
}) => {
5960
const { t } = useTranslation();
6061

6162
const active = sortingInfo.sortBy === columnType;
@@ -81,7 +82,7 @@ export const StopVersionTableHeaderSortableCell: FC<
8182
<td
8283
aria-sort={getAriaSortValue(active, ascending)}
8384
className={tdClassName}
84-
data-testid={testIds.column(columnType)}
85+
data-testid={`${testIdPrefix}::${columnType.toLowerCase()}`}
8586
>
8687
<ExpandButton
8788
forSorting
@@ -90,7 +91,7 @@ export const StopVersionTableHeaderSortableCell: FC<
9091
expanded={!ascending}
9192
expandedText={trColumnName(t, columnType)}
9293
onClick={onClick}
93-
testId={testIds.sortButton}
94+
testId={`${testIdPrefix}::sortButton`}
9495
/>
9596
</td>
9697
);

‎ui/src/components/common/versions/index.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export * from './DateRangeInputs';
2+
export * from './NoVersionRow';
3+
export * from './useFilterVersionsByDateRange';
4+
export * from './useVersionContainerControls';
5+
export * from './useSortedVersions';
6+
export * from './statusToCellClasses';
7+
export * from './VersionStatus';
8+
export * from './trStatus';
9+
export * from './VersionTableColumn';
10+
export * from './EmptyColumnHeader';
11+
export * from './VersionTableHeaderSortableCell';

‎ui/src/components/common/versions/statusToCellClasses.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { VersionStatus } from './VersionStatus';
2+
3+
export function statusToCellClasses(status: VersionStatus): string {
4+
switch (status) {
5+
case VersionStatus.ACTIVE:
6+
return 'bg-hsl-dark-green text-white';
7+
8+
case VersionStatus.STANDARD:
9+
return 'bg-tweaked-brand text-white';
10+
11+
case VersionStatus.TEMPORARY:
12+
return 'bg-city-bicycle-yellow';
13+
14+
case VersionStatus.DRAFT:
15+
return 'bg-background';
16+
17+
default:
18+
return '';
19+
}
20+
}

0 commit comments

Comments
 (0)