feat core react: Add DropdownItems to components

blueprint.sh

@@ -656,6 +656,7 @@ if [[ ( $2 == "-i" ) || ( $2 == "-install" ) ]]; then VCMD="y"
 
       PLACE_REACT "$Components_Server_Files_Browse_BeforeContent" "Server/Files/Browse/BeforeContent.tsx" "$OldComponents_Server_Files_Browse_BeforeContent"
       PLACE_REACT "$Components_Server_Files_Browse_FileButtons" "Server/Files/Browse/FileButtons.tsx" "$OldComponents_Server_Files_Browse_FileButtons"
+      PLACE_REACT "$Components_Server_Files_Browse_DropdownItems" "Server/Files/Browse/DropdownItems.tsx" "$OldComponents_Server_Files_Browse_DropdownItems"
       PLACE_REACT "$Components_Server_Files_Browse_AfterContent" "Server/Files/Browse/AfterContent.tsx" "$OldComponents_Server_Files_Browse_AfterContent"
       PLACE_REACT "$Components_Server_Files_Edit_BeforeEdit" "Server/Files/Edit/BeforeEdit.tsx" "$OldComponents_Server_Files_Edit_BeforeEdit"
       PLACE_REACT "$Components_Server_Files_Edit_AfterEdit" "Server/Files/Edit/AfterEdit.tsx" "$OldComponents_Server_Files_Edit_AfterEdit"
@@ -672,6 +673,7 @@ if [[ ( $2 == "-i" ) || ( $2 == "-install" ) ]]; then VCMD="y"
       PLACE_REACT "$Components_Server_Users_AfterContent" "Server/Users/AfterContent.tsx" "$OldComponents_Server_Users_AfterContent"
 
       PLACE_REACT "$Components_Server_Backups_BeforeContent" "Server/Backups/BeforeContent.tsx" "$OldComponents_Server_Backups_BeforeContent"
+      PLACE_REACT "$Components_Server_Backups_DropdownItems" "Server/Backups/DropdownItems.tsx" "$OldComponents_Server_Backups_DropdownItems"
       PLACE_REACT "$Components_Server_Backups_AfterContent" "Server/Backups/AfterContent.tsx" "$OldComponents_Server_Backups_AfterContent"
 
       PLACE_REACT "$Components_Server_Network_BeforeContent" "Server/Network/BeforeContent.tsx" "$OldComponents_Server_Network_BeforeContent"
@@ -1126,6 +1128,7 @@ if [[ ( $2 == "-r" ) || ( $2 == "-remove" ) ]]; then VCMD="y"
 
     REMOVE_REACT "$Components_Server_Files_Browse_BeforeContent" "Server/Files/Browse/BeforeContent.tsx"
     REMOVE_REACT "$Components_Server_Files_Browse_FileButtons" "Server/Files/Browse/FileButtons.tsx"
+    REMOVE_REACT "$Components_Server_Files_Browse_DropdownItems" "Server/Files/Browse/DropdownItems.tsx"
     REMOVE_REACT "$Components_Server_Files_Browse_AfterContent" "Server/Files/Browse/AfterContent.tsx"
     REMOVE_REACT "$Components_Server_Files_Edit_BeforeEdit" "Server/Files/Edit/BeforeEdit.tsx"
     REMOVE_REACT "$Components_Server_Files_Edit_AfterEdit" "Server/Files/Edit/AfterEdit.tsx"
@@ -1142,6 +1145,7 @@ if [[ ( $2 == "-r" ) || ( $2 == "-remove" ) ]]; then VCMD="y"
     REMOVE_REACT "$Components_Server_Users_AfterContent" "Server/Users/AfterContent.tsx"
 
     REMOVE_REACT "$Components_Server_Backups_BeforeContent" "Server/Backups/BeforeContent.tsx"
+    REMOVE_REACT "$Components_Server_Backups_DropdownItems" "Server/Backups/DropdownItems.tsx"
     REMOVE_REACT "$Components_Server_Backups_AfterContent" "Server/Backups/AfterContent.tsx"
 
     REMOVE_REACT "$Components_Server_Network_BeforeContent" "Server/Network/BeforeContent.tsx"

resources/scripts/blueprint/components/Server/Backups/DropdownItems.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/blueprint/components/Server/Files/Browse/DropdownItems.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/components/server/backups/BackupContextMenu.tsx

@@ -0,0 +1,222 @@
+import React, { useState } from 'react';
+import {
+    faBoxOpen,
+    faCloudDownloadAlt,
+    faEllipsisH,
+    faLock,
+    faTrashAlt,
+    faUnlock,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import DropdownMenu, { DropdownButtonRow } from '@/components/elements/DropdownMenu';
+import getBackupDownloadUrl from '@/api/server/backups/getBackupDownloadUrl';
+import useFlash from '@/plugins/useFlash';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import deleteBackup from '@/api/server/backups/deleteBackup';
+import Can from '@/components/elements/Can';
+import tw from 'twin.macro';
+import getServerBackups from '@/api/swr/getServerBackups';
+import { ServerBackup } from '@/api/server/types';
+import { ServerContext } from '@/state/server';
+import Input from '@/components/elements/Input';
+import { restoreServerBackup } from '@/api/server/backups';
+import http, { httpErrorToHuman } from '@/api/http';
+import { Dialog } from '@/components/elements/dialog';
+
+import DropdownItems from '@/blueprint/components/Server/Backups/DropdownItems';
+
+interface Props {
+    backup: ServerBackup;
+}
+
+export default ({ backup }: Props) => {
+    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
+    const [modal, setModal] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [truncate, setTruncate] = useState(false);
+    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { mutate } = getServerBackups();
+
+    const doDownload = () => {
+        setLoading(true);
+        clearFlashes('backups');
+        getBackupDownloadUrl(uuid, backup.uuid)
+            .then((url) => {
+                // @ts-expect-error this is valid
+                window.location = url;
+            })
+            .catch((error) => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'backups', error });
+            })
+            .then(() => setLoading(false));
+    };
+
+    const doDeletion = () => {
+        setLoading(true);
+        clearFlashes('backups');
+        deleteBackup(uuid, backup.uuid)
+            .then(() =>
+                mutate(
+                    (data) => ({
+                        ...data,
+                        items: data.items.filter((b) => b.uuid !== backup.uuid),
+                        backupCount: data.backupCount - 1,
+                    }),
+                    false
+                )
+            )
+            .catch((error) => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'backups', error });
+                setLoading(false);
+                setModal('');
+            });
+    };
+
+    const doRestorationAction = () => {
+        setLoading(true);
+        clearFlashes('backups');
+        restoreServerBackup(uuid, backup.uuid, truncate)
+            .then(() =>
+                setServerFromState((s) => ({
+                    ...s,
+                    status: 'restoring_backup',
+                }))
+            )
+            .catch((error) => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'backups', error });
+            })
+            .then(() => setLoading(false))
+            .then(() => setModal(''));
+    };
+
+    const onLockToggle = () => {
+        if (backup.isLocked && modal !== 'unlock') {
+            return setModal('unlock');
+        }
+
+        http.post(`/api/client/servers/${uuid}/backups/${backup.uuid}/lock`)
+            .then(() =>
+                mutate(
+                    (data) => ({
+                        ...data,
+                        items: data.items.map((b) =>
+                            b.uuid !== backup.uuid
+                                ? b
+                                : {
+                                      ...b,
+                                      isLocked: !b.isLocked,
+                                  }
+                        ),
+                    }),
+                    false
+                )
+            )
+            .catch((error) => alert(httpErrorToHuman(error)))
+            .then(() => setModal(''));
+    };
+
+    return (
+        <>
+            <Dialog.Confirm
+                open={modal === 'unlock'}
+                onClose={() => setModal('')}
+                title={`Unlock "${backup.name}"`}
+                onConfirmed={onLockToggle}
+            >
+                This backup will no longer be protected from automated or accidental deletions.
+            </Dialog.Confirm>
+            <Dialog.Confirm
+                open={modal === 'restore'}
+                onClose={() => setModal('')}
+                confirm={'Restore'}
+                title={`Restore "${backup.name}"`}
+                onConfirmed={() => doRestorationAction()}
+            >
+                <p>
+                    Your server will be stopped. You will not be able to control the power state, access the file
+                    manager, or create additional backups until completed.
+                </p>
+                <p css={tw`mt-4 -mb-2 bg-gray-700 p-3 rounded`}>
+                    <label htmlFor={'restore_truncate'} css={tw`text-base flex items-center cursor-pointer`}>
+                        <Input
+                            type={'checkbox'}
+                            css={tw`text-red-500! w-5! h-5! mr-2`}
+                            id={'restore_truncate'}
+                            value={'true'}
+                            checked={truncate}
+                            onChange={() => setTruncate((s) => !s)}
+                        />
+                        Delete all files before restoring backup.
+                    </label>
+                </p>
+            </Dialog.Confirm>
+            <Dialog.Confirm
+                title={`Delete "${backup.name}"`}
+                confirm={'Continue'}
+                open={modal === 'delete'}
+                onClose={() => setModal('')}
+                onConfirmed={doDeletion}
+            >
+                This is a permanent operation. The backup cannot be recovered once deleted.
+            </Dialog.Confirm>
+            <SpinnerOverlay visible={loading} fixed />
+            {backup.isSuccessful ? (
+                <DropdownMenu
+                    renderToggle={(onClick) => (
+                        <button
+                            onClick={onClick}
+                            css={tw`text-gray-200 transition-colors duration-150 hover:text-gray-100 p-2`}
+                        >
+                            <FontAwesomeIcon icon={faEllipsisH} />
+                        </button>
+                    )}
+                >
+                    <div css={tw`text-sm`}>
+                        <Can action={'backup.download'}>
+                            <DropdownButtonRow onClick={doDownload}>
+                                <FontAwesomeIcon fixedWidth icon={faCloudDownloadAlt} css={tw`text-xs`} />
+                                <span css={tw`ml-2`}>Download</span>
+                            </DropdownButtonRow>
+                        </Can>
+                        <Can action={'backup.restore'}>
+                            <DropdownButtonRow onClick={() => setModal('restore')}>
+                                <FontAwesomeIcon fixedWidth icon={faBoxOpen} css={tw`text-xs`} />
+                                <span css={tw`ml-2`}>Restore</span>
+                            </DropdownButtonRow>
+                        </Can>
+                        <Can action={'backup.delete'}>
+                            <>
+                                <DropdownButtonRow onClick={onLockToggle}>
+                                    <FontAwesomeIcon
+                                        fixedWidth
+                                        icon={backup.isLocked ? faUnlock : faLock}
+                                        css={tw`text-xs mr-2`}
+                                    />
+                                    {backup.isLocked ? 'Unlock' : 'Lock'}
+                                </DropdownButtonRow>
+                                {!backup.isLocked && (
+                                    <DropdownButtonRow danger onClick={() => setModal('delete')}>
+                                        <FontAwesomeIcon fixedWidth icon={faTrashAlt} css={tw`text-xs`} />
+                                        <span css={tw`ml-2`}>Delete</span>
+                                    </DropdownButtonRow>
+                                )}
+                            </>
+                        </Can>
+                    </div>
+                    <DropdownItems />
+                </DropdownMenu>
+            ) : (
+                <button
+                    onClick={() => setModal('delete')}
+                    css={tw`text-gray-200 transition-colors duration-150 hover:text-gray-100 p-2`}
+                >
+                    <FontAwesomeIcon icon={faTrashAlt} />
+                </button>
+            )}
+        </>
+    );
+};

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -0,0 +1,200 @@
+import React, { memo, useRef, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+    faBoxOpen,
+    faCopy,
+    faEllipsisH,
+    faFileArchive,
+    faFileCode,
+    faFileDownload,
+    faLevelUpAlt,
+    faPencilAlt,
+    faTrashAlt,
+    IconDefinition,
+} from '@fortawesome/free-solid-svg-icons';
+import RenameFileModal from '@/components/server/files/RenameFileModal';
+import { ServerContext } from '@/state/server';
+import { join } from 'path';
+import deleteFiles from '@/api/server/files/deleteFiles';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import copyFile from '@/api/server/files/copyFile';
+import Can from '@/components/elements/Can';
+import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
+import useFlash from '@/plugins/useFlash';
+import tw from 'twin.macro';
+import { FileObject } from '@/api/server/files/loadDirectory';
+import useFileManagerSwr from '@/plugins/useFileManagerSwr';
+import DropdownMenu from '@/components/elements/DropdownMenu';
+import styled from 'styled-components/macro';
+import useEventListener from '@/plugins/useEventListener';
+import compressFiles from '@/api/server/files/compressFiles';
+import decompressFiles from '@/api/server/files/decompressFiles';
+import isEqual from 'react-fast-compare';
+import ChmodFileModal from '@/components/server/files/ChmodFileModal';
+import { Dialog } from '@/components/elements/dialog';
+
+import DropdownItems from '@/blueprint/components/Server/Files/Browse/DropdownItems';
+
+type ModalType = 'rename' | 'move' | 'chmod';
+
+const StyledRow = styled.div<{ $danger?: boolean }>`
+    ${tw`p-2 flex items-center rounded`};
+    ${(props) =>
+        props.$danger ? tw`hover:bg-red-100 hover:text-red-700` : tw`hover:bg-neutral-100 hover:text-neutral-700`};
+`;
+
+interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon: IconDefinition;
+    title: string;
+    $danger?: boolean;
+}
+
+const Row = ({ icon, title, ...props }: RowProps) => (
+    <StyledRow {...props}>
+        <FontAwesomeIcon icon={icon} css={tw`text-xs`} fixedWidth />
+        <span css={tw`ml-2`}>{title}</span>
+    </StyledRow>
+);
+
+const FileDropdownMenu = ({ file }: { file: FileObject }) => {
+    const onClickRef = useRef<DropdownMenu>(null);
+    const [showSpinner, setShowSpinner] = useState(false);
+    const [modal, setModal] = useState<ModalType | null>(null);
+    const [showConfirmation, setShowConfirmation] = useState(false);
+
+    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
+    const { mutate } = useFileManagerSwr();
+    const { clearAndAddHttpError, clearFlashes } = useFlash();
+    const directory = ServerContext.useStoreState((state) => state.files.directory);
+
+    useEventListener(`pterodactyl:files:ctx:${file.key}`, (e: CustomEvent) => {
+        if (onClickRef.current) {
+            onClickRef.current.triggerMenu(e.detail);
+        }
+    });
+
+    const doDeletion = () => {
+        clearFlashes('files');
+
+        // For UI speed, immediately remove the file from the listing before calling the deletion function.
+        // If the delete actually fails, we'll fetch the current directory contents again automatically.
+        mutate((files) => files.filter((f) => f.key !== file.key), false);
+
+        deleteFiles(uuid, directory, [file.name]).catch((error) => {
+            mutate();
+            clearAndAddHttpError({ key: 'files', error });
+        });
+    };
+
+    const doCopy = () => {
+        setShowSpinner(true);
+        clearFlashes('files');
+
+        copyFile(uuid, join(directory, file.name))
+            .then(() => mutate())
+            .catch((error) => clearAndAddHttpError({ key: 'files', error }))
+            .then(() => setShowSpinner(false));
+    };
+
+    const doDownload = () => {
+        setShowSpinner(true);
+        clearFlashes('files');
+
+        getFileDownloadUrl(uuid, join(directory, file.name))
+            .then((url) => {
+                // @ts-expect-error this is valid
+                window.location = url;
+            })
+            .catch((error) => clearAndAddHttpError({ key: 'files', error }))
+            .then(() => setShowSpinner(false));
+    };
+
+    const doArchive = () => {
+        setShowSpinner(true);
+        clearFlashes('files');
+
+        compressFiles(uuid, directory, [file.name])
+            .then(() => mutate())
+            .catch((error) => clearAndAddHttpError({ key: 'files', error }))
+            .then(() => setShowSpinner(false));
+    };
+
+    const doUnarchive = () => {
+        setShowSpinner(true);
+        clearFlashes('files');
+
+        decompressFiles(uuid, directory, file.name)
+            .then(() => mutate())
+            .catch((error) => clearAndAddHttpError({ key: 'files', error }))
+            .then(() => setShowSpinner(false));
+    };
+
+    return (
+        <>
+            <Dialog.Confirm
+                open={showConfirmation}
+                onClose={() => setShowConfirmation(false)}
+                title={`Delete ${file.isFile ? 'File' : 'Directory'}`}
+                confirm={'Delete'}
+                onConfirmed={doDeletion}
+            >
+                You will not be able to recover the contents of&nbsp;
+                <span className={'font-semibold text-gray-50'}>{file.name}</span> once deleted.
+            </Dialog.Confirm>
+            <DropdownMenu
+                ref={onClickRef}
+                renderToggle={(onClick) => (
+                    <div css={tw`px-4 py-2 hover:text-white`} onClick={onClick}>
+                        <FontAwesomeIcon icon={faEllipsisH} />
+                        {modal ? (
+                            modal === 'chmod' ? (
+                                <ChmodFileModal
+                                    visible
+                                    appear
+                                    files={[{ file: file.name, mode: file.modeBits }]}
+                                    onDismissed={() => setModal(null)}
+                                />
+                            ) : (
+                                <RenameFileModal
+                                    visible
+                                    appear
+                                    files={[file.name]}
+                                    useMoveTerminology={modal === 'move'}
+                                    onDismissed={() => setModal(null)}
+                                />
+                            )
+                        ) : null}
+                        <SpinnerOverlay visible={showSpinner} fixed size={'large'} />
+                    </div>
+                )}
+            >
+                <Can action={'file.update'}>
+                    <Row onClick={() => setModal('rename')} icon={faPencilAlt} title={'Rename'} />
+                    <Row onClick={() => setModal('move')} icon={faLevelUpAlt} title={'Move'} />
+                    <Row onClick={() => setModal('chmod')} icon={faFileCode} title={'Permissions'} />
+                </Can>
+                {file.isFile && (
+                    <Can action={'file.create'}>
+                        <Row onClick={doCopy} icon={faCopy} title={'Copy'} />
+                    </Can>
+                )}
+                {file.isArchiveType() ? (
+                    <Can action={'file.create'}>
+                        <Row onClick={doUnarchive} icon={faBoxOpen} title={'Unarchive'} />
+                    </Can>
+                ) : (
+                    <Can action={'file.archive'}>
+                        <Row onClick={doArchive} icon={faFileArchive} title={'Archive'} />
+                    </Can>
+                )}
+                {file.isFile && <Row onClick={doDownload} icon={faFileDownload} title={'Download'} />}
+                <Can action={'file.delete'}>
+                    <Row onClick={() => setShowConfirmation(true)} icon={faTrashAlt} title={'Delete'} $danger />
+                </Can>
+                <DropdownItems />
+            </DropdownMenu>
+        </>
+    );
+};
+
+export default memo(FileDropdownMenu, isEqual);