From 7c8b204d13dfc1500daee0026360bc08ea98ace3 Mon Sep 17 00:00:00 2001
From: Lance Pioch <git@lance.sh>
Date: Wed, 26 Jun 2024 21:42:57 -0400
Subject: [PATCH] Remove network tab

---
 .../server/network/AllocationRow.tsx          | 119 ------------------
 .../server/network/DeleteAllocationButton.tsx |  61 ---------
 .../server/network/NetworkContainer.tsx       |  84 -------------
 resources/scripts/routers/routes.ts           |   7 --
 4 files changed, 271 deletions(-)
 delete mode 100644 resources/scripts/components/server/network/AllocationRow.tsx
 delete mode 100644 resources/scripts/components/server/network/DeleteAllocationButton.tsx
 delete mode 100644 resources/scripts/components/server/network/NetworkContainer.tsx

diff --git a/resources/scripts/components/server/network/AllocationRow.tsx b/resources/scripts/components/server/network/AllocationRow.tsx
deleted file mode 100644
index e68bc3359..000000000
--- a/resources/scripts/components/server/network/AllocationRow.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React, { memo, useCallback, useState } from 'react';
-import isEqual from 'react-fast-compare';
-import tw from 'twin.macro';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
-import InputSpinner from '@/components/elements/InputSpinner';
-import { Textarea } from '@/components/elements/Input';
-import Can from '@/components/elements/Can';
-import { Button } from '@/components/elements/button/index';
-import GreyRowBox from '@/components/elements/GreyRowBox';
-import { Allocation } from '@/api/server/getServer';
-import styled from 'styled-components/macro';
-import { debounce } from 'debounce';
-import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
-import { useFlashKey } from '@/plugins/useFlash';
-import { ServerContext } from '@/state/server';
-import CopyOnClick from '@/components/elements/CopyOnClick';
-import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
-import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
-import getServerAllocations from '@/api/swr/getServerAllocations';
-import { ip } from '@/lib/formatters';
-import Code from '@/components/elements/Code';
-
-const Label = styled.label`
-    ${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}
-`;
-
-interface Props {
-    allocation: Allocation;
-}
-
-const AllocationRow = ({ allocation }: Props) => {
-    const [loading, setLoading] = useState(false);
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
-    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
-    const { mutate } = getServerAllocations();
-
-    const onNotesChanged = useCallback((id: number, notes: string) => {
-        mutate((data) => data?.map((a) => (a.id === id ? { ...a, notes } : a)), false);
-    }, []);
-
-    const setAllocationNotes = debounce((notes: string) => {
-        setLoading(true);
-        clearFlashes();
-
-        setServerAllocationNotes(uuid, allocation.id, notes)
-            .then(() => onNotesChanged(allocation.id, notes))
-            .catch((error) => clearAndAddHttpError(error))
-            .then(() => setLoading(false));
-    }, 750);
-
-    const setPrimaryAllocation = () => {
-        clearFlashes();
-        mutate((data) => data?.map((a) => ({ ...a, isDefault: a.id === allocation.id })), false);
-
-        setPrimaryServerAllocation(uuid, allocation.id).catch((error) => {
-            clearAndAddHttpError(error);
-            mutate();
-        });
-    };
-
-    return (
-        <GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
-            <div className={'flex items-center w-full md:w-auto'}>
-                <div className={'pl-4 pr-6 text-neutral-400'}>
-                    <FontAwesomeIcon icon={faNetworkWired} />
-                </div>
-                <div className={'mr-4 flex-1 md:w-40'}>
-                    {allocation.alias ? (
-                        <CopyOnClick text={allocation.alias}>
-                            <Code dark className={'w-40 truncate'}>
-                                {allocation.alias}
-                            </Code>
-                        </CopyOnClick>
-                    ) : (
-                        <CopyOnClick text={ip(allocation.ip)}>
-                            <Code dark>{ip(allocation.ip)}</Code>
-                        </CopyOnClick>
-                    )}
-                    <Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
-                </div>
-                <div className={'w-16 md:w-24 overflow-hidden'}>
-                    <Code dark>{allocation.port}</Code>
-                    <Label>Port</Label>
-                </div>
-            </div>
-            <div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
-                <InputSpinner visible={loading}>
-                    <Textarea
-                        className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
-                        placeholder={'Notes'}
-                        defaultValue={allocation.notes || undefined}
-                        onChange={(e) => setAllocationNotes(e.currentTarget.value)}
-                    />
-                </InputSpinner>
-            </div>
-            <div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
-                {allocation.isDefault ? (
-                    <Button size={Button.Sizes.Small} className={'!text-gray-50 !bg-blue-600'} disabled>
-                        Primary
-                    </Button>
-                ) : (
-                    <>
-                        <Can action={'allocation.delete'}>
-                            <DeleteAllocationButton allocation={allocation.id} />
-                        </Can>
-                        <Can action={'allocation.update'}>
-                            <Button.Text size={Button.Sizes.Small} onClick={setPrimaryAllocation}>
-                                Make Primary
-                            </Button.Text>
-                        </Can>
-                    </>
-                )}
-            </div>
-        </GreyRowBox>
-    );
-};
-
-export default memo(AllocationRow, isEqual);
diff --git a/resources/scripts/components/server/network/DeleteAllocationButton.tsx b/resources/scripts/components/server/network/DeleteAllocationButton.tsx
deleted file mode 100644
index c6804484e..000000000
--- a/resources/scripts/components/server/network/DeleteAllocationButton.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import tw from 'twin.macro';
-import Icon from '@/components/elements/Icon';
-import { ServerContext } from '@/state/server';
-import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
-import getServerAllocations from '@/api/swr/getServerAllocations';
-import { useFlashKey } from '@/plugins/useFlash';
-import { Dialog } from '@/components/elements/dialog';
-import { Button } from '@/components/elements/button/index';
-
-interface Props {
-    allocation: number;
-}
-
-const DeleteAllocationButton = ({ allocation }: Props) => {
-    const [confirm, setConfirm] = useState(false);
-
-    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
-    const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
-
-    const { mutate } = getServerAllocations();
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
-
-    const deleteAllocation = () => {
-        clearFlashes();
-
-        mutate((data) => data?.filter((a) => a.id !== allocation), false);
-        setServerFromState((s) => ({ ...s, allocations: s.allocations.filter((a) => a.id !== allocation) }));
-
-        deleteServerAllocation(uuid, allocation).catch((error) => {
-            clearAndAddHttpError(error);
-            mutate();
-        });
-    };
-
-    return (
-        <>
-            <Dialog.Confirm
-                open={confirm}
-                onClose={() => setConfirm(false)}
-                title={'Remove Allocation'}
-                confirm={'Delete'}
-                onConfirmed={deleteAllocation}
-            >
-                This allocation will be immediately removed from your server.
-            </Dialog.Confirm>
-            <Button.Danger
-                variant={Button.Variants.Secondary}
-                size={Button.Sizes.Small}
-                shape={Button.Shapes.IconSquare}
-                type={'button'}
-                onClick={() => setConfirm(true)}
-            >
-                <Icon icon={faTrashAlt} css={tw`w-3 h-auto`} />
-            </Button.Danger>
-        </>
-    );
-};
-
-export default DeleteAllocationButton;
diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
deleted file mode 100644
index 182beaab8..000000000
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Spinner from '@/components/elements/Spinner';
-import { useFlashKey } from '@/plugins/useFlash';
-import ServerContentBlock from '@/components/elements/ServerContentBlock';
-import { ServerContext } from '@/state/server';
-import AllocationRow from '@/components/server/network/AllocationRow';
-import Button from '@/components/elements/Button';
-import createServerAllocation from '@/api/server/network/createServerAllocation';
-import tw from 'twin.macro';
-import Can from '@/components/elements/Can';
-import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import getServerAllocations from '@/api/swr/getServerAllocations';
-import isEqual from 'react-fast-compare';
-import { useDeepCompareEffect } from '@/plugins/useDeepCompareEffect';
-
-const NetworkContainer = () => {
-    const [loading, setLoading] = useState(false);
-    const uuid = ServerContext.useStoreState((state) => state.server.data!.uuid);
-    const allocationLimit = ServerContext.useStoreState((state) => state.server.data!.featureLimits.allocations);
-    const allocations = ServerContext.useStoreState((state) => state.server.data!.allocations, isEqual);
-    const setServerFromState = ServerContext.useStoreActions((actions) => actions.server.setServerFromState);
-
-    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
-    const { data, error, mutate } = getServerAllocations();
-
-    useEffect(() => {
-        mutate(allocations);
-    }, []);
-
-    useEffect(() => {
-        clearAndAddHttpError(error);
-    }, [error]);
-
-    useDeepCompareEffect(() => {
-        if (!data) return;
-
-        setServerFromState((state) => ({ ...state, allocations: data }));
-    }, [data]);
-
-    const onCreateAllocation = () => {
-        clearFlashes();
-
-        setLoading(true);
-        createServerAllocation(uuid)
-            .then((allocation) => {
-                setServerFromState((s) => ({ ...s, allocations: s.allocations.concat(allocation) }));
-                return mutate(data?.concat(allocation), false);
-            })
-            .catch((error) => clearAndAddHttpError(error))
-            .then(() => setLoading(false));
-    };
-
-    return (
-        <ServerContentBlock showFlashKey={'server:network'} title={'Network'}>
-            {!data ? (
-                <Spinner size={'large'} centered />
-            ) : (
-                <>
-                    {data.map((allocation) => (
-                        <AllocationRow key={`${allocation.ip}:${allocation.port}`} allocation={allocation} />
-                    ))}
-                    {allocationLimit > 0 && (
-                        <Can action={'allocation.create'}>
-                            <SpinnerOverlay visible={loading} />
-                            <div css={tw`mt-6 sm:flex items-center justify-end`}>
-                                <p css={tw`text-sm text-neutral-300 mb-4 sm:mr-6 sm:mb-0`}>
-                                    You are currently using {data.length} of {allocationLimit} allowed allocations for
-                                    this server.
-                                </p>
-                                {allocationLimit > data.length && (
-                                    <Button css={tw`w-full sm:w-auto`} color={'primary'} onClick={onCreateAllocation}>
-                                        Create Allocation
-                                    </Button>
-                                )}
-                            </div>
-                        </Can>
-                    )}
-                </>
-            )}
-        </ServerContentBlock>
-    );
-};
-
-export default NetworkContainer;
diff --git a/resources/scripts/routers/routes.ts b/resources/scripts/routers/routes.ts
index 8fba64221..191c68eb3 100644
--- a/resources/scripts/routers/routes.ts
+++ b/resources/scripts/routers/routes.ts
@@ -4,7 +4,6 @@ import DatabasesContainer from '@/components/server/databases/DatabasesContainer
 import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
 import UsersContainer from '@/components/server/users/UsersContainer';
 import BackupContainer from '@/components/server/backups/BackupContainer';
-import NetworkContainer from '@/components/server/network/NetworkContainer';
 import StartupContainer from '@/components/server/startup/StartupContainer';
 import FileManagerContainer from '@/components/server/files/FileManagerContainer';
 import SettingsContainer from '@/components/server/settings/SettingsContainer';
@@ -116,12 +115,6 @@ export default {
             name: 'Backups',
             component: BackupContainer,
         },
-        {
-            path: '/network',
-            permission: 'allocation.*',
-            name: 'Network',
-            component: NetworkContainer,
-        },
         {
             path: '/startup',
             permission: 'startup.*',