Skip to content

Commit f55175f

Browse files
joshrijoshri
committed
adds window mock to test-utils, plus various fixes to yaml header, filter dialog button, and detail modal background
1 parent 94f3f2b commit f55175f

File tree

16 files changed

+72
-44
lines changed

16 files changed

+72
-44
lines changed

‎ui/components/Breadcrumbs.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import qs from "query-string";
22
import React from "react";
33
import { useLocation } from "react-router-dom";
4-
import styled from "styled-components";
4+
import styled, { useTheme } from "styled-components";
55
import useNavigation from "../hooks/navigation";
66
import { formatURL, getPageLabel, getParentNavValue } from "../lib/nav";
77
import { V2Routes } from "../lib/types";
@@ -15,7 +15,8 @@ export const Breadcrumbs = () => {
1515
const parentValue = getParentNavValue(currentPage) as V2Routes;
1616
const label = getPageLabel(parentValue);
1717
const parsed = qs.parse(search);
18-
18+
const theme = useTheme();
19+
console.log(theme);
1920
return (
2021
<Flex align>
2122
<Link

‎ui/components/CopyToCliboard.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Icon, { IconType } from "./Icon";
66

77
const CopyButton = styled(IconButton)`
88
&.MuiButton-outlinedPrimary {
9-
border: 1px solid ${(props) => props.theme.colors.neutral10};
9+
margin-left: ${(props) => props.theme.spacing.xxs};
1010
padding: ${(props) => props.theme.spacing.xxs};
1111
}
1212
&.MuiButton-root {

‎ui/components/DataTable/DataTable.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -374,7 +374,10 @@ export const DataTable = styled(UnstyledDataTable)`
374374
transition: background 0.5s ease-in-out;
375375
}
376376
.MuiTableRow-root:not(.MuiTableRow-head):hover {
377-
background: ${(props) => props.theme.colors.neutral10};
377+
background: ${(props) =>
378+
props.theme.colors.black === "#fff"
379+
? props.theme.colors.blueWithOpacity
380+
: props.theme.colors.neutral10};
378381
transition: background 0.5s ease-in-out;
379382
}
380383
table {
@@ -399,6 +402,13 @@ export const DataTable = styled(UnstyledDataTable)`
399402
.filter-options-chip {
400403
background-color: ${(props) => props.theme.colors.neutralGray};
401404
}
405+
//override so filter dialog button stays highlighted, but color is too bright in dark mode
406+
.MuiButton-contained {
407+
${(props) =>
408+
props.theme.colors.black === "#fff"
409+
? `background-color: ${props.theme.colors.neutral10};`
410+
: null}
411+
}
402412
`;
403413

404414
export default DataTable;

‎ui/components/DataTable/__tests__/__snapshots__/DataTable.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@ exports[`DataTable snapshots renders 1`] = `
314314
}
315315
316316
.c1 .filter-options-chip {
317-
background-color: #E5F7FD;
317+
background-color: #F6F7F9;
318318
}
319319
320320
<div

‎ui/components/DetailModal.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ function DetailModal({ object, className }: DetailViewProps) {
5959
}
6060

6161
export default styled(DetailModal).attrs({ className: DetailModal.name })`
62-
background: ${(props) => props.theme.colors.white};
6362
height: 100%;
6463
padding: ${(props) =>
6564
props.theme.spacing.small + " " + props.theme.spacing.medium};

‎ui/components/Nav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const NavContent = styled.div<{ collapsed: boolean }>`
8080
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
8181
&.selected,
8282
:hover {
83-
background-color: rgba(0, 179, 236, 0.1);
83+
background-color: ${(props) => props.theme.colors.blueWithOpacity};
8484
}
8585
}
8686
.header {

‎ui/components/YamlView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export type YamlViewProps = {
1414
};
1515

1616
const YamlHeader = styled.div`
17-
background: ${(props) => props.theme.colors.neutral10};
17+
background: ${(props) => props.theme.colors.neutralGray};
1818
padding: ${(props) => props.theme.spacing.small};
1919
width: 100%;
2020
border-bottom: 1px solid ${(props) => props.theme.colors.neutral20};

‎ui/components/__tests__/__snapshots__/Footer.test.tsx.snap

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,12 @@ exports[`Footer snapshots default 1`] = `
9191
}
9292
9393
.c1 {
94+
max-width: 100%;
95+
box-sizing: border-box;
96+
background: #F6F7F9;
9497
color: #737373;
95-
padding-top: 12px;
98+
padding: 24px;
99+
border-radius: 0 0 8px 8px;
96100
}
97101
98102
<footer
@@ -307,8 +311,12 @@ exports[`Footer snapshots no api version 1`] = `
307311
}
308312
309313
.c1 {
314+
max-width: 100%;
315+
box-sizing: border-box;
316+
background: #F6F7F9;
310317
color: #737373;
311-
padding-top: 12px;
318+
padding: 24px;
319+
border-radius: 0 0 8px 8px;
312320
}
313321
314322
<footer

‎ui/components/__tests__/__snapshots__/MessageBox.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ exports[`MessageBox snapshots renders 1`] = `
2121
width: 560px;
2222
padding: 24px 48px 64px;
2323
border-radius: 10px;
24-
background-color: #ffffffd9;
24+
background-color: #F6F7F9;
2525
color: #737373;
2626
}
2727

‎ui/components/__tests__/__snapshots__/Metadata.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ exports[`Metadata snapshots renders with data 1`] = `
128128
margin-right: 4px;
129129
border-radius: 15px;
130130
white-space: nowrap;
131-
background-color: #d8d8d8;
131+
background-color: #F6F7F9;
132132
}
133133
134134
.c9 {

‎ui/components/__tests__/__snapshots__/Page.test.tsx.snap

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ exports[`Page snapshots default 1`] = `
4040
justify-content: flex-start;
4141
}
4242
43-
.c4 {
43+
.c5 {
4444
display: -webkit-box;
4545
display: -webkit-flex;
4646
display: -ms-flexbox;
@@ -59,7 +59,7 @@ exports[`Page snapshots default 1`] = `
5959
justify-content: space-between;
6060
}
6161
62-
.c6 {
62+
.c7 {
6363
display: -webkit-box;
6464
display: -webkit-flex;
6565
display: -ms-flexbox;
@@ -73,7 +73,7 @@ exports[`Page snapshots default 1`] = `
7373
align-items: start;
7474
}
7575
76-
.c7 {
76+
.c8 {
7777
font-family: 'proxima-nova',Helvetica,Arial,sans-serif;
7878
font-size: 14px;
7979
font-weight: 400;
@@ -82,7 +82,7 @@ exports[`Page snapshots default 1`] = `
8282
white-space: nowrap;
8383
}
8484
85-
.c10 {
85+
.c11 {
8686
font-family: 'proxima-nova',Helvetica,Arial,sans-serif;
8787
font-size: 14px;
8888
font-weight: 400;
@@ -91,22 +91,26 @@ exports[`Page snapshots default 1`] = `
9191
color: #00b3ec;
9292
}
9393
94-
.c8 {
94+
.c9 {
9595
padding: 4px;
9696
}
9797
98-
.c9 {
98+
.c10 {
9999
-webkit-text-decoration: none;
100100
text-decoration: none;
101101
}
102102
103-
.c11 {
103+
.c12 {
104104
padding-right: 24px;
105105
}
106106
107-
.c5 {
107+
.c6 {
108+
max-width: 100%;
109+
box-sizing: border-box;
110+
background: #F6F7F9;
108111
color: #737373;
109-
padding-top: 12px;
112+
padding: 24px;
113+
border-radius: 0 0 8px 8px;
110114
}
111115
112116
.c1 {
@@ -116,10 +120,15 @@ exports[`Page snapshots default 1`] = `
116120
margin: 0 auto;
117121
min-height: 100%;
118122
max-width: 100%;
123+
}
124+
125+
.c4 {
119126
padding-bottom: 24px;
120127
padding-left: 24px;
121128
padding-right: 24px;
122129
padding-top: 24px;
130+
max-width: 100%;
131+
box-sizing: border-box;
123132
overflow: hidden;
124133
}
125134
@@ -131,32 +140,32 @@ exports[`Page snapshots default 1`] = `
131140
className="c0 c1 c2"
132141
>
133142
<div
134-
className="c3"
143+
className="c3 c4"
135144
/>
136145
<footer
137-
className="c4 c5 Footer"
146+
className="c5 c6 Footer"
138147
role="footer"
139148
>
140149
<div
141-
className="c6"
150+
className="c7"
142151
>
143152
<span
144-
className="c7"
153+
className="c8"
145154
size="medium"
146155
>
147156
Need help? Contact us at
148157
</span>
149158
<div
150-
className="c8"
159+
className="c9"
151160
/>
152161
<a
153-
className="c9"
162+
className="c10"
154163
href="mailto:[email protected]"
155164
rel="noreferrer"
156165
target="_blank"
157166
>
158167
<span
159-
className="c10"
168+
className="c11"
160169
color="primary"
161170
size="medium"
162171
>
@@ -165,13 +174,13 @@ exports[`Page snapshots default 1`] = `
165174
</a>
166175
</div>
167176
<div
168-
className="c6 c11"
177+
className="c7 c12"
169178
>
170179
<div
171-
className="c8"
180+
className="c9"
172181
/>
173182
<span
174-
className="c7"
183+
className="c8"
175184
size="medium"
176185
>
177186
©

‎ui/lib/test-utils.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {
2020
} from "./api/core/core.pb";
2121
import theme, { muiTheme } from "./theme";
2222
import { RequestError } from "./types";
23-
2423
export type CoreOverrides = {
2524
GetChildObjects?: (req: GetChildObjectsRequest) => GetChildObjectsResponse;
2625
GetReconciledObjects?: (
@@ -52,11 +51,14 @@ export const createCoreMockClient = (
5251
return promisified as typeof Core;
5352
};
5453

55-
export function withTheme(element) {
54+
export function withTheme(element, mode: "light" | "dark" = "light") {
55+
const appliedTheme = theme(mode);
5656
return (
57-
<MuiThemeProvider theme={muiTheme}>
58-
<ThemeProvider theme={theme("light")}>{element}</ThemeProvider>
59-
</MuiThemeProvider>
57+
<ThemeProvider theme={appliedTheme}>
58+
<MuiThemeProvider theme={muiTheme(appliedTheme.colors)}>
59+
{element}
60+
</MuiThemeProvider>
61+
</ThemeProvider>
6062
);
6163
}
6264

@@ -76,6 +78,9 @@ export function withContext(
7678
defaultOptions: { queries: { retry: false } },
7779
});
7880
const isElement = React.isValidElement(TestComponent);
81+
window.matchMedia = jest.fn();
82+
//@ts-ignore
83+
window.matchMedia.mockReturnValue({ matches: false });
7984
return (
8085
<Router history={history}>
8186
<AppContextProvider renderFooter {...appProps}>

‎ui/lib/theme.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export const theme = (mode: "light" | "dark"): DefaultTheme => {
8080
whiteToPrimary: "#32324B",
8181
greyToPrimary: "#009CCC",
8282
backGrey: "#32324B",
83+
blueWithOpacity: "rgba(0, 179, 236, 0.1)",
8384
feedbackLight: "#FCE6D2",
8485
feedbackMedium: "#F7BF8E",
8586
feedbackOriginal: "#F2994A",
@@ -119,6 +120,7 @@ export const theme = (mode: "light" | "dark"): DefaultTheme => {
119120
whiteToPrimary: "#fff",
120121
greyToPrimary: "#737373",
121122
backGrey: "#eef0f4",
123+
blueWithOpacity: "rgba(0, 179, 236, 0.1)",
122124
feedbackLight: "#FCE6D2",
123125
feedbackMedium: "#F7BF8E",
124126
feedbackOriginal: "#F2994A",
@@ -257,6 +259,7 @@ export const muiTheme = (colors) =>
257259
MuiPaper: {
258260
root: {
259261
overflowX: "hidden",
262+
backgroundColor: colors.white,
260263
},
261264
},
262265
MuiDrawer: {

‎ui/pages/SignIn.tsx

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -219,9 +219,4 @@ export default styled(SignIn)`
219219
${LoadingPage} {
220220
padding: ${(props) => props.theme.spacing.medium};
221221
}
222-
form {
223-
display: flex;
224-
flex-direction: column;
225-
align-items: center;
226-
}
227222
`;

‎ui/pages/__tests__/Signin.test.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
// Mock out the bg animation component
2-
jest.mock("../../components/Animations/SignInBackground", () => () => null);
3-
41
import { render, screen } from "@testing-library/react";
52
import * as React from "react";
63
import { withContext, withTheme } from "../../lib/test-utils";

‎ui/typedefs/styled.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export namespace colors {
2121
const whiteToPrimary: string;
2222
const greyToPrimary: string;
2323
const backGrey: string;
24+
const blueWithOpacity: string;
2425
const feedbackLight: string;
2526
const feedbackMedium: string;
2627
const feedbackOriginal: string;

0 commit comments

Comments
 (0)