Add rename and delete workspace ui elements

This commit is contained in:
2024-10-27 17:39:56 +01:00
parent 17c03c2d14
commit c5e0937070
5 changed files with 159 additions and 34 deletions

View File

@@ -1,11 +1,21 @@
import React, { useReducer, useEffect, useCallback, useRef } from 'react';
import { Modal, Badge, Button, Group, Title } from '@mantine/core';
import {
Modal,
Badge,
Button,
Group,
Title,
Stack,
Divider,
} from '@mantine/core';
import { notifications } from '@mantine/notifications';
import { useWorkspace } from '../contexts/WorkspaceContext';
import AppearanceSettings from './settings/AppearanceSettings';
import EditorSettings from './settings/EditorSettings';
import GitSettings from './settings/GitSettings';
import GeneralSettings from './settings/GeneralSettings';
import { useModalContext } from '../contexts/ModalContext';
import DangerZoneSettings from './settings/DangerZoneSettings';
const initialState = {
localSettings: {},
@@ -100,19 +110,28 @@ const Settings = () => {
centered
size="lg"
>
<Stack spacing="xl">
{state.hasUnsavedChanges && (
<Badge color="yellow" variant="light" mb="md">
<Badge color="yellow" variant="light">
Unsaved Changes
</Badge>
)}
<GeneralSettings />
<Divider />
<AppearanceSettings
themeSettings={state.localSettings.theme}
onThemeChange={(newTheme) => handleInputChange('theme', newTheme)}
/>
<Divider />
<EditorSettings
autoSave={state.localSettings.autoSave}
onAutoSaveChange={(value) => handleInputChange('autoSave', value)}
/>
<Divider />
<GitSettings
gitEnabled={state.localSettings.gitEnabled}
gitUrl={state.localSettings.gitUrl}
@@ -122,12 +141,16 @@ const Settings = () => {
gitCommitMsgTemplate={state.localSettings.gitCommitMsgTemplate}
onInputChange={handleInputChange}
/>
<Group justify="flex-end" mt="xl">
<DangerZoneSettings />
<Group justify="flex-end">
<Button variant="default" onClick={handleClose}>
Cancel
</Button>
<Button onClick={handleSubmit}>Save Changes</Button>
</Group>
</Stack>
</Modal>
);
};

View File

@@ -0,0 +1,35 @@
import React from 'react';
import { Modal, Text, Button, Group, Stack } from '@mantine/core';
const DeleteWorkspaceModal = ({
opened,
onClose,
onConfirm,
workspaceName,
}) => (
<Modal
opened={opened}
onClose={onClose}
title="Delete Workspace"
centered
size="sm"
>
<Stack>
<Text>
Are you sure you want to delete workspace "{workspaceName}"? This action
cannot be undone and all files in this workspace will be permanently
deleted.
</Text>
<Group justify="flex-end" mt="xl">
<Button variant="default" onClick={onClose}>
Cancel
</Button>
<Button color="red" onClick={onConfirm}>
Delete Workspace
</Button>
</Group>
</Stack>
</Modal>
);
export default DeleteWorkspaceModal;

View File

@@ -0,0 +1,40 @@
import React, { useState } from 'react';
import { Box, Button, Title } from '@mantine/core';
import DeleteWorkspaceModal from '../modals/DeleteWorkspaceModal';
import { useWorkspace } from '../../contexts/WorkspaceContext';
const DangerZoneSettings = () => {
const { currentWorkspace } = useWorkspace();
const [deleteModalOpened, setDeleteModalOpened] = useState(false);
const handleDelete = () => {
// TODO: Implement delete functionality
setDeleteModalOpened(false);
};
return (
<Box mb="md">
<Title order={3} mb="md">
Danger Zone
</Title>
<Button
color="red"
variant="light"
onClick={() => setDeleteModalOpened(true)}
fullWidth
>
Delete Workspace
</Button>
<DeleteWorkspaceModal
opened={deleteModalOpened}
onClose={() => setDeleteModalOpened(false)}
onConfirm={handleDelete}
workspaceName={currentWorkspace?.name}
/>
</Box>
);
};
export default DangerZoneSettings;

View File

@@ -0,0 +1,32 @@
import React from 'react';
import { Title, Box, TextInput, Text, Grid } from '@mantine/core';
import { useWorkspace } from '../../contexts/WorkspaceContext';
const GeneralSettings = ({ onInputChange }) => {
const { currentWorkspace } = useWorkspace();
return (
<Box mb="md">
<Title order={3} mb="md">
General
</Title>
<Grid gutter="md" align="center">
<Grid.Col span={6}>
<Text size="sm">Workspace Name</Text>
</Grid.Col>
<Grid.Col span={6}>
<TextInput
value={currentWorkspace?.name || ''}
onChange={(event) =>
onInputChange('name', event.currentTarget.value)
}
placeholder="Enter workspace name"
/>
</Grid.Col>
</Grid>
</Box>
);
};
export default GeneralSettings;

View File

@@ -61,11 +61,6 @@ export const WorkspaceProvider = ({ children }) => {
setLoading(true);
await updateLastWorkspace(workspaceId);
await loadWorkspaceData(workspaceId);
notifications.show({
title: 'Success',
message: 'Workspace switched successfully',
color: 'green',
});
} catch (error) {
console.error('Failed to switch workspace:', error);
notifications.show({