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

+3-3
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

+54
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

+13-8
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

+2-2
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

+2-2
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

+5-4
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

+1-1
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

+2-2
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";

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

File renamed without changes.

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/AddNewLicensePageView.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import TextField from "@mui/material/TextField";
33
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
44
import { type FC } from "react";
55
import { Link as RouterLink } from "react-router-dom";
6-
import { Fieldset } from "components/DeploySettingsLayout/Fieldset";
7-
import { Header } from "components/DeploySettingsLayout/Header";
86
import { FileUpload } from "components/FileUpload/FileUpload";
97
import { displayError } from "components/GlobalSnackbar/utils";
108
import { Stack } from "components/Stack/Stack";
119
import { ErrorAlert } from "components/Alert/ErrorAlert";
12-
import { DividerWithText } from "pages/DeploySettingsPage/LicensesSettingsPage/DividerWithText";
10+
import { DividerWithText } from "./DividerWithText";
11+
import { Fieldset } from "../Fieldset";
12+
import { Header } from "../Header";
1313

1414
type AddNewLicenseProps = {
1515
onSaveLicenseKey: (license: string) => void;

‎site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import Button from "@mui/material/Button";
33
import Skeleton from "@mui/material/Skeleton";
44
import AddIcon from "@mui/icons-material/AddOutlined";
55
import RefreshIcon from "@mui/icons-material/Refresh";
6-
import type { GetLicensesResponse } from "api/api";
7-
import { Header } from "components/DeploySettingsLayout/Header";
8-
import { LicenseCard } from "./LicenseCard";
9-
import { Stack } from "components/Stack/Stack";
6+
import MuiLink from "@mui/material/Link";
7+
import Tooltip from "@mui/material/Tooltip";
8+
import LoadingButton from "@mui/lab/LoadingButton";
109
import { type FC } from "react";
1110
import Confetti from "react-confetti";
1211
import { Link } from "react-router-dom";
1312
import useWindowSize from "react-use/lib/useWindowSize";
14-
import MuiLink from "@mui/material/Link";
15-
import Tooltip from "@mui/material/Tooltip";
16-
import LoadingButton from "@mui/lab/LoadingButton";
13+
import type { GetLicensesResponse } from "api/api";
14+
import { Stack } from "components/Stack/Stack";
15+
import { LicenseCard } from "./LicenseCard";
16+
import { Header } from "../Header";
1717

1818
type Props = {
1919
showConfetti: boolean;

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

+2-2
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 { NetworkSettingsPageView } from "./NetworkSettingsPageView";
66

77
const NetworkSettingsPage: FC = () => {

‎site/src/pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPageView.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,22 @@
1+
import { type FC } from "react";
12
import type { ClibaseOption } from "api/typesGenerated";
23
import { Badges, EnabledBadge, DisabledBadge } from "components/Badges/Badges";
3-
import { Header } from "components/DeploySettingsLayout/Header";
4-
import OptionsTable from "components/DeploySettingsLayout/OptionsTable";
54
import { Stack } from "components/Stack/Stack";
65
import {
76
deploymentGroupHasParent,
87
useDeploymentOptions,
98
} from "utils/deployOptions";
109
import { docs } from "utils/docs";
10+
import { Header } from "../Header";
11+
import OptionsTable from "../OptionsTable";
1112

1213
export type NetworkSettingsPageViewProps = {
1314
options: ClibaseOption[];
1415
};
1516

16-
export const NetworkSettingsPageView = ({
17+
export const NetworkSettingsPageView: FC<NetworkSettingsPageViewProps> = ({
1718
options: options,
18-
}: NetworkSettingsPageViewProps): JSX.Element => (
19+
}) => (
1920
<Stack direction="column" spacing={6}>
2021
<div>
2122
<Header

‎site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/CreateOAuth2AppPageView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { type FC } from "react";
44
import { Link } from "react-router-dom";
55
import type * as TypesGen from "api/typesGenerated";
66
import { ErrorAlert } from "components/Alert/ErrorAlert";
7-
import { Header } from "components/DeploySettingsLayout/Header";
87
import { Stack } from "components/Stack/Stack";
98
import { OAuth2AppForm } from "./OAuth2AppForm";
9+
import { Header } from "../Header";
1010

1111
type CreateOAuth2AppProps = {
1212
isUpdating: boolean;

‎site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ import { Alert } from "components/Alert/Alert";
1717
import { ErrorAlert } from "components/Alert/ErrorAlert";
1818
import { CodeExample } from "components/CodeExample/CodeExample";
1919
import { CopyableValue } from "components/CopyableValue/CopyableValue";
20-
import { Header } from "components/DeploySettingsLayout/Header";
2120
import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
2221
import { DeleteDialog } from "components/Dialogs/DeleteDialog/DeleteDialog";
2322
import { Loader } from "components/Loader/Loader";
2423
import { Stack } from "components/Stack/Stack";
2524
import { TableLoader } from "components/TableLoader/TableLoader";
2625
import { createDayString } from "utils/createDayString";
2726
import { OAuth2AppForm } from "./OAuth2AppForm";
27+
import { Header } from "../Header";
2828

2929
export type MutatingResource = {
3030
updateApp: boolean;

‎site/src/pages/DeploySettingsPage/OAuth2AppsSettingsPage/OAuth2AppsSettingsPageView.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ import {
1919
EnterpriseBadge,
2020
EntitledBadge,
2121
} from "components/Badges/Badges";
22-
import { Header } from "components/DeploySettingsLayout/Header";
2322
import { TableLoader } from "components/TableLoader/TableLoader";
2423
import { Stack } from "components/Stack/Stack";
2524
import { useClickableTableRow } from "hooks/useClickableTableRow";
25+
import { Header } from "../Header";
2626

2727
type OAuth2AppsSettingsProps = {
2828
apps?: TypesGen.OAuth2ProviderApp[];

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { useDashboard } from "components/Dashboard/DashboardProvider";
2-
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout";
3-
import { FC } from "react";
1+
import { type FC } from "react";
42
import { Helmet } from "react-helmet-async";
53
import { pageTitle } from "utils/page";
4+
import { useDashboard } from "components/Dashboard/DashboardProvider";
5+
import { useDeploySettings } from "../DeploySettingsLayout";
66
import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
77

88
const ObservabilitySettingsPage: FC = () => {

‎site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,25 @@
1+
import { type FC } from "react";
12
import type { ClibaseOption } from "api/typesGenerated";
3+
import { deploymentGroupHasParent } from "utils/deployOptions";
4+
import { docs } from "utils/docs";
25
import {
36
Badges,
47
DisabledBadge,
58
EnabledBadge,
69
EnterpriseBadge,
710
} from "components/Badges/Badges";
8-
import { Header } from "components/DeploySettingsLayout/Header";
9-
import OptionsTable from "components/DeploySettingsLayout/OptionsTable";
1011
import { Stack } from "components/Stack/Stack";
11-
import { deploymentGroupHasParent } from "utils/deployOptions";
12-
import { docs } from "utils/docs";
12+
import { Header } from "../Header";
13+
import OptionsTable from "../OptionsTable";
1314

1415
export type ObservabilitySettingsPageViewProps = {
1516
options: ClibaseOption[];
1617
featureAuditLogEnabled: boolean;
1718
};
18-
export const ObservabilitySettingsPageView = ({
19-
options: options,
20-
featureAuditLogEnabled,
21-
}: ObservabilitySettingsPageViewProps): JSX.Element => {
19+
20+
export const ObservabilitySettingsPageView: FC<
21+
ObservabilitySettingsPageViewProps
22+
> = ({ options: options, featureAuditLogEnabled }) => {
2223
return (
2324
<>
2425
<Stack direction="column" spacing={6}>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import CheckCircleOutlined from "@mui/icons-material/CheckCircleOutlined";
22
import { css, useTheme } from "@emotion/react";
33
import { type HTMLAttributes, type PropsWithChildren, type FC } from "react";
44
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
5-
import { DisabledBadge, EnabledBadge } from "../Badges/Badges";
5+
import { DisabledBadge, EnabledBadge } from "components/Badges/Badges";
66

77
export const OptionName: FC<PropsWithChildren> = ({ children }) => {
88
return <span css={{ display: "block" }}>{children}</span>;

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
OptionDescription,
1414
OptionName,
1515
OptionValue,
16-
} from "components/DeploySettingsLayout/Option";
16+
} from "./Option";
1717
import { optionValue } from "./optionValue";
1818

1919
interface OptionsTableProps {

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { useDashboard } from "components/Dashboard/DashboardProvider";
2-
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout";
3-
import { FC } from "react";
1+
import { type FC } from "react";
42
import { Helmet } from "react-helmet-async";
53
import { pageTitle } from "utils/page";
4+
import { useDashboard } from "components/Dashboard/DashboardProvider";
65
import { SecuritySettingsPageView } from "./SecuritySettingsPageView";
6+
import { useDeploySettings } from "../DeploySettingsLayout";
77

88
const SecuritySettingsPage: FC = () => {
99
const { deploymentValues: deploymentValues } = useDeploySettings();

0 commit comments

Comments
 (0)