Skip to content

Commit b984a68

Browse files
lucasgorallucasgoral
committed
rename
1 parent 7574b3e commit b984a68

File tree

5 files changed

+92
-106
lines changed

5 files changed

+92
-106
lines changed

‎src/components/ControlPlane/FluxList.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { timeAgo } from '../../utils/i18n/timeAgo.ts';
1010
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
1111
import { useMemo } from 'react';
1212
import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
13-
import { ResourceStatusCellWithButton } from '../Shared/ResourceStatusCellWithButton.tsx';
13+
import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
1414

1515
export default function FluxList() {
1616
const { data: gitReposData, error: repoErr, isLoading: repoIsLoading } = useApiResource(FluxRequest); //404 if component not enabled
@@ -63,7 +63,7 @@ export default function FluxList() {
6363
Filter: ({ column }) => <StatusFilter column={column} />,
6464
Cell: (cellData: CellData<FluxRow>) =>
6565
cellData.cell.row.original?.isReady != null ? (
66-
<ResourceStatusCellWithButton
66+
<ResourceStatusCell
6767
positiveText={t('common.ready')}
6868
negativeText={t('errors.error')}
6969
value={cellData.cell.row.original?.isReady}
@@ -107,7 +107,7 @@ export default function FluxList() {
107107
Filter: ({ column }) => <StatusFilter column={column} />,
108108
Cell: (cellData: CellData<FluxRow['isReady']>) =>
109109
cellData.cell.row.original?.isReady != null ? (
110-
<ResourceStatusCellWithButton
110+
<ResourceStatusCell
111111
positiveText={t('common.ready')}
112112
negativeText={t('common.error')}
113113
value={cellData.cell.row.original?.isReady}

‎src/components/ControlPlane/ManagedResources.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { resourcesInterval } from '../../lib/shared/constants';
1616
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
1717
import { useMemo } from 'react';
1818
import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
19-
import { ResourceStatusCellWithButton } from '../Shared/ResourceStatusCellWithButton.tsx';
19+
import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
2020

2121
interface CellData<T> {
2222
cell: {
@@ -73,7 +73,7 @@ export function ManagedResources() {
7373
Filter: ({ column }) => <StatusFilter column={column} />,
7474
Cell: (cellData: CellData<ResourceRow['synced']>) =>
7575
cellData.cell.row.original?.synced != null ? (
76-
<ResourceStatusCellWithButton
76+
<ResourceStatusCell
7777
value={cellData.cell.row.original?.synced}
7878
transitionTime={cellData.cell.row.original?.syncedTransitionTime}
7979
positiveText={t('common.synced')}
@@ -90,7 +90,7 @@ export function ManagedResources() {
9090
Filter: ({ column }) => <StatusFilter column={column} />,
9191
Cell: (cellData: CellData<ResourceRow['ready']>) =>
9292
cellData.cell.row.original?.ready != null ? (
93-
<ResourceStatusCellWithButton
93+
<ResourceStatusCell
9494
value={cellData.cell.row.original?.ready}
9595
transitionTime={cellData.cell.row.original?.readyTransitionTime}
9696
positiveText={t('common.ready')}

‎src/components/ControlPlane/Providers.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
1818
import '@ui5/webcomponents-icons/dist/sys-enter-2';
1919
import '@ui5/webcomponents-icons/dist/sys-cancel-2';
2020
import StatusFilter from '../Shared/StatusFilter/StatusFilter.tsx';
21-
import { ResourceStatusCellWithButton } from '../Shared/ResourceStatusCellWithButton.tsx';
21+
import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
2222

2323
interface CellData<T> {
2424
cell: {
@@ -76,7 +76,7 @@ export function Providers() {
7676
filter: 'equals',
7777
Cell: (cellData: CellData<ProvidersRow['installed']>) =>
7878
cellData.cell.row.original?.installed != null ? (
79-
<ResourceStatusCellWithButton
79+
<ResourceStatusCell
8080
value={cellData.cell.row.original?.installed === 'true'}
8181
transitionTime={cellData.cell.row.original?.installedTransitionTime}
8282
positiveText={t('common.installed')}
@@ -94,7 +94,7 @@ export function Providers() {
9494
filter: 'equals',
9595
Cell: (cellData: CellData<ProvidersRow['healthy']>) =>
9696
cellData.cell.row.original?.installed != null ? (
97-
<ResourceStatusCellWithButton
97+
<ResourceStatusCell
9898
value={cellData.cell.row.original?.healthy === 'true'}
9999
transitionTime={cellData.cell.row.original?.healthyTransitionTime}
100100
positiveText={t('common.healthy')}

‎src/components/Shared/ResourceStatusCell.tsx‎

Lines changed: 83 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,87 @@
1-
import { Icon } from '@ui5/webcomponents-react';
2-
import { StatusCellProps } from '../../lib/shared/interfaces';
1+
import { FlexBox, Icon, PopoverDomRef, ResponsivePopover, Text } from '@ui5/webcomponents-react';
32
import { timeAgo } from '../../utils/i18n/timeAgo';
3+
import { MouseEvent, useRef, useState } from 'react';
4+
import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
5+
import PopoverPlacement from '@ui5/webcomponents/dist/types/PopoverPlacement.js';
6+
7+
export interface ResourceStatusCellProps {
8+
value: boolean;
9+
transitionTime: string;
10+
message?: string;
11+
positiveText: string;
12+
negativeText: string;
13+
}
14+
export const ResourceStatusCell = ({
15+
value,
16+
transitionTime,
17+
message,
18+
positiveText,
19+
negativeText,
20+
}: ResourceStatusCellProps) => {
21+
const popoverRef = useRef<PopoverDomRef>(null);
22+
const [open, setOpen] = useState(false);
23+
24+
const handleOpenerClick = (e: MouseEvent<HTMLButtonElement>) => {
25+
if (popoverRef.current) {
26+
(popoverRef.current as unknown as { opener: EventTarget | null }).opener = e.target;
27+
setOpen((prev) => !prev);
28+
}
29+
};
430

5-
export function ResourceStatusCell({ value, transitionTime }: StatusCellProps) {
631
return (
7-
<Icon
8-
design={value ? 'Positive' : 'Negative'}
9-
name={value ? 'sys-enter-2' : 'sys-cancel-2'}
10-
showTooltip={true}
11-
accessibleName={transitionTime ? timeAgo.format(new Date(transitionTime)) : '-'}
12-
/>
32+
<span>
33+
<AnimatedHoverTextButton
34+
icon={
35+
<Icon
36+
design={value ? 'Positive' : 'Negative'}
37+
name={value ? 'sys-enter-2' : 'sys-cancel-2'}
38+
showTooltip={true}
39+
accessibleName={transitionTime ? timeAgo.format(new Date(transitionTime)) : '-'}
40+
/>
41+
}
42+
text={value ? positiveText : negativeText}
43+
onClick={handleOpenerClick}
44+
/>
45+
<ResponsivePopover ref={popoverRef} open={open} placement={PopoverPlacement.Bottom}>
46+
<Text
47+
style={{
48+
maxWidth: '60ch',
49+
textAlign: 'left',
50+
lineHeight: '1.5em',
51+
}}
52+
>
53+
{message}
54+
</Text>
55+
56+
<FlexBox
57+
style={{
58+
borderTop: '1px solid gray',
59+
paddingTop: '1rem',
60+
marginTop: '1rem',
61+
}}
62+
justifyContent={'Start'}
63+
alignItems={'Center'}
64+
gap={12}
65+
>
66+
<Icon
67+
name={'date-time'}
68+
style={{
69+
color: value ? 'var(--sapPositiveTextColor)' : 'var(--sapNegativeTextColor)',
70+
}}
71+
/>
72+
<Text
73+
style={{
74+
maxWidth: '60ch',
75+
textAlign: 'left',
76+
lineHeight: '1.5em',
77+
fontWeight: 'bold',
78+
color: value ? 'var(--sapPositiveTextColor)' : 'var(--sapNegativeTextColor)',
79+
}}
80+
>
81+
{timeAgo.format(new Date(transitionTime))}
82+
</Text>
83+
</FlexBox>
84+
</ResponsivePopover>
85+
</span>
1386
);
14-
}
87+
};

‎src/components/Shared/ResourceStatusCellWithButton.tsx‎

Lines changed: 0 additions & 87 deletions
This file was deleted.

0 commit comments

Comments
 (0)