Skip to content

Commit 8c3a4f2

Browse files
aslilacaslilac
authored
chore: move some components into pages/ (#11536)
1 parent e3ad958 commit 8c3a4f2

33 files changed

+167
-105
lines changed

‎site/src/AppRouter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import { FC, lazy, Suspense } from "react";
1+
import { type FC, lazy, Suspense } from "react";
22
import {
33
Route,
44
Routes,
55
BrowserRouter as Router,
66
Navigate,
77
} from "react-router-dom";
88
import { DashboardLayout } from "./components/Dashboard/DashboardLayout";
9-
import { DeploySettingsLayout } from "./components/DeploySettingsLayout/DeploySettingsLayout";
9+
import { DeploySettingsLayout } from "./pages/DeploySettingsPage/DeploySettingsLayout";
1010
import { FullScreenLoader } from "./components/Loader/FullScreenLoader";
1111
import { RequireAuth } from "./components/RequireAuth/RequireAuth";
12-
import { UsersLayout } from "./components/UsersLayout/UsersLayout";
12+
import { UsersLayout } from "./pages/UsersPage/UsersLayout";
1313
import AuditPage from "./pages/AuditPage/AuditPage";
1414
import LoginPage from "./pages/LoginPage/LoginPage";
1515
import { SetupPage } from "./pages/SetupPage/SetupPage";

‎site/src/components/LastSeen/LastSeen.stories.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import dayjs from "dayjs";
3+
import { LastSeen } from "./LastSeen";
4+
5+
const meta: Meta<typeof LastSeen> = {
6+
title: "components/LastSeen",
7+
component: LastSeen,
8+
args: {
9+
// We typically want this component to be excluded from Chromatic's snapshots,
10+
// because it creates a lot of noise when a static dates roles over from eg.
11+
// "2 months ago" to "3 months ago", but these stories use relative dates,
12+
// and test specific cases that we want to be validated.
13+
"data-chromatic": "",
14+
},
15+
};
16+
17+
export default meta;
18+
type Story = StoryObj<typeof LastSeen>;
19+
20+
export const Now: Story = {
21+
args: {
22+
at: dayjs(),
23+
},
24+
};
25+
26+
export const OneDayAgo: Story = {
27+
args: {
28+
at: dayjs().subtract(1, "day"),
29+
},
30+
};
31+
32+
export const OneWeekAgo: Story = {
33+
args: {
34+
at: dayjs().subtract(1, "week"),
35+
},
36+
};
37+
38+
export const OneMonthAgo: Story = {
39+
args: {
40+
at: dayjs().subtract(1, "month"),
41+
},
42+
};
43+
44+
export const OneYearAgo: Story = {
45+
args: {
46+
at: dayjs().subtract(1, "year"),
47+
},
48+
};
49+
50+
export const Never: Story = {
51+
args: {
52+
at: dayjs().subtract(101, "year"),
53+
},
54+
};

‎site/src/components/LastSeen/LastSeen.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,35 @@
11
import { useTheme } from "@emotion/react";
22
import dayjs from "dayjs";
3+
import relativeTime from "dayjs/plugin/relativeTime";
34
import { type FC, type HTMLAttributes } from "react";
45

5-
interface LastSeenProps extends HTMLAttributes<HTMLSpanElement> {
6-
value: string;
6+
dayjs.extend(relativeTime);
7+
8+
interface LastSeenProps
9+
extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
10+
at: dayjs.ConfigType;
11+
"data-chromatic"?: string; // prevents a type error in the stories
712
}
813

9-
export const LastSeen: FC<LastSeenProps> = ({ value, ...attrs }) => {
14+
export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
1015
const theme = useTheme();
11-
const t = dayjs(value);
16+
const t = dayjs(at);
1217
const now = dayjs();
1318

1419
let message = t.fromNow();
1520
let color = theme.palette.text.secondary;
1621

1722
if (t.isAfter(now.subtract(1, "hour"))) {
18-
color = theme.palette.success.light;
1923
// Since the agent reports on a 10m interval,
2024
// the last_used_at can be inaccurate when recent.
2125
message = "Now";
26+
color = theme.experimental.roles.success.fill;
2227
} else if (t.isAfter(now.subtract(3, "day"))) {
23-
color = theme.palette.text.secondary;
28+
color = theme.experimental.l2.text;
2429
} else if (t.isAfter(now.subtract(1, "month"))) {
25-
color = theme.palette.warning.light;
30+
color = theme.experimental.roles.warning.fill;
2631
} else if (t.isAfter(now.subtract(100, "year"))) {
27-
color = theme.palette.error.light;
32+
color = theme.experimental.roles.error.fill;
2833
} else {
2934
message = "Never";
3035
}

‎site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ import { type FC, useState } from "react";
99
import { BlockPicker } from "react-color";
1010
import { useFormik } from "formik";
1111
import type { UpdateAppearanceConfig } from "api/typesGenerated";
12-
import { Header } from "components/DeploySettingsLayout/Header";
1312
import {
1413
Badges,
1514
DisabledBadge,
1615
EnterpriseBadge,
1716
EntitledBadge,
1817
} from "components/Badges/Badges";
19-
import { Fieldset } from "components/DeploySettingsLayout/Fieldset";
2018
import { Stack } from "components/Stack/Stack";
2119
import { getFormHelpers } from "utils/formUtils";
2220
import colors from "theme/tailwindColors";
21+
import { Header } from "../Header";
22+
import { Fieldset } from "../Fieldset";
2323

2424
export type AppearanceSettingsPageViewProps = {
2525
appearance: UpdateAppearanceConfig;

‎site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx renamed to ‎site/src/pages/DeploySettingsPage/DeploySettingsLayout.tsx

File renamed without changes.

‎site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPage.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout";
2-
import { FC } from "react";
1+
import { type FC } from "react";
32
import { Helmet } from "react-helmet-async";
43
import { pageTitle } from "utils/page";
4+
import { useDeploySettings } from "../DeploySettingsLayout";
55
import { ExternalAuthSettingsPageView } from "./ExternalAuthSettingsPageView";
66

77
const ExternalAuthSettingsPage: FC = () => {

‎site/src/pages/DeploySettingsPage/ExternalAuthSettingsPage/ExternalAuthSettingsPageView.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { css } from "@emotion/react";
2+
import { type FC } from "react";
23
import Table from "@mui/material/Table";
34
import TableBody from "@mui/material/TableBody";
45
import TableCell from "@mui/material/TableCell";
@@ -8,16 +9,16 @@ import TableRow from "@mui/material/TableRow";
89
import type { DeploymentValues, ExternalAuthConfig } from "api/typesGenerated";
910
import { Alert } from "components/Alert/Alert";
1011
import { EnterpriseBadge } from "components/Badges/Badges";
11-
import { Header } from "components/DeploySettingsLayout/Header";
12+
import { Header } from "../Header";
1213
import { docs } from "utils/docs";
1314

1415
export type ExternalAuthSettingsPageViewProps = {
1516
config: DeploymentValues;
1617
};
1718

18-
export const ExternalAuthSettingsPageView = ({
19-
config,
20-
}: ExternalAuthSettingsPageViewProps): JSX.Element => {
19+
export const ExternalAuthSettingsPageView: FC<
20+
ExternalAuthSettingsPageViewProps
21+
> = ({ config }) => {
2122
return (
2223
<>
2324
<Header

‎site/src/components/DeploySettingsLayout/Fieldset.tsx renamed to ‎site/src/pages/DeploySettingsPage/Fieldset.tsx

File renamed without changes.

‎site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { pageTitle } from "utils/page";
55
import { deploymentDAUs } from "api/queries/deployment";
66
import { entitlements } from "api/queries/entitlements";
77
import { availableExperiments } from "api/queries/experiments";
8-
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout";
8+
import { useDeploySettings } from "../DeploySettingsLayout";
99
import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
1010

1111
const GeneralSettingsPage: FC = () => {

‎site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import {
1010
ActiveUserChart,
1111
ActiveUsersTitle,
1212
} from "components/ActiveUserChart/ActiveUserChart";
13-
import { Header } from "components/DeploySettingsLayout/Header";
14-
import OptionsTable from "components/DeploySettingsLayout/OptionsTable";
1513
import { Stack } from "components/Stack/Stack";
14+
import { Header } from "../Header";
15+
import OptionsTable from "../OptionsTable";
1616
import { ChartSection } from "./ChartSection";
1717
import { useDeploymentOptions } from "utils/deployOptions";
1818
import { docs } from "utils/docs";

0 commit comments

Comments
 (0)