startup-starter/skybridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sidebar fix

Browse Source
This commit is contained in:
Ryan Copley
2025-08-31 23:15:50 -04:00
parent 1430c97ae7
commit 23dfc171b8
10 changed files with 1836 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
kms/web/src/components/Applications.tsx
View File

@ -29,12 +29,13 @@ import {
import { useForm } from '@mantine/form';
import { notifications } from '@mantine/notifications';
import { apiService, Application, CreateApplicationRequest } from '../services/apiService';
import ApplicationSidebar from './ApplicationSidebar';
import dayjs from 'dayjs';
const Applications: React.FC = () => {
const [applications, setApplications] = useState<Application[]>([]);
const [loading, setLoading] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [sidebarOpen, setSidebarOpen] = useState(false);
const [editingApp, setEditingApp] = useState<Application | null>(null);
const [detailModalOpen, setDetailModalOpen] = useState(false);
const [selectedApp, setSelectedApp] = useState<Application | null>(null);
@ -122,7 +123,7 @@ const Applications: React.FC = () => {
color: 'green',
});
}
setModalOpen(false);
setSidebarOpen(false);
setEditingApp(null);
form.reset();
loadApplications();
@ -148,7 +149,7 @@ const Applications: React.FC = () => {
max_token_duration: `${app.max_token_duration / 3600}h`,
owner: app.owner,
});
setModalOpen(true);
setSidebarOpen(true);
};
const handleDelete = async (appId: string) => {
@ -247,7 +248,13 @@ const Applications: React.FC = () => {
));
return (
<Stack gap="lg">
<Stack
gap="lg"
style={{
transition: 'margin-right 0.3s ease',
marginRight: sidebarOpen ? '450px' : '0',
}}
>
<Group justify="space-between">
<div>
<Title order={2} mb="xs">
@ -259,7 +266,7 @@ const Applications: React.FC = () => {
onClick={() => {
setEditingApp(null);
form.reset();
setModalOpen(true);
setSidebarOpen(true);
}}
>
New Application
@ -288,7 +295,7 @@ const Applications: React.FC = () => {
onClick={() => {
setEditingApp(null);
form.reset();
setModalOpen(true);
setSidebarOpen(true);
}}
>
Create Application
@ -312,86 +319,17 @@ const Applications: React.FC = () => {
</Card>
)}
{/* Create/Edit Modal */}
<Modal
opened={modalOpen}
<ApplicationSidebar
opened={sidebarOpen}
onClose={() => {
setModalOpen(false);
setSidebarOpen(false);
setEditingApp(null);
form.reset();
}}
title={editingApp ? 'Edit Application' : 'Create New Application'}
size="lg"
>
<form onSubmit={form.onSubmit(handleSubmit)}>
<Stack gap="md">
<TextInput
label="Application ID"
placeholder="my-app-id"
required
{...form.getInputProps('app_id')}
disabled={!!editingApp}
/>
<TextInput
label="Application Link"
placeholder="https://myapp.example.com"
required
{...form.getInputProps('app_link')}
/>
<MultiSelect
label="Application Type"
placeholder="Select application types"
data={appTypeOptions}
required
{...form.getInputProps('type')}
/>
<TextInput
label="Callback URL"
placeholder="https://myapp.example.com/callback"
required
{...form.getInputProps('callback_url')}
/>
<TextInput
label="Token Prefix (Optional)"
placeholder="myapp_"
{...form.getInputProps('token_prefix')}
/>
<Group grow>
<TextInput
label="Token Renewal Duration"
placeholder="24h"
{...form.getInputProps('token_renewal_duration')}
/>
<TextInput
label="Max Token Duration"
placeholder="168h"
{...form.getInputProps('max_token_duration')}
/>
</Group>
<Group justify="flex-end" mt="md">
<Button
variant="subtle"
onClick={() => {
setModalOpen(false);
setEditingApp(null);
form.reset();
}}
>
Cancel
</Button>
<Button type="submit">
{editingApp ? 'Update Application' : 'Create Application'}
</Button>
</Group>
</Stack>
</form>
</Modal>
onSuccess={() => {
loadApplications();
}}
editingApp={editingApp}
/>
{/* Detail Modal */}
<Modal