)}
+ {type === 'password' && (
+ (
- undefined
+ const [selectedUser, setSelectedUser] = useState(
+ null
);
const userList = canManageUsers ? dataUserList : undefined;
useEffect(() => {
if (queryUid && userList && queryUid in userList) {
setSelectedUser(userList[queryUid]);
- } else setSelectedUser(undefined);
+ } else setSelectedUser(null);
}, [userList, queryUid]);
- function selectUser(user?: PublicUser) {
+ function selectUser(user: PublicUser | null) {
console.log('selectUser', user);
- if (user === undefined) {
- setSelectedUser(undefined);
+ if (user === null) {
+ setSelectedUser(null);
setQueryUid('');
} else {
setSelectedUser(user);
diff --git a/src/components/DashboardLayout/SettingsLeftNav.tsx b/src/components/DashboardLayout/SettingsLeftNav.tsx
index a6c2ee2b..114c87dd 100644
--- a/src/components/DashboardLayout/SettingsLeftNav.tsx
+++ b/src/components/DashboardLayout/SettingsLeftNav.tsx
@@ -1,51 +1,122 @@
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
import Button from 'components/Atoms/Button';
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { faXmark, faServer, faRightToBracket, faUser } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { BrowserLocationContext } from 'data/BrowserLocationContext';
import { RadioGroup } from '@headlessui/react';
import { SettingsContext } from 'data/SettingsContext';
import Avatar from 'components/Atoms/Avatar';
import clsx from 'clsx';
import { useUid } from 'data/UserInfo';
+import { AccountSettingsTabList, CoreSettingsTabList } from '../../../pages';
+
+
+
export default function SettingsLeftNav({ className }: { className?: string }) {
const { setPathname, setSearchParam } = useContext(BrowserLocationContext);
- const { userList, selectedUser, selectUser, tabIndex } =
- useContext(SettingsContext);
+ const { userList, selectedUser, selectUser} =
+ useContext(SettingsContext);
+ const setActive = useMemo(() => location.pathname.split('/')[2], [location.pathname]);
const uid = useUid();
+
return (
);
diff --git a/src/components/ErrorGraphic.tsx b/src/components/ErrorGraphic.tsx
index 508b0c32..a615f1f5 100644
--- a/src/components/ErrorGraphic.tsx
+++ b/src/components/ErrorGraphic.tsx
@@ -22,7 +22,7 @@ export default function ErrorGraphic({
return (
+
+ )}
+ {
+ typeModified === 'password'
+ ? setTypeModified('text')
+ : setTypeModified('password');
+ }}
+ key="reveal password"
+ />
+
+
= (args) => (
);
export const MinecraftVanilla = Template.bind({});
MinecraftVanilla.args = {
- game_type: { MinecraftJava: { variant: 'Vanilla' } },
+ game_type: { type: 'MinecraftJava', variant: { type: 'Vanilla' } },
};
diff --git a/src/components/Atoms/GameIcon.tsx b/src/components/Atoms/GameIcon.tsx
index 7a49c743..8c2fcc9b 100644
--- a/src/components/Atoms/GameIcon.tsx
+++ b/src/components/Atoms/GameIcon.tsx
@@ -1,36 +1,29 @@
-import { GameType, Games, GameVariants } from 'bindings/InstanceInfo';
import Tooltip from 'rc-tooltip';
-import { gameIcons, spanMap } from 'data/GameTypeMappings';
-const unknown_icon = '/assets/minecraft-missing-texture.svg';
+import { Game } from 'bindings/Game';
+import {
+ game_to_game_icon,
+ game_to_game_title,
+} from 'data/GameTypeMappings';
export default function GameIcon({
game_type,
className = 'h-8 w-8 rounded-sm',
}: {
- game_type: GameType;
+ game_type: Game;
className?: string;
}) {
- let icon = unknown_icon;
- let span = '';
- const game = Object.keys(game_type)[0] as Games;
- const variant = game_type[game]['variant'] as GameVariants;
-
- if (game in gameIcons) {
- if (variant in gameIcons[game]) {
- icon = gameIcons[game][variant];
- span = spanMap[game][variant];
- }
- }
+ const game_title = game_to_game_title(game_type);
+ const icon = game_to_game_icon(game_type);
return (
{span}}
+ overlay={{game_title}}
placement="bottom"
trigger={['hover']}
mouseEnterDelay={0.2}
>
- 
+
);
}
diff --git a/src/components/Atoms/ResizePanel.tsx b/src/components/Atoms/ResizePanel.tsx
index 09e0c4c5..4cc57c8b 100644
--- a/src/components/Atoms/ResizePanel.tsx
+++ b/src/components/Atoms/ResizePanel.tsx
@@ -114,6 +114,15 @@ const ResizePanel = forwardRef(
// initialSize is intentionally left out of the dependency array
}, [isHorizontal]);
+ useEffect(() => {
+ if (size > maxSize && maxSize > minSizeProps) {
+ setSize(maxSize);
+ }
+ if (size < minSizeProps) {
+ setSize(minSizeProps);
+ }
+ }, [maxSize, minSizeProps, setSize, size]);
+
const handleDrag = (e: DraggableEvent, ui: DraggableData) => {
const factor = direction === 'e' || direction === 's' ? -1 : 1;
diff --git a/src/components/ButtonMenu.tsx b/src/components/ButtonMenu.tsx
new file mode 100644
index 00000000..11f562d6
--- /dev/null
+++ b/src/components/ButtonMenu.tsx
@@ -0,0 +1,62 @@
+import Button from './Atoms/Button';
+import { TableRow } from './Table';
+import { Menu } from '@headlessui/react';
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+
+import clsx from 'clsx';
+
+interface MenuItemProperties {
+ className?: string;
+ label: string;
+ icon: IconDefinition;
+ variant?: 'contained' | 'text';
+ intention?: 'none' | 'info' | 'danger' | 'primary';
+ disabled: boolean;
+ onClick: (row: TableRow) => void;
+}
+
+export interface ButtonMenuConfig {
+ tableRows: TableRow[];
+ menuItems: MenuItemProperties[];
+ buttonIcon?: IconDefinition;
+}
+
+interface ButtonMenuProps extends ButtonMenuConfig {
+ rowIndex: number;
+}
+
+export default function ButtonMenu({ tableRows, rowIndex, menuItems, buttonIcon = faEllipsisVertical }: ButtonMenuProps) {
+ return (
+
+ );
+}
diff --git a/src/components/DashboardLayout/DashboardLayout.tsx b/src/components/DashboardLayout/DashboardLayout.tsx
index 2289253e..18f754ac 100644
--- a/src/components/DashboardLayout/DashboardLayout.tsx
+++ b/src/components/DashboardLayout/DashboardLayout.tsx
@@ -27,10 +27,11 @@ export default function DashboardLayout() {
const [showLocalSetupPrompt, setShowLocalSetupPrompt] = useState(false);
const { data: coreInfo, isLoading: coreInfoLoading } = useCoreInfo();
const { data: localCoreInfo } = useLocalCoreInfo();
- const [showMajorVersionModal, setShowMajorVersionModal] = useState(false);
+ const [showVersionMismatchModal, setShowVersionMismatchModal] =
+ useState(false);
const [showCoreErrorModal, setShowCoreErrorModal] = useState(false);
const dashboardVersion = packageinfo.version;
-
+
// open the error modal is coreConnectionStatus is error for more than 3 seconds
useEffect(() => {
if (coreConnectionStatus === 'error') {
@@ -38,17 +39,18 @@ export default function DashboardLayout() {
setShowCoreErrorModal(true);
}, 3000);
return () => clearTimeout(timeout);
- }else{
+ } else {
setShowCoreErrorModal(false);
}
}, [coreConnectionStatus]);
const versionMismatchModal = !coreInfoLoading && (
setShowMajorVersionModal(false)}
+ isOpen={showVersionMismatchModal}
+ onClose={() => setShowVersionMismatchModal(false)}
+ closeButtonText={'I understand, continue without updating'}
>
- Your dashboard and core have a major version mismatch! Please consider - updating to stay up to date with our latest changes. +
);
@@ -84,16 +94,27 @@ export default function DashboardLayout() {
if (valid(clientVersion) && valid(dashboardVersion)) {
if (eq(clientVersion, dashboardVersion)) return;
if (major(clientVersion) !== major(dashboardVersion))
- setShowMajorVersionModal(true);
+ setShowVersionMismatchModal(true);
else if (minor(clientVersion) !== minor(dashboardVersion))
- toast.warn(
- `There is a minor version mismatch! Core: ${clientVersion}, Dashboard: ${dashboardVersion}`,
- { toastId: 'minorVersionMismatch' }
- );
+ // toast.warn(
+ // `There is a minor version mismatch! Core: ${clientVersion}, Dashboard: ${dashboardVersion}`,
+ // { toastId: 'minorVersionMismatch' }
+ // );
+ setShowVersionMismatchModal(true);
+ else if (
+ major(clientVersion) === 0 &&
+ minor(clientVersion) === 4 &&
+ patch(clientVersion) < 4
+ )
+ setShowVersionMismatchModal(true);
else if (patch(clientVersion) !== patch(dashboardVersion))
toast.warn(
- `There is a patch version mismatch! Core: ${clientVersion}, Dashboard: ${dashboardVersion}`,
- { toastId: 'patchVersionMismatch' }
+ `Version mismatch! Is your core out of date? Core: ${clientVersion}, Dashboard: ${dashboardVersion}`,
+ {
+ toastId: 'patchVersionMismatch',
+ autoClose: 10000,
+ position: 'top-center',
+ }
);
}
}, [coreInfo?.version]);
diff --git a/src/components/DashboardLayout/SelectedInstanceInfo.tsx b/src/components/DashboardLayout/SelectedInstanceInfo.tsx
index 1194b792..ecb4ad2d 100644
--- a/src/components/DashboardLayout/SelectedInstanceInfo.tsx
+++ b/src/components/DashboardLayout/SelectedInstanceInfo.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo } from 'react';
import { RadioGroup } from '@headlessui/react';
import { InstanceContext } from 'data/InstanceContext';
import { useContext, useEffect } from 'react';
@@ -6,9 +6,9 @@ import useAnalyticsEventTracker from 'utils/hooks';
import clsx from 'clsx';
import { BrowserLocationContext } from 'data/BrowserLocationContext';
import InstanceCard from 'components/InstanceCard';
-import { InstanceTabListMap } from '../../data/GameTypeMappings';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExpand } from '@fortawesome/free-solid-svg-icons';
+import { tabs } from 'pages/InstanceTabs/InstanceTabs';
export const SelectedInstanceInfo = ({
className = '',
@@ -25,7 +25,7 @@ export const SelectedInstanceInfo = ({
const gaEventTracker = useAnalyticsEventTracker('Instance List');
const { setPathname } = useContext(BrowserLocationContext);
- const [setActive, setActiveTab] = useState(location.pathname.split('/')[2]);
+ const setActive = useMemo(() => location.pathname.split('/')[2], [location.pathname]);
useEffect(() => {
if (!isReady) return;
@@ -37,9 +37,6 @@ export const SelectedInstanceInfo = ({
);
}, [isReady, instances]);
- useEffect(() => {
- setActiveTab(location.pathname.split('/')[2]);
- }, [location.pathname]);
const uuid = selectedInstance?.uuid;
if (!selectedInstance || !uuid) {
@@ -74,40 +71,38 @@ export const SelectedInstanceInfo = ({
(
+
+
- )
- )}
+ {tab.icon}
+
+
Core Version:
@@ -58,8 +60,16 @@ export default function DashboardLayout() {
{dashboardVersion}
- Your dashboard and core have a major version mismatch! Please consider - updating to stay up to date with our latest changes. +
Your dashboard and core is incompatible!
+ This can cause unexpected behavior. Please update your core to the latest + version. Visit{' '} + + the wiki + {' '} + for more information.{tab.title}
+
+
+ ))}
{children}
);
diff --git a/src/components/DashboardLayout/SettingsLayout.tsx b/src/components/DashboardLayout/SettingsLayout.tsx
index 44e71ae0..50a89975 100644
--- a/src/components/DashboardLayout/SettingsLayout.tsx
+++ b/src/components/DashboardLayout/SettingsLayout.tsx
@@ -18,20 +18,20 @@ export const SettingsLayout = () => {
const [leftNavSize, setLeftNavSize] = useLocalStorage('leftNavSize', 220);
/* Start userList */
const [queryUid, setQueryUid] = useQueryParam('user', '');
- const [selectedUser, setSelectedUser] = useState
- {selectedUser ? (
-
@@ -35,7 +35,7 @@ export default function ErrorGraphic({
{message2 && (
([]);
const [clipboardAction, setClipboardAction] = useState<'copy' | 'cut'>('cut');
const [fileContent, setFileContent] = useState('');
- const boundingDivRef = useRef(null);
- const [boundingDivDimensions, setBoundingDivDimensions] = useState({
- height: 0,
- width: 0,
- });
+ const [
+ boundingDivRef,
+ { height: boundingDivHeight, width: boundingDivWidth },
+ ] = useElementSize();
const tickFile = (file: ClientFile, ticked: boolean) => {
if (ticked) {
@@ -91,15 +90,6 @@ export default function FileViewer() {
}
};
- useEffect(() => {
- if (boundingDivRef.current !== null) {
- setBoundingDivDimensions({
- height: boundingDivRef.current.offsetHeight,
- width: boundingDivRef.current.offsetWidth,
- });
- }
- }, [boundingDivRef]);
-
const atTopLevel = path === '.';
let directorySeparator = '\\';
// assume only linux paths contain /
@@ -359,6 +349,7 @@ export default function FileViewer() {
{message2}
diff --git a/src/components/FileViewer/CreateFolderForm.tsx b/src/components/FileViewer/CreateFolderForm.tsx index bf05026a..4482c490 100644 --- a/src/components/FileViewer/CreateFolderForm.tsx +++ b/src/components/FileViewer/CreateFolderForm.tsx @@ -59,7 +59,7 @@ export default function CreateFolderForm({ size : 0, creation_time: Date.now() / 1000, modification_time: Date.now() / 1000, - file_type: 'File' as FileType, + file_type: 'Directory' as FileType, }, ].sort(fileSorter) diff --git a/src/components/FileViewer/FileList.tsx b/src/components/FileViewer/FileList.tsx index 6c3d9599..cfe63ba3 100644 --- a/src/components/FileViewer/FileList.tsx +++ b/src/components/FileViewer/FileList.tsx @@ -30,7 +30,6 @@ const iconMap: { [key: string]: string } = { json: '/icons/json.svg', mcmeta: '/icons/json.svg', zip: '/icons/zip.svg', - rar: '/icons/zip.svg', gz: '/icons/zip.svg', tar: '/icons/zip.svg', jar: '/icons/jar.svg', diff --git a/src/components/FileViewer/FileViewer.tsx b/src/components/FileViewer/FileViewer.tsx index 0e433e64..fc6b3765 100644 --- a/src/components/FileViewer/FileViewer.tsx +++ b/src/components/FileViewer/FileViewer.tsx @@ -38,7 +38,7 @@ import { zipInstanceFiles, } from 'utils/apis'; import Button from 'components/Atoms/Button'; -import { useLocalStorage } from 'usehooks-ts'; +import { useElementSize, useLocalStorage } from 'usehooks-ts'; import ResizePanel from 'components/Atoms/ResizePanel'; import { Dialog, Menu, Transition } from '@headlessui/react'; import { useUserAuthorized } from 'data/UserInfo'; @@ -77,11 +77,10 @@ export default function FileViewer() { const [clipboard, setClipboard] = useState {
e.preventDefault();
@@ -655,7 +646,7 @@ export default function FileViewer() {
>
(null);
const isAtBottom = listRef.current
@@ -93,7 +95,7 @@ export default function GameConsole() {
consoleStatusColor = 'text-red-200';
}
// overwrites
- if (instance.state !== 'Running') {
+ if (instance.state === 'Stopped') {
consoleStatusMessage = `Instance is ${instance.state.toLowerCase()}`;
consoleStatusColor = 'text-gray-500';
}
@@ -101,7 +103,7 @@ export default function GameConsole() {
let consoleInputMessage = '';
if (!canAccessConsole || consoleStatus === 'no-permission')
consoleInputMessage = 'No permission';
- else if (instance.state !== 'Running')
+ else if (instance.state === 'Stopped')
consoleInputMessage = `Instance is ${instance.state.toLowerCase()}`;
else if (consoleStatus === 'closed')
consoleInputMessage = 'Console is closed';
@@ -109,18 +111,16 @@ export default function GameConsole() {
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'ArrowUp') {
setCommandNav((prev) => {
- prev = Math.max(prev - 1, 0)
+ prev = Math.max(prev - 1, 0);
setCommand(commandHistory[prev]);
- return prev
+ return prev;
});
-
} else if (event.key === 'ArrowDown') {
setCommandNav((prev) => {
- prev = Math.min(prev + 1, commandHistory.length - 1)
+ prev = Math.min(prev + 1, commandHistory.length - 1);
setCommand(commandHistory[prev]);
- return prev
+ return prev;
});
-
} else {
setCommandNav(commandHistory.length);
}
@@ -179,7 +179,7 @@ export default function GameConsole() {
e.preventDefault();
sendCommand(command);
appendCommandHistory(command);
- setCommandNav(prev => prev + 1);
+ setCommandNav((prev) => prev + 1);
setCommand('');
}}
>
diff --git a/src/components/Instance/Create/FieldFromManifest.tsx b/src/components/Instance/Create/FieldFromManifest.tsx
index 196ee87f..5625a5aa 100644
--- a/src/components/Instance/Create/FieldFromManifest.tsx
+++ b/src/components/Instance/Create/FieldFromManifest.tsx
@@ -2,7 +2,7 @@ import { toast } from 'react-toastify';
import FormComboField from './SetupFormFields/FormComboField';
import FormInputField from './SetupFormFields/FormInputField';
import FormRadioField from './SetupFormFields/FormRadioField';
-import { SettingManifest } from './form';
+import { SettingManifest } from 'bindings/SettingManifest';
export const FieldFromManifest = ({
setting,
diff --git a/src/components/Instance/Create/FormFromManifest.tsx b/src/components/Instance/Create/FormFromManifest.tsx
index 088bf0ee..08f8477b 100644
--- a/src/components/Instance/Create/FormFromManifest.tsx
+++ b/src/components/Instance/Create/FormFromManifest.tsx
@@ -1,32 +1,41 @@
-import FormInputField from './SetupFormFields/FormInputField';
-import FormRadioField from './SetupFormFields/FormRadioField';
-import FormComboField from './SetupFormFields/FormComboField';
-import { SectionManifest, SettingManifest } from './form';
-import { toast } from 'react-toastify';
import { FieldFromManifest } from './FieldFromManifest';
+import { SetupManifest } from 'bindings/SetupManifest';
export const FormFromManifest = ({
- section,
+ name,
+ description,
+ manifest,
children,
}: {
- section: SectionManifest;
+ name: string;
+ description: string;
+ manifest: SetupManifest;
children: React.ReactNode;
}) => {
- console.log("section", section)
return (
<>
- {section.name}
+ {name}
-
- {section.description}
+
+ {description}
{children}
-
- {Object.keys(section['settings']).map((field: string, i: number) => (
-
+ {Object.values(manifest['setting_sections']).map(
+ (section, i: number) => (
+
+ {Object.keys(section['settings']).map((field: string) => (
+
+ )
+ )}
);
};
diff --git a/src/components/Instance/Create/GameTypeSelectForm.tsx b/src/components/Instance/Create/GameTypeSelectForm.tsx
index c9f7e130..96967663 100644
--- a/src/components/Instance/Create/GameTypeSelectForm.tsx
+++ b/src/components/Instance/Create/GameTypeSelectForm.tsx
@@ -1,25 +1,32 @@
-import { HandlerGameType } from 'bindings/HandlerGameType';
import clsx from 'clsx';
import Spinner from 'components/DashboardLayout/Spinner';
import { InstanceGameTypes } from 'data/InstanceGameTypes';
import SelectGameCard from './SelectGameCard';
-import { gameTypeInfoFromHandlerType } from 'data/GameTypeMappings';
+import {
+ game_to_description,
+ game_to_game_title,
+ HandlerGameType_to_Game,
+} from 'data/GameTypeMappings';
+import SelectGenericGameCard from './SelectGenericGameCard';
+import { GameInstanceContext } from 'data/GameInstanceContext';
+import { useContext } from 'react';
export default function GameTypeSelectForm({
- gameType,
- setGameType,
+ manifestLoading,
+ manifestError,
className,
}: {
- gameType: HandlerGameType;
- setGameType: (gameType: HandlerGameType) => void;
+ manifestLoading: boolean;
+ manifestError: boolean;
className?: string;
}) {
- const { data: game_types, isLoading, error } = InstanceGameTypes();
+ const { gameType: selectedGameType, setGameType } =
+ useContext(GameInstanceContext);
+ const { data: game_types, isLoading } = InstanceGameTypes();
if (!game_types || isLoading) {
return
+
) => void;
}) => {
@@ -19,13 +19,13 @@ const SelectGameCard = ({
Select a game
@@ -27,23 +34,37 @@ export default function GameTypeSelectForm({ What will your instance be used for?
- {game_types.map((game) => {
- const { title, description, game_type } =
- gameTypeInfoFromHandlerType[game];
+ {/* setGameType('Generic')}
+ manifestLoading={manifestLoading}
+ errorText={manifestError ? 'Error fetching the instance' : ''}
+ /> */}
+ {game_types.map((game_type) => {
+ const game = HandlerGameType_to_Game[game_type];
return (
- <>
- setGameType(game)}
- />
-
+ setGameType(game_type)}
+ />
);
})}
diff --git a/src/components/Instance/Create/SelectGameCard.tsx b/src/components/Instance/Create/SelectGameCard.tsx
index 6c7cedfd..1355f9c9 100644
--- a/src/components/Instance/Create/SelectGameCard.tsx
+++ b/src/components/Instance/Create/SelectGameCard.tsx
@@ -1,7 +1,7 @@
import GameIcon from 'components/Atoms/GameIcon';
import React from 'react';
import clsx from 'clsx';
-import { GameType } from 'bindings/InstanceInfo';
+import { Game } from 'bindings/Game';
const SelectGameCard = ({
title,
description,
@@ -11,7 +11,7 @@ const SelectGameCard = ({
}: {
title: string;
description: string;
- game_type: GameType;
+ game_type: Game;
className?: string;
onClick?: (event: React.MouseEvent