Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

React 18 and Vite (#4510)

Browse source
This commit is contained in:
Matthew Penner 2022-11-25 13:25:03 -07:00 • committed by GitHub
parent 1bb1b13f6d
commit 21613fa602
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
244 changed files with 4547 additions and 8933 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/scripts/components/server/users/AddSubuserButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import EditSubuserModal from '@/components/server/users/EditSubuserModal';
import { Button } from '@/components/elements/button/index';

34
resources/scripts/components/server/users/EditSubuserModal.tsx
View file

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useRef } from 'react';
import { useContext, useEffect, useRef } from 'react';
import { Subuser } from '@/state/server/subusers';
import { Form, Formik } from 'formik';
import { array, object, string } from 'yup';
@ -29,24 +29,24 @@ interface Values {
const EditSubuserModal = ({ subuser }: Props) => {
const ref = useRef<HTMLHeadingElement>(null);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const appendSubuser = ServerContext.useStoreActions((actions) => actions.subusers.appendSubuser);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const appendSubuser = ServerContext.useStoreActions(actions => actions.subusers.appendSubuser);
const { clearFlashes, clearAndAddHttpError } = useStoreActions(
(actions: Actions<ApplicationStore>) => actions.flashes
(actions: Actions<ApplicationStore>) => actions.flashes,
);
const { dismiss, setPropOverrides } = useContext(ModalContext);
const isRootAdmin = useStoreState((state) => state.user.data!.rootAdmin);
const permissions = useStoreState((state) => state.permissions.data);
const isRootAdmin = useStoreState(state => state.user.data!.rootAdmin);
const permissions = useStoreState(state => state.permissions.data);
// The currently logged in user's permissions. We're going to filter out any permissions
// that they should not need.
const loggedInPermissions = ServerContext.useStoreState((state) => state.server.permissions);
const loggedInPermissions = ServerContext.useStoreState(state => state.server.permissions);
const [canEditUser] = usePermissions(subuser ? ['user.update'] : ['user.create']);
// The permissions that can be modified by this user.
const editablePermissions = useDeepCompareMemo(() => {
const cleaned = Object.keys(permissions).map((key) =>
Object.keys(permissions[key].keys).map((pkey) => `${key}.${pkey}`)
const cleaned = Object.keys(permissions).map(key =>
Object.keys(permissions[key]?.keys ?? {}).map(pkey => `${key}.${pkey}`),
);
const list: string[] = ([] as string[]).concat.apply([], Object.values(cleaned));
@ -55,7 +55,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
return list;
}
return list.filter((key) => loggedInPermissions.indexOf(key) >= 0);
return list.filter(key => loggedInPermissions.indexOf(key) >= 0);
}, [isRootAdmin, permissions, loggedInPermissions]);
const submit = (values: Values) => {
@ -63,11 +63,11 @@ const EditSubuserModal = ({ subuser }: Props) => {
clearFlashes('user:edit');
createOrUpdateSubuser(uuid, values, subuser)
.then((subuser) => {
.then(subuser => {
appendSubuser(subuser);
dismiss();
})
.catch((error) => {
.catch(error => {
console.error(error);
setPropOverrides(null);
clearAndAddHttpError({ key: 'user:edit', error });
@ -82,7 +82,7 @@ const EditSubuserModal = ({ subuser }: Props) => {
() => () => {
clearFlashes('user:edit');
},
[]
[],
);
return (
@ -137,17 +137,17 @@ const EditSubuserModal = ({ subuser }: Props) => {
)}
<div css={tw`my-6`}>
{Object.keys(permissions)
.filter((key) => key !== 'websocket')
.filter(key => key !== 'websocket')
.map((key, index) => (
<PermissionTitleBox
key={`permission_${key}`}
title={key}
isEditable={canEditUser}
permissions={Object.keys(permissions[key].keys).map((pkey) => `${key}.${pkey}`)}
permissions={Object.keys(permissions[key]?.keys ?? {}).map(pkey => `${key}.${pkey}`)}
css={index > 0 ? tw`mt-4` : undefined}
>
<p css={tw`text-sm text-neutral-400 mb-4`}>{permissions[key].description}</p>
{Object.keys(permissions[key].keys).map((pkey) => (
<p css={tw`text-sm text-neutral-400 mb-4`}>{permissions[key]?.description}</p>
{Object.keys(permissions[key]?.keys ?? {}).map(pkey => (
<PermissionRow
key={`permission_${key}.${pkey}`}
permission={`${key}.${pkey}`}

11
resources/scripts/components/server/users/PermissionRow.tsx
View file

@ -1,7 +1,6 @@
import styled from 'styled-components/macro';
import styled from 'styled-components';
import tw from 'twin.macro';
import Checkbox from '@/components/elements/Checkbox';
import React from 'react';
import { useStoreState } from 'easy-peasy';
import Label from '@/components/elements/Label';
@ -36,8 +35,8 @@ interface Props {
}
const PermissionRow = ({ permission, disabled }: Props) => {
const [key, pkey] = permission.split('.', 2);
const permissions = useStoreState((state) => state.permissions.data);
const [key = '', pkey = ''] = permission.split('.', 2);
const permissions = useStoreState(state => state.permissions.data);
return (
<Container htmlFor={`permission_${permission}`} className={disabled ? 'disabled' : undefined}>
@ -54,8 +53,8 @@ const PermissionRow = ({ permission, disabled }: Props) => {
<Label as={'p'} css={tw`font-medium`}>
{pkey}
</Label>
{permissions[key].keys[pkey].length > 0 && (
<p css={tw`text-xs text-neutral-400 mt-1`}>{permissions[key].keys[pkey]}</p>
{(permissions[key]?.keys?.[pkey]?.length ?? 0) > 0 && (
<p css={tw`text-xs text-neutral-400 mt-1`}>{permissions[key]?.keys?.[pkey] ?? ''}</p>
)}
</div>
</Container>

32
resources/scripts/components/server/users/PermissionTitleBox.tsx
View file

@ -1,29 +1,33 @@
import React, { memo, useCallback } from 'react';
import { useField } from 'formik';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import tw from 'twin.macro';
import Input from '@/components/elements/Input';
import type { ReactNode } from 'react';
import { memo, useCallback } from 'react';
import isEqual from 'react-fast-compare';
import tw from 'twin.macro';
import TitledGreyBox from '@/components/elements/TitledGreyBox';
import Input from '@/components/elements/Input';
interface Props {
isEditable: boolean;
children?: ReactNode;
className?: string;
isEditable?: boolean;
title: string;
permissions: string[];
className?: string;
}
const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissions, className, children }) => {
function PermissionTitleBox({ isEditable, title, permissions, className, children }: Props) {
const [{ value }, , { setValue }] = useField<string[]>('permissions');
const onCheckboxClicked = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
if (e.currentTarget.checked) {
setValue([...value, ...permissions.filter((p) => !value.includes(p))]);
setValue([...value, ...permissions.filter(p => !value.includes(p))]);
} else {
setValue(value.filter((p) => !permissions.includes(p)));
setValue(value.filter(p => !permissions.includes(p)));
}
},
[permissions, value]
[permissions, value],
);
return (
@ -34,7 +38,7 @@ const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissio
{isEditable && (
<Input
type={'checkbox'}
checked={permissions.every((p) => value.includes(p))}
checked={permissions.every(p => value.includes(p))}
onChange={onCheckboxClicked}
/>
)}
@ -45,6 +49,8 @@ const PermissionTitleBox: React.FC<Props> = memo(({ isEditable, title, permissio
{children}
</TitledGreyBox>
);
}, isEqual);
}
export default PermissionTitleBox;
const MemoizedPermissionTitleBox = memo(PermissionTitleBox, isEqual);
export default MemoizedPermissionTitleBox;

8
resources/scripts/components/server/users/RemoveSubuserButton.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import { ServerContext } from '@/state/server';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@ -14,8 +14,8 @@ export default ({ subuser }: { subuser: Subuser }) => {
const [loading, setLoading] = useState(false);
const [showConfirmation, setShowConfirmation] = useState(false);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const removeSubuser = ServerContext.useStoreActions((actions) => actions.subusers.removeSubuser);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const removeSubuser = ServerContext.useStoreActions(actions => actions.subusers.removeSubuser);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const doDeletion = () => {
@ -26,7 +26,7 @@ export default ({ subuser }: { subuser: Subuser }) => {
setLoading(false);
removeSubuser(subuser.uuid);
})
.catch((error) => {
.catch(error => {
console.error(error);
addError({ key: 'users', message: httpErrorToHuman(error) });
setShowConfirmation(false);

6
resources/scripts/components/server/users/UserRow.tsx
View file

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Subuser } from '@/state/server/subusers';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPencilAlt, faUnlockAlt, faUserLock } from '@fortawesome/free-solid-svg-icons';
@ -14,7 +14,7 @@ interface Props {
}
export default ({ subuser }: Props) => {
const uuid = useStoreState((state) => state.user!.data!.uuid);
const uuid = useStoreState(state => state.user!.data!.uuid);
const [visible, setVisible] = useState(false);
return (
@ -40,7 +40,7 @@ export default ({ subuser }: Props) => {
</div>
<div css={tw`ml-4 hidden md:block`}>
<p css={tw`font-medium text-center`}>
{subuser.permissions.filter((permission) => permission !== 'websocket.connect').length}
{subuser.permissions.filter(permission => permission !== 'websocket.connect').length}
</p>
<p css={tw`text-2xs text-neutral-500 uppercase`}>Permissions</p>
</div>

16
resources/scripts/components/server/users/UsersContainer.tsx
View file

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
import { ServerContext } from '@/state/server';
import { Actions, useStoreActions, useStoreState } from 'easy-peasy';
import { ApplicationStore } from '@/state';
@ -15,9 +15,9 @@ import tw from 'twin.macro';
export default () => {
const [loading, setLoading] = useState(true);
const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
const subusers = ServerContext.useStoreState((state) => state.subusers.data);
const setSubusers = ServerContext.useStoreActions((actions) => actions.subusers.setSubusers);
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const subusers = ServerContext.useStoreState(state => state.subusers.data);
const setSubusers = ServerContext.useStoreActions(actions => actions.subusers.setSubusers);
const permissions = useStoreState((state: ApplicationStore) => state.permissions.data);
const getPermissions = useStoreActions((actions: Actions<ApplicationStore>) => actions.permissions.getPermissions);
@ -26,18 +26,18 @@ export default () => {
useEffect(() => {
clearFlashes('users');
getServerSubusers(uuid)
.then((subusers) => {
.then(subusers => {
setSubusers(subusers);
setLoading(false);
})
.catch((error) => {
.catch(error => {
console.error(error);
addError({ key: 'users', message: httpErrorToHuman(error) });
});
}, []);
useEffect(() => {
getPermissions().catch((error) => {
getPermissions().catch(error => {
addError({ key: 'users', message: httpErrorToHuman(error) });
console.error(error);
});
@ -53,7 +53,7 @@ export default () => {
{!subusers.length ? (
<p css={tw`text-center text-sm text-neutral-300`}>It looks like you don&apos;t have any subusers.</p>
) : (
subusers.map((subuser) => <UserRow key={subuser.uuid} subuser={subuser} />)
subusers.map(subuser => <UserRow key={subuser.uuid} subuser={subuser} />)
)}
<Can action={'user.create'}>
<div css={tw`flex justify-end mt-6`}>