Skip to content

Commit

Permalink
Merge pull request #844 from jlandowner/ui-user-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@oruharo
oruharo authored Jun 24, 2024
2 parents c40e7f9 + 91dede4 commit 0023dd5
Show file tree
Hide file tree
Showing 9 changed files with 331 additions and 319 deletions.
19 changes: 10 additions & 9 deletions web/dashboard-ui/src/views/atoms/EllipsisTypography.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,13 @@ import {
import React from "react";

export type EllipsisTypographyProps = Omit<TypographyProps, "children"> & {
children: string;
children?: string;
placement?: TooltipProps["placement"];
};

export const EllipsisTypography: React.FC<EllipsisTypographyProps> = ({
children,
placement,
}) => {
export const EllipsisTypography: React.FC<EllipsisTypographyProps> = (
props
) => {
const [isOverflow, setIsOverflow] = React.useState(false);
const paragraph = React.useRef<HTMLSpanElement>(null);

Expand All @@ -25,11 +24,11 @@ export const EllipsisTypography: React.FC<EllipsisTypographyProps> = ({
}
}, [paragraph]);

const title = children;
const title = props.children || "";

// return isOverflow ? (<Tooltip title={title} placement={placement} > {typoglaphy} </Tooltip >) : typoglaphy
return isOverflow ? (
<Tooltip title={title} placement={placement}>
<Tooltip title={title} placement={props.placement}>
<Typography
ref={paragraph}
variant="caption"
Expand All @@ -39,8 +38,9 @@ export const EllipsisTypography: React.FC<EllipsisTypographyProps> = ({
whiteSpace: "nowrap",
overflow: "hidden",
}}
{...props}
>
{children}
{props.children}
</Typography>
</Tooltip>
) : (
Expand All @@ -53,8 +53,9 @@ export const EllipsisTypography: React.FC<EllipsisTypographyProps> = ({
whiteSpace: "nowrap",
overflow: "hidden",
}}
{...props}
>
{children}
{props.children}
</Typography>
);
};
10 changes: 8 additions & 2 deletions web/dashboard-ui/src/views/atoms/NameAvatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,19 @@ export const NameAvatar: React.VFC<{ name?: string } & AvatarProps> = (
props
) => {
return props.name ? (
<Avatar {...props} sx={{ bgcolor: stringToColor(props.name), ...props.sx }}>
<Avatar
{...props}
sx={{
bgcolor: stringToColor(props.name),
...props.sx,
}}
>
<Typography
sx={{
color: (theme) =>
theme.palette.mode === "light" ? "white" : "black",
}}
fontSize="inherit"
variant="body1"
>
{props.name.substring(0, 1).toUpperCase()}
</Typography>
Expand Down
63 changes: 15 additions & 48 deletions web/dashboard-ui/src/views/organisms/NetworkRuleActionDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,38 +264,6 @@ export const NetworkRuleUpsertDialog: React.VFC<{
</Select>
)}
/>
{/* <Select
defaultValue={getValues("inputAccessMode")}
{...registerMui(
register("inputAccessMode", {
pattern: {
value: /^(private|public)$/i,
message: "Invalid",
},
})
)}
onChange={(e) => {
setValue("inputAccessMode", e.target.value);
setOpenAllowedUsers(e.target.value === "private");
}}
>
<MenuItem value="private">
<Stack spacing={2}>
Private
<Typography color="text.secondary" variant="caption">
Authorize user to access this URL.
</Typography>
</Stack>
</MenuItem>
<MenuItem value="public">
<Stack spacing={2}>
Public
<Typography color="text.secondary" variant="caption">
No authentication is required for this URL.
</Typography>
</Stack>
</MenuItem>
</Select> */}
</FormControl>
{openAllowedUsers && (
<Stack>
Expand All @@ -312,9 +280,23 @@ export const NetworkRuleUpsertDialog: React.VFC<{
{openInputAllowedUser ? <ExpandLess /> : <Add />}
</IconButton>
</Box>
<Stack alignItems="center" mb={1}>
<Grid container justifyContent="center" sx={{ width: 300 }}>
{fields.map((v, i) => (
<Grid item key={i}>
<Chip
color="secondary"
key={i}
label={v.name}
sx={{ m: 0.05 }}
onDelete={() => remove(i)}
/>
</Grid>
))}
</Grid>
</Stack>
{openInputAllowedUser && (
<TextField
size="small"
label="User name"
{...register(`inputAllowedUser`)}
InputProps={{
Expand All @@ -339,21 +321,6 @@ export const NetworkRuleUpsertDialog: React.VFC<{
}}
/>
)}
<Stack alignItems="center" mt={1}>
<Grid container justifyContent="center" sx={{ width: 300 }}>
{fields.map((v, i) => (
<Grid item key={i}>
<Chip
color="secondary"
key={i}
label={v.name}
sx={{ m: 0.05 }}
onDelete={() => remove(i)}
/>
</Grid>
))}
</Grid>
</Stack>
</Stack>
)}
{isMain && (
Expand Down
72 changes: 34 additions & 38 deletions web/dashboard-ui/src/views/organisms/UserActionDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ const UserActionDialog: React.FC<UserActionDialogProps> = ({
</IconButton>
</Typography>
<Collapse in={openUserAddon} timeout="auto" unmountOnExit>
<List component="nav">
<List component="nav" dense={true}>
{user.addons.map((v, i) => (
<ListItem key={i}>
<ListItemText
Expand Down Expand Up @@ -424,13 +424,13 @@ export const UserCreateDialog: React.VFC<{ onClose: () => void }> = ({
});

return (
<Dialog open={true} fullWidth maxWidth={"xs"}>
<Dialog open={true} fullWidth>
<DialogTitle>Create New User 🎉</DialogTitle>
<form
onSubmit={handleSubmit((inp: Inputs) => {
console.log(inp);
const userAddons = inp.addons
.filter((v) => v.enable)
.filter((v) => v.enable || v.template.isDefaultUserAddon)
.map((inpAddon) => {
const vars: { [key: string]: string } = {};
inpAddon.vars.forEach((v, i) => {
Expand Down Expand Up @@ -483,9 +483,9 @@ export const UserCreateDialog: React.VFC<{ onClose: () => void }> = ({
pattern: {
value: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/,
message:
'Only lowercase alphanumeric characters or "-" are allowed',
'Only lowercase alphanumeric characters or "-" are allowed (start and end with an alphanumeric character)',
},
maxLength: { value: 128, message: "Max 128 characters" },
maxLength: { value: 50, message: "Max 50 characters" },
})
)}
error={Boolean(errors.id)}
Expand All @@ -503,12 +503,11 @@ export const UserCreateDialog: React.VFC<{ onClose: () => void }> = ({
}}
/>
<TextField
label="Display Name"
label="Display Name (optional)"
fullWidth
{...registerMui(
register("name", {
required: { value: true, message: "Required" },
maxLength: { value: 32, message: "Max 32 characters" },
maxLength: { value: 50, message: "Max 50 characters" },
})
)}
error={Boolean(errors.name)}
Expand All @@ -526,7 +525,7 @@ export const UserCreateDialog: React.VFC<{ onClose: () => void }> = ({
label="Auth Type"
select
fullWidth
defaultValue=""
defaultValue="password-secret"
{...registerMui(
register("authType", {
required: { value: true, message: "Required" },
Expand Down Expand Up @@ -647,14 +646,9 @@ export const UserCreateDialog: React.VFC<{ onClose: () => void }> = ({
defaultChecked={
field.template.isDefaultUserAddon || false
}
disabled={field.template.isDefaultUserAddon || false}
{...registerMui(
register(`addons.${index}.enable` as const, {
required: {
value:
field.template.isDefaultUserAddon || false,
message: "Required",
},
})
register(`addons.${index}.enable` as const, {})
)}
/>
</Tooltip>
Expand All @@ -665,28 +659,30 @@ export const UserCreateDialog: React.VFC<{ onClose: () => void }> = ({
>
{errors.addons?.[index]?.enable?.message}
</FormHelperText>
<Collapse in={watch("addons")[index].enable}>
<Stack spacing={2}>
{field.template.requiredVars?.map((required, j) => (
<TextField
key={field.id + j}
size="small"
fullWidth
label={required.varName}
defaultValue={required.defaultValue}
{...registerMui(
register(`addons.${index}.vars.${j}` as const, {
required: watch("addons")[index].enable,
})
)}
error={Boolean(errors.addons?.[index]?.vars?.[j])}
helperText={
errors.addons?.[index]?.vars?.[j] && "Required"
}
/>
))}
</Stack>
</Collapse>
{(watch("addons")[index].template.isDefaultUserAddon ||
watch("addons")[index].enable) &&
field.template.requiredVars.length > 0 && (
<Stack spacing={2}>
{field.template.requiredVars?.map((required, j) => (
<TextField
key={field.id + j}
size="small"
fullWidth
label={required.varName}
defaultValue={required.defaultValue}
{...registerMui(
register(`addons.${index}.vars.${j}` as const, {
required: watch("addons")[index].enable,
})
)}
error={Boolean(errors.addons?.[index]?.vars?.[j])}
helperText={
errors.addons?.[index]?.vars?.[j] && "Required"
}
/>
))}
</Stack>
)}
</React.Fragment>
))}
</Stack>
Expand Down
70 changes: 33 additions & 37 deletions web/dashboard-ui/src/views/organisms/UserAddonsChangeDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { PersonOutlineTwoTone } from "@mui/icons-material";
import {
Button,
Checkbox,
Collapse,
Dialog,
DialogActions,
DialogContent,
Expand Down Expand Up @@ -86,7 +85,7 @@ export const UserAddonChangeDialog: React.FC<{
onSubmit={handleSubmit(async (inp: Inputs) => {
console.log(inp);
const userAddons = inp.addons
.filter((v) => v.enable)
.filter((v) => v.enable || v.template.isDefaultUserAddon)
.map((inpAddon) => {
const vars: { [key: string]: string } = {};
inpAddon.vars.forEach((v, i) => {
Expand Down Expand Up @@ -143,14 +142,9 @@ export const UserAddonChangeDialog: React.FC<{
field.template.isDefaultUserAddon ||
false
}
disabled={field.template.isDefaultUserAddon || false}
{...registerMui(
register(`addons.${index}.enable` as const, {
required: {
value:
field.template.isDefaultUserAddon || false,
message: "Required",
},
})
register(`addons.${index}.enable` as const, {})
)}
/>
</Tooltip>
Expand All @@ -161,34 +155,36 @@ export const UserAddonChangeDialog: React.FC<{
>
{errors.addons?.[index]?.enable?.message}
</FormHelperText>
<Collapse in={watch("addons")[index].enable}>
<Stack spacing={2}>
{field.template.requiredVars?.map((required, j) => (
<TextField
key={field.id + j}
size="small"
fullWidth
label={required.varName}
defaultValue={
(currentAddons.get(field.template.name) &&
currentAddons.get(field.template.name)!.vars[
required.varName
]) ||
required.defaultValue
}
{...registerMui(
register(`addons.${index}.vars.${j}` as const, {
required: watch("addons")[index].enable,
})
)}
error={Boolean(errors.addons?.[index]?.vars?.[j])}
helperText={
errors.addons?.[index]?.vars?.[j] && "Required"
}
/>
))}
</Stack>
</Collapse>
{(watch("addons")[index].template.isDefaultUserAddon ||
watch("addons")[index].enable) &&
field.template.requiredVars.length > 0 && (
<Stack spacing={2}>
{field.template.requiredVars?.map((required, j) => (
<TextField
key={field.id + j}
size="small"
fullWidth
label={required.varName}
defaultValue={
(currentAddons.get(field.template.name) &&
currentAddons.get(field.template.name)!.vars[
required.varName
]) ||
required.defaultValue
}
{...registerMui(
register(`addons.${index}.vars.${j}` as const, {
required: watch("addons")[index].enable,
})
)}
error={Boolean(errors.addons?.[index]?.vars?.[j])}
helperText={
errors.addons?.[index]?.vars?.[j] && "Required"
}
/>
))}
</Stack>
)}
</React.Fragment>
))}
</Stack>
Expand Down
Loading

0 comments on commit 0023dd5

Please sign in to comment.