Skip to content

Commit efdb663

Browse files
MSzalowskiMSzalowski
committed
fix(#2929): add keyboard handlers to non-interactive elements
fix(#2929): remove too big cognitive complexity from some components
1 parent 52cbbaf commit efdb663

16 files changed

+522
-467
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ changes.
1616
- Add CC votes percentages, not voted and Ratification threshold
1717
- Add support for submitting all 7 governance action types [Issue 2258](https://github.com/IntersectMBO/govtool/issues/2258)
1818
- Add workflow to automatically update any of the @intersect.mbo package [Issue 2968](https://github.com/IntersectMBO/govtool/issues/2968)
19+
- Add click handlers to non-interactive elements [Issue 2929](https://github.com/IntersectMBO/govtool/issues/2929)
1920

2021
### Fixed
2122

‎govtool/backend/app/Main.hs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,7 @@ startApp vvaConfig sentryService = do
144144

145145
exceptionHandler :: VVAConfig -> SentryService -> Maybe Request -> SomeException -> IO ()
146146
exceptionHandler vvaConfig sentryService mRequest exception = do
147+
print exception
147148
let isNotTimeoutThread x = case fromException x of
148149
Just TimeoutThread -> False
149150
_ -> True

‎govtool/frontend/.eslintrc.cjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ module.exports = {
9494
},
9595
],
9696
"react/require-default-props": "off",
97+
"react/no-unstable-nested-components": "off",
9798

9899
// TODO: This rule should be enabled in the future
99100
"react-hooks/exhaustive-deps": "off",

‎govtool/frontend/src/components/atoms/Background.tsx‎

Lines changed: 67 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,75 @@
1-
import { ReactNode } from "react";
2-
1+
import { ReactNode, CSSProperties } from "react";
32
import { IMAGES } from "@consts";
43
import { useScreenDimension } from "@/hooks";
54

5+
type BackgroundProps = {
6+
children: ReactNode;
7+
isReverted?: boolean;
8+
opacity?: number;
9+
};
10+
11+
const getStyle = (
12+
isMobile: boolean,
13+
isReverted: boolean,
14+
type: "orange" | "blue",
15+
opacity: number,
16+
): CSSProperties => {
17+
const commonStyles: CSSProperties = {
18+
opacity,
19+
position: "fixed",
20+
zIndex: -10,
21+
};
22+
23+
let orangeBottomStyle = -650;
24+
if (isMobile) {
25+
orangeBottomStyle = -150;
26+
if (isReverted) {
27+
orangeBottomStyle = 200;
28+
}
29+
}
30+
31+
let orangeRightStyle = -650;
32+
if (isMobile) {
33+
orangeRightStyle = -250;
34+
if (isReverted) {
35+
orangeRightStyle = 450;
36+
}
37+
}
38+
39+
let blueTopStyle = -500;
40+
if (isMobile) {
41+
blueTopStyle = -150;
42+
if (isReverted) {
43+
blueTopStyle = 400;
44+
}
45+
}
46+
let blueLeftStyle = -400;
47+
if (isMobile) {
48+
blueLeftStyle = -250;
49+
if (isReverted) {
50+
blueLeftStyle = 400;
51+
}
52+
}
53+
54+
const positions = {
55+
orange: {
56+
bottom: orangeBottomStyle,
57+
right: orangeRightStyle,
58+
},
59+
blue: {
60+
top: blueTopStyle,
61+
left: blueLeftStyle,
62+
},
63+
};
64+
65+
return { ...commonStyles, ...positions[type] };
66+
};
67+
668
export const Background = ({
769
children,
870
isReverted = false,
971
opacity = 1,
10-
}: {
11-
children: ReactNode;
12-
isReverted?: boolean;
13-
opacity?: number;
14-
}) => {
72+
}: BackgroundProps) => {
1573
const { isMobile } = useScreenDimension();
1674

1775
return (
@@ -20,27 +78,15 @@ export const Background = ({
2078
alt="bg-orange"
2179
height={isMobile ? 600 : "auto"}
2280
src={IMAGES.bgOrange}
23-
style={{
24-
bottom: isMobile ? -150 : isReverted ? 200 : -650,
25-
opacity,
26-
position: "fixed",
27-
right: isMobile ? -250 : isReverted ? 450 : -650,
28-
zIndex: -10,
29-
}}
81+
style={getStyle(isMobile, isReverted, "orange", opacity)}
3082
width={isMobile ? 600 : "auto"}
3183
/>
3284
{children}
3385
<img
3486
alt="bg-blue"
3587
height={isMobile ? 600 : "auto"}
3688
src={IMAGES.bgBlue}
37-
style={{
38-
left: isMobile ? -250 : isReverted ? 400 : -400,
39-
opacity,
40-
position: "fixed",
41-
top: isMobile ? -150 : isReverted ? 400 : -500,
42-
zIndex: -10,
43-
}}
89+
style={getStyle(isMobile, isReverted, "blue", opacity)}
4490
width={isMobile ? 600 : "auto"}
4591
/>
4692
</>

‎govtool/frontend/src/components/atoms/CopyButton.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@ export const CopyButton = ({ isChecked, text, variant }: Props) => {
4141
}}
4242
src={iconSrc}
4343
style={{ cursor: "pointer" }}
44+
onKeyDown={(e) => {
45+
if (e.ctrlKey && e.key === "c") {
46+
navigator.clipboard.writeText(text);
47+
addSuccessAlert(t("alerts.copiedToClipboard"));
48+
e.stopPropagation();
49+
}
50+
}}
4451
/>
4552
);
4653
};

‎govtool/frontend/src/components/atoms/StakeRadio.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,20 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
5757
>
5858
{stakeKey}
5959
</Typography>
60-
<IconButton color="primary">
60+
<IconButton color="primary" tabIndex={0}>
6161
<img
6262
alt="copy"
6363
onClick={(e) => {
6464
navigator.clipboard.writeText(stakeKey);
6565
e.stopPropagation();
6666
}}
6767
src={isChecked ? ICONS.copyWhiteIcon : ICONS.copyIcon}
68+
onKeyDown={(e) => {
69+
if (e.ctrlKey && e.key === "c") {
70+
navigator.clipboard.writeText(stakeKey);
71+
e.stopPropagation();
72+
}
73+
}}
6874
/>
6975
</IconButton>
7076
</Box>

‎govtool/frontend/src/components/atoms/Tooltip.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const Tooltip = ({
4141
fontWeight={400}
4242
color="rgb(170, 170, 170)"
4343
>
44-
{paragraphOne && paragraphOne}
44+
{paragraphOne && <>{paragraphOne}</>}
4545
{paragraphTwo && (
4646
<>
4747
<br /> <br />

‎govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx‎

Lines changed: 82 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Box, Divider } from "@mui/material";
2-
32
import { Button, Typography } from "@atoms";
43
import { primaryBlue } from "@consts";
54
import { useAppContext, useModal } from "@context";
@@ -31,15 +30,87 @@ export const AutomatedVotingCard = ({
3130
const onClickShowTransaction = () =>
3231
openInNewTab(`${cExplorerBaseUrl}/tx/${transactionId}`);
3332

33+
const renderTransactionButton = () =>
34+
transactionId && (
35+
<Button
36+
onClick={onClickShowTransaction}
37+
sx={{ width: "fit-content", p: 0 }}
38+
variant="text"
39+
>
40+
{t("seeTransaction")}
41+
</Button>
42+
);
43+
44+
const renderVotingPower = () => (
45+
<Box
46+
sx={{
47+
alignContent: "flex-start",
48+
display: "flex",
49+
flexDirection: "column",
50+
px: screenWidth < 1024 ? 0 : 4.25,
51+
py: screenWidth < 1024 ? 1 : 0,
52+
width: screenWidth < 1024 ? "100%" : "auto",
53+
}}
54+
>
55+
<Typography color="neutralGray" fontWeight={500} variant="caption">
56+
{t("dRepDirectory.votingPower")}
57+
</Typography>
58+
<Typography sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}>
59+
{"₳ "}
60+
{votingPower}
61+
</Typography>
62+
</Box>
63+
);
64+
65+
const renderActionButtons = () => (
66+
<Box
67+
sx={{
68+
display: "flex",
69+
flexDirection: "row",
70+
gap: 2.5,
71+
mt: screenWidth < 1024 ? 3 : 0,
72+
width: screenWidth < 1024 ? "100%" : "auto",
73+
}}
74+
>
75+
<Button
76+
data-testid={`${testIdLabel}-info-button`}
77+
onClick={onClickInfo}
78+
size={isMobile ? "medium" : "large"}
79+
sx={{ flex: screenWidth < 768 ? 1 : undefined }}
80+
variant="outlined"
81+
>
82+
{t("info")}
83+
</Button>
84+
{isConnected ? (
85+
!isSelected && (
86+
<Button
87+
data-testid={`${testIdLabel}-delegate-button`}
88+
isLoading={isDelegateLoading}
89+
onClick={onClickDelegate}
90+
size={isMobile ? "medium" : "large"}
91+
sx={{ flex: screenWidth < 768 ? 1 : undefined }}
92+
variant="contained"
93+
>
94+
{t("delegate")}
95+
</Button>
96+
)
97+
) : (
98+
<Button
99+
data-testid={`${testIdLabel}-connect-to-delegate-button`}
100+
onClick={() => openModal({ type: "chooseWallet" })}
101+
size={isMobile ? "medium" : "large"}
102+
sx={{ flex: screenWidth < 768 ? 1 : undefined }}
103+
>
104+
{t("connectToDelegate")}
105+
</Button>
106+
)}
107+
</Box>
108+
);
109+
34110
return (
35111
<Card
36-
{...(inProgress && {
37-
variant: "warning",
38-
label: t("inProgress"),
39-
})}
40-
{...(isSelected && {
41-
variant: "primary",
42-
})}
112+
{...(inProgress && { variant: "warning", label: t("inProgress") })}
113+
{...(isSelected && { variant: "primary" })}
43114
sx={{
44115
alignItems: "center",
45116
bgcolor: (theme) => `${theme.palette.neutralWhite}40`,
@@ -72,15 +143,7 @@ export const AutomatedVotingCard = ({
72143
>
73144
{description}
74145
</Typography>
75-
{transactionId && (
76-
<Button
77-
onClick={onClickShowTransaction}
78-
sx={{ width: "fit-content", p: 0 }}
79-
variant="text"
80-
>
81-
{t("seeTransaction")}
82-
</Button>
83-
)}
146+
{renderTransactionButton()}
84147
</Box>
85148
{!inProgress && !isSelected && (
86149
<>
@@ -90,72 +153,14 @@ export const AutomatedVotingCard = ({
90153
sx={{ ml: screenWidth < 1024 ? 0 : 1 }}
91154
variant={screenWidth < 1024 ? "fullWidth" : "middle"}
92155
/>
93-
<Box
94-
sx={{
95-
alignContent: "flex-start",
96-
display: "flex",
97-
flexDirection: "column",
98-
px: screenWidth < 1024 ? 0 : 4.25,
99-
py: screenWidth < 1024 ? 1 : 0,
100-
width: screenWidth < 1024 ? "100%" : "auto",
101-
}}
102-
>
103-
<Typography color="neutralGray" fontWeight={500} variant="caption">
104-
{t("dRepDirectory.votingPower")}
105-
</Typography>
106-
<Typography sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}>
107-
{"₳ "}
108-
{votingPower}
109-
</Typography>
110-
</Box>
156+
{renderVotingPower()}
111157
<Divider
112158
flexItem
113159
orientation={screenWidth < 1024 ? "horizontal" : "vertical"}
114160
sx={{ mr: screenWidth < 1024 ? 0 : 1 }}
115161
variant={screenWidth < 1024 ? "fullWidth" : "middle"}
116162
/>
117-
<Box
118-
sx={{
119-
display: "flex",
120-
flexDirection: "row",
121-
gap: 2.5,
122-
mt: screenWidth < 1024 ? 3 : 0,
123-
width: screenWidth < 1024 ? "100%" : "auto",
124-
}}
125-
>
126-
<Button
127-
data-testid={`${testIdLabel}-info-button`}
128-
onClick={onClickInfo}
129-
size={isMobile ? "medium" : "large"}
130-
sx={{ flex: screenWidth < 768 ? 1 : undefined }}
131-
variant="outlined"
132-
>
133-
{t("info")}
134-
</Button>
135-
{!isConnected ? (
136-
<Button
137-
data-testid={`${testIdLabel}-connect-to-delegate-button`}
138-
onClick={() => openModal({ type: "chooseWallet" })}
139-
size={isMobile ? "medium" : "large"}
140-
sx={{ flex: screenWidth < 768 ? 1 : undefined }}
141-
>
142-
{t("connectToDelegate")}
143-
</Button>
144-
) : (
145-
!isSelected && (
146-
<Button
147-
data-testid={`${testIdLabel}-delegate-button`}
148-
isLoading={isDelegateLoading}
149-
onClick={onClickDelegate}
150-
size={isMobile ? "medium" : "large"}
151-
sx={{ flex: screenWidth < 768 ? 1 : undefined }}
152-
variant="contained"
153-
>
154-
{t("delegate")}
155-
</Button>
156-
)
157-
)}
158-
</Box>
163+
{renderActionButtons()}
159164
</>
160165
)}
161166
</Card>

‎govtool/frontend/src/components/molecules/CopyableInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const CopyableInfo = ({
3333
<Typography color={gray.c300} fontSize={12} fontWeight={500}>
3434
{label}
3535
</Typography>
36-
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
36+
<Box sx={{ display: "flex", justifyContent: "space-between" }} tabIndex={0}>
3737
<Typography
3838
textOverflow="ellipsis"
3939
overflow="hidden"

‎govtool/frontend/src/components/molecules/DRepInfoCard.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ export const DRepInfoCard = () => {
1818

1919
return (
2020
<Card border elevation={0} sx={{ p: 1.5 }}>
21-
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
21+
<Box
22+
sx={{ display: "flex", justifyContent: "space-between" }}
23+
tabIndex={0}
24+
>
2225
<Typography color={gray.c300} fontSize={12} fontWeight={500}>
2326
{t("myDRepId")}
2427
</Typography>

0 commit comments

Comments
 (0)