3pp-mirror/pomerium
1
0
Fork 0
mirror of https://github.com/pomerium/pomerium.git synced 2025-07-16 00:06:31 +02:00
Code Issues Projects Releases Packages Wiki Activity

core/ui: improve frontend build size (#5109)

Browse source 
* core/ui: improve frontend build size

* remove luxon

* add lodash

* remove console.log

* only generate sourcemap when watching
This commit is contained in:
Caleb Doxsey 2024-05-09 07:10:00 -06:00 • committed by GitHub
parent d225288ab3
commit ab388211f2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
36 changed files with 358 additions and 297 deletions
Download patch file Download diff file Expand all files Collapse all files

14
ui/src/components/AlertDialog.tsx
View file

@ -1,8 +1,12 @@
import Alert, { AlertColor } from "@mui/material/Alert";
import Dialog, { DialogProps } from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import {
Alert,
AlertColor,
Dialog,
DialogActions,
DialogContent,
DialogProps,
DialogTitle,
} from "@mui/material";
import React, { FC } from "react";
export type AlertDialogProps = DialogProps & {

4
ui/src/components/Avatar.tsx
View file

@ -1,5 +1,5 @@
import MuiAvatar from "@mui/material/Avatar";
import { isArray } from "lodash";
import { Avatar as MuiAvatar } from "@mui/material";
import isArray from "lodash/isArray";
import React from "react";
import { User } from "react-feather";

6
ui/src/components/ClaimRow.tsx
View file

@ -1,6 +1,6 @@
import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow";
import { isArray, startCase } from "lodash";
import { TableCell, TableRow } from "@mui/material";
import isArray from "lodash/isArray";
import startCase from "lodash/startCase";
import React, { FC } from "react";
import ClaimValue from "./ClaimValue";

6
ui/src/components/ClaimValue.tsx
View file

@ -1,7 +1,7 @@
import IDField from "./IDField";
import { DateTime } from "luxon";
import React, { FC } from "react";
import IDField from "./IDField";
const unixSecondTimestampFields = new Set(["exp", "iat", "nbf", "auth_time"]);
const idFields = new Set(["groups", "jti", "oid", "tid", "wids"]);
@ -12,7 +12,7 @@ type ClaimValueProps = {
};
const ClaimValue: FC<ClaimValueProps> = ({ claimKey, claimValue }) => {
if (unixSecondTimestampFields.has(claimKey)) {
return <>{DateTime.fromMillis((claimValue as number) * 1000).toISO()}</>;
return <>{new Date((claimValue as number) * 1000).toISOString()}</>;
}
if (idFields.has(claimKey)) {

23
ui/src/components/DeviceCredentialsTable.tsx
View file

@ -1,14 +1,17 @@
import IDField from "./IDField";
import Alert from "@mui/material/Alert";
import Button from "@mui/material/Button";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import {
Alert,
Button,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import React, { FC } from "react";
import IDField from "./IDField";
export type DeviceCredentialsTableProps = {
csrfToken: string;
ids: string[];
@ -17,7 +20,7 @@ export type DeviceCredentialsTableProps = {
export const DeviceCredentialsTable: FC<DeviceCredentialsTableProps> = ({
csrfToken,
ids,
webAuthnUrl
webAuthnUrl,
}) => {
return (
<TableContainer>

34
ui/src/components/ErrorPage.tsx
View file

@ -1,14 +1,17 @@
import { ListItemProps, TableCell } from "@mui/material";
import Alert from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Typography from "@mui/material/Typography";
import {
Alert,
AlertTitle,
Box,
Container,
ListItemProps,
Paper,
Stack,
Table,
TableCell,
TableHead,
TableRow,
Typography,
} from "@mui/material";
import Markdown from "markdown-to-jsx";
import React, { FC } from "react";
import { CheckCircle, MinusCircle, XCircle } from "react-feather";
@ -20,7 +23,7 @@ type PolicyEvaluationTraceDetailsProps = {
trace: PolicyEvaluationTrace;
} & ListItemProps;
const PolicyEvaluationTraceDetails: FC<PolicyEvaluationTraceDetailsProps> = ({
trace
trace,
}) => {
return (
<TableRow>
@ -58,10 +61,11 @@ export const ErrorPage: FC<ErrorPageProps> = ({ data }) => {
<Paper sx={{ overflow: "hidden" }}>
<Stack>
<Box sx={{ padding: "16px" }}>
<Alert severity={status < 200 || status >= 300 ? "error" : "success"}>
<Alert
severity={status < 200 || status >= 300 ? "error" : "success"}
>
<AlertTitle>
{status}{" "}
{data?.statusText || "Internal Server Error"}
{status} {data?.statusText || "Internal Server Error"}
</AlertTitle>
{data?.description ? (
<Markdown>{data.description}</Markdown>

2
ui/src/components/ExperimentalIcon.tsx
View file

@ -6,7 +6,7 @@ const ExperimentalIcon = createSvgIcon(
<path
d="M20.5 19.34 16.14 12a1 1 0 0 1-.14-.51V2.5a.5.5 0 0 1 .5-.5H18a1 1 0 0 0 0-2H6a1 1 0 0 0 0 2h1.5a.5.5 0 0 1 .5.5v9a1 1 0 0 1-.14.51l-4.32 7.27A3 3 0 0 0 6 24h12a3 3 0 0 0 2.49-4.66ZM8.67 16a.5.5 0 0 1-.43-.25.5.5 0 0 1 0-.5l1.62-2.74A1 1 0 0 0 10 12V2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5v2.75a.5.5 0 0 1-.5.5h-1.32a.75.75 0 0 0 0 1.5h1.32a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1.32a.75.75 0 0 0 0 1.5h1.32a.5.5 0 0 1 .5.5V12a1 1 0 0 0 .14.51l1.61 2.74a.47.47 0 0 1 0 .5.52.52 0 0 1-.44.25Zm.82 5.82a1.5 1.5 0 1 1 1.5-1.5 1.5 1.5 0 0 1-1.5 1.5Zm4.22-3a1 1 0 0 1 0-2 1 1 0 0 1 0 2Zm2.49 3.09a1 1 0 1 1 1-1 1 1 0 0 1-1 .98Z"
style={{
fill: "#5e6a82"
fill: "#5e6a82",
}}
transform="scale(.83333)"
/>

4
ui/src/components/Footer.tsx
View file

@ -1,6 +1,4 @@
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { AppBar, Box, Stack } from "@mui/material";
import React, { FC } from "react";
import { FooterLink } from "./FooterLink";

8
ui/src/components/FooterLink.tsx
View file

@ -1,9 +1,9 @@
import * as React from 'react';
import { styled } from '@mui/system';
import {Link} from "@mui/material";
import { Link } from "@mui/material";
import { styled } from "@mui/system";
import * as React from "react";
export const FooterLink = styled(Link)(({ theme }) => ({
fontSize: '1.25rem',
fontSize: "1.25rem",
fontWeight: `bold`,
color: theme.palette.background.default,
}));

16
ui/src/components/GroupDetails.tsx
View file

@ -1,10 +1,12 @@
import Alert from "@mui/material/Alert";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import {
Alert,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
} from "@mui/material";
import React, { FC } from "react";
import { Group } from "../types";

12
ui/src/components/Header.tsx
View file

@ -1,16 +1,16 @@
import {
AppBar,
Box,
Drawer,
IconButton,
Menu,
MenuItem,
Toolbar,
styled,
useMediaQuery,
useTheme,
} from "@mui/material";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import { useTheme } from "@mui/material/styles";
import styled from "@mui/material/styles/styled";
import { get } from "lodash";
import get from "lodash/get";
import React, { FC, useState } from "react";
import { ChevronLeft, ChevronRight, Menu as MenuIcon } from "react-feather";

4
ui/src/components/HeroSection.tsx
View file

@ -1,6 +1,4 @@
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import { Paper, Stack, Typography } from "@mui/material";
import React, { FC } from "react";
export type HeroSectionProps = {

2
ui/src/components/IDField.tsx
View file

@ -1,4 +1,4 @@
import Box from "@mui/material/Box";
import { Box } from "@mui/material";
import React, { FC } from "react";
export type IDFieldProps = {

10
ui/src/components/JwtIcon.tsx
View file

@ -13,7 +13,7 @@ const JwtIcon = createSvgIcon(
stroke: "none",
fillRule: "evenodd",
fill: "#fff",
fillOpacity: 1
fillOpacity: 1,
}}
d="M8.586 4.04 8.57.042H6.34l.015 3.996L7.47 5.57ZM6.355 10.887v4.008h2.23v-4.008L7.47 9.355Zm0 0"
/>
@ -22,7 +22,7 @@ const JwtIcon = createSvgIcon(
stroke: "none",
fillRule: "evenodd",
fill: "#00f2e6",
fillOpacity: 1
fillOpacity: 1,
}}
d="m8.586 10.887 2.344 3.238 1.797-1.309-2.344-3.238L8.586 9ZM6.355 4.04 3.996.8 2.2 2.11l2.344 3.238 1.812.578Zm0 0"
/>
@ -31,7 +31,7 @@ const JwtIcon = createSvgIcon(
stroke: "none",
fillRule: "evenodd",
fill: "#00b9f1",
fillOpacity: 1
fillOpacity: 1,
}}
d="m4.543 5.348-3.8-1.235-.684 2.11 3.804 1.246 1.797-.594ZM9.266 8.05l1.117 1.528 3.8 1.235.684-2.11-3.805-1.234Zm0 0"
/>
@ -40,7 +40,7 @@ const JwtIcon = createSvgIcon(
stroke: "none",
fillRule: "evenodd",
fill: "#d63aff",
fillOpacity: 1
fillOpacity: 1,
}}
d="m11.063 7.469 3.804-1.246-.683-2.11-3.801 1.235-1.117 1.527ZM3.863 7.469.06 8.703l.683 2.11 3.801-1.235L5.66 8.051Zm0 0"
/>
@ -49,7 +49,7 @@ const JwtIcon = createSvgIcon(
stroke: "none",
fillRule: "evenodd",
fill: "#fb015b",
fillOpacity: 1
fillOpacity: 1,
}}
d="m4.543 9.578-2.344 3.238 1.797 1.309 2.36-3.238V9ZM10.383 5.348l2.344-3.239L10.93.801 8.586 4.039v1.887Zm0 0"
/>

5
ui/src/components/Logo.tsx
View file

@ -1,7 +1,6 @@
import React from "react";
import type { FC } from "react";
import React, { FC } from "react";
const Logo: FC<{src: string}> = ({src}) => {
const Logo: FC<{ src: string }> = ({ src }) => {
return <img alt="Logo" src={src} height="30px" />;
};

2
ui/src/components/PersonIcon.tsx
View file

@ -1,4 +1,4 @@
import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
import { SvgIcon, SvgIconProps } from "@mui/material";
import React, { FC } from "react";
import { User } from "react-feather";

19
ui/src/components/Section.tsx
View file

@ -1,11 +1,8 @@
import SectionFooter from "./SectionFooter";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { Box, Paper, Stack, Toolbar, Typography } from "@mui/material";
import React, { FC } from "react";
import SectionFooter from "./SectionFooter";
export type SectionProps = React.PropsWithChildren<{
title: React.ReactNode;
icon?: React.ReactNode;
@ -15,16 +12,16 @@ export const Section: FC<SectionProps> = ({
title,
icon,
children,
footer
footer,
}) => {
return (
<Paper sx={{ overflow: "hidden" }}>
<Stack>
<Toolbar>
<Typography variant="h4">
{title}
</Typography>
{!!icon && (<Box sx={{marginLeft: (theme) => theme.spacing(3)}}>{icon}</Box>)}
<Typography variant="h4">{title}</Typography>
{!!icon && (
<Box sx={{ marginLeft: (theme) => theme.spacing(3) }}>{icon}</Box>
)}
</Toolbar>
<Box sx={{ padding: 3, paddingTop: 0 }}>{children}</Box>
{footer ? (

5
ui/src/components/SectionFooter.tsx
View file

@ -1,9 +1,8 @@
import Box from "@mui/material/Box";
import styled from "@mui/material/styles/styled";
import { Box, styled } from "@mui/material";
import React, { FC } from "react";
export const SectionFooter = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.grey[100],
padding: theme.spacing(3)
padding: theme.spacing(3),
}));
export default SectionFooter;

18
ui/src/components/SessionDetails.tsx
View file

@ -1,11 +1,13 @@
import Alert from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";
import Stack from "@mui/material/Stack";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableRow from "@mui/material/TableRow";
import {
Alert,
AlertTitle,
Stack,
Table,
TableBody,
TableCell,
TableContainer,
TableRow,
} from "@mui/material";
import React, { FC } from "react";
import { Profile, Session } from "../types";

6
ui/src/components/SessionDeviceCredentials.tsx
View file

@ -1,8 +1,4 @@
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Stack from "@mui/material/Stack";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { Box, Paper, Stack, Toolbar, Typography } from "@mui/material";
import React, { FC } from "react";
import DeviceCredentialsTable from "../components/DeviceCredentialsTable";

20
ui/src/components/SignOutConfirmPage.tsx
View file

@ -1,13 +1,15 @@
import Button from "@mui/material/Button";
import Container from "@mui/material/Container";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import styled from "@mui/material/styles/styled";
import {
Button,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
} from "@mui/material";
import React, { FC } from "react";
import { SignOutConfirmPageData } from "src/types";
import { SignOutConfirmPageData } from "../types";
type SignOutConfirmPageProps = {
data: SignOutConfirmPageData;

6
ui/src/components/SignedOutPage.tsx
View file

@ -1,7 +1,7 @@
import { Alert } from "@mui/material";
import Container from "@mui/material/Container";
import { Alert, Container } from "@mui/material";
import React, { FC } from "react";
import { SignedOutPageData } from "src/types";
import { SignedOutPageData } from "../types";
type SignedOutPageProps = {
data: SignedOutPageData;

6
ui/src/components/ToolbarOffset.tsx
View file

@ -1,6 +1,6 @@
import styled from "@mui/material/styles/styled";
import {BaseCSSProperties} from "@mui/material/styles/createMixins";
import { styled } from "@mui/material";
import { BaseCSSProperties } from "@mui/material/styles/createMixins";
export const ToolbarOffset = styled('div')(({ theme }) => ({
export const ToolbarOffset = styled("div")(({ theme }) => ({
...(theme.mixins.toolbar as BaseCSSProperties),
}));

8
ui/src/components/UserInfoPage.tsx
View file

@ -1,20 +1,20 @@
import {
Button,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle,
Drawer,
Stack,
useMediaQuery,
useTheme,
} from "@mui/material";
import Container from "@mui/material/Container";
import Stack from "@mui/material/Stack";
import { useTheme } from "@mui/material/styles";
import React, { FC, useContext, useEffect, useState } from "react";
import { UserInfoData } from "src/types";
import { SubpageContext } from "../context/Subpage";
import { UserInfoData } from "../types";
import GroupDetails from "./GroupDetails";
import SessionDetails from "./SessionDetails";
import SessionDeviceCredentials from "./SessionDeviceCredentials";

49
ui/src/components/UserSidebarContent.tsx
View file

@ -1,8 +1,14 @@
import React, {FC, ReactNode, useContext} from "react";
import {SubpageContext} from "../context/Subpage";
import {List, ListItemButton, ListItemIcon, ListItemText} from "@mui/material";
import {User, Users} from "react-feather";
import {Devices} from "@mui/icons-material";
import { Devices } from "@mui/icons-material";
import {
List,
ListItemButton,
ListItemIcon,
ListItemText,
} from "@mui/material";
import React, { FC, ReactNode, useContext } from "react";
import { User, Users } from "react-feather";
import { SubpageContext } from "../context/Subpage";
export interface Subpage {
icon: ReactNode;
@ -11,45 +17,44 @@ export interface Subpage {
export const sectionList: Subpage[] = [
{
title: 'User',
icon: <User />
title: "User",
icon: <User />,
},
{
title: 'Groups Info',
icon: <Users />
title: "Groups Info",
icon: <Users />,
},
{
title: 'Devices Info',
icon: <Devices />
title: "Devices Info",
icon: <Devices />,
},
]
];
type UserSidebarContent = {
close: () => void | null;
};
export const UserSidebarContent:FC<UserSidebarContent> = ({close}:UserSidebarContent):JSX.Element => {
export const UserSidebarContent: FC<UserSidebarContent> = ({
close,
}: UserSidebarContent): JSX.Element => {
const info = useContext(SubpageContext);
return (
<List>
{sectionList.map(({title, icon}) => {
{sectionList.map(({ title, icon }) => {
return (
<ListItemButton
key={'tab ' + title}
key={"tab " + title}
selected={title === info.subpage}
onClick={() => {
info.setSubpage(title)
info.setSubpage(title);
!!close && close();
}}
>
<ListItemIcon>
{icon}
</ListItemIcon>
<ListItemIcon>{icon}</ListItemIcon>
<ListItemText primary={title} />
</ListItemButton>
)
);
})}
</List>
);
}
};
export default UserSidebarContent;

2
ui/src/components/WebAuthnAuthenticateButton.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useRef, useState } from "react";
import React, { FC } from "react";
import { WebAuthnRequestOptions } from "../types";
import { decode, encodeUrl } from "../util/base64";

2
ui/src/components/WebAuthnButton.tsx
View file

@ -1,4 +1,4 @@
import Button, { ButtonProps } from "@mui/material/Button";
import { Button, ButtonProps } from "@mui/material";
import React, { FC, useRef, useState } from "react";
import AlertDialog from "./AlertDialog";

4
ui/src/components/WebAuthnRegistrationPage.tsx
View file

@ -1,7 +1,7 @@
import Stack from "@mui/material/Stack";
import { Stack } from "@mui/material";
import React, { FC } from "react";
import { WebAuthnRegistrationPageData } from "src/types";
import { WebAuthnRegistrationPageData } from "../types";
import ExperimentalIcon from "./ExperimentalIcon";
import Section from "./Section";
import WebAuthnAuthenticateButton from "./WebAuthnAuthenticateButton";