Skip to content

Commit

Permalink
feat: update database modals
Browse files Browse the repository at this point in the history
  • Loading branch information
@he3als
he3als committed Aug 20, 2024
1 parent f3b2720 commit 9d9a84e
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 70 deletions.
15 changes: 10 additions & 5 deletions resources/scripts/components/elements/CopyOnClick.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,20 @@ interface CopyOnClickProps {
children: React.ReactNode;
}

const CopyOnClick = ({ text, children }: CopyOnClickProps) => {
const CopyOnClick = ({ text, children, showInNotification }: CopyOnClickProps) => {
const [copied, setCopied] = useState(false);
const length = 80;
const stringText = String(text);
const truncatedText = stringText && stringText.length > length ? `${stringText.substring(0, length - 3)}...` : text;
let truncatedText;
if (showInNotification == false) {
truncatedText = '';
} else {
const length = 80;
const stringText = String(text);
truncatedText = stringText.length > length ? `"${stringText.substring(0, length - 3)}..."` : `"${stringText}"`;
}

useEffect(() => {
if (!copied) return;
toast(`Copied "${truncatedText}" to clipboard`);
toast(`Copied ${truncatedText} to clipboard.`);

const timeout = setTimeout(() => {
setCopied(false);
Expand Down
9 changes: 9 additions & 0 deletions resources/scripts/components/elements/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,15 @@ const inputStyle = css<Props>`
&:disabled {
}
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-radius: 0.5rem;
outline: none;
background-color: rgba(255, 255, 255, 0.09); /* Converted the hex color with alpha to rgba */
font-size: 0.875rem; /* 14px */
`;

const Input = styled.input<Props>`
Expand Down
2 changes: 0 additions & 2 deletions resources/scripts/components/elements/button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
);

const TextButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
// @ts-expect-error not sure how to get this correct
<Button ref={ref} className={clsx(styles.text, className)} {...props} />
));

const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({ className, ...props }, ref) => (
// @ts-expect-error not sure how to get this correct
<Button ref={ref} className={clsx(styles.danger, className)} {...props} />
));

Expand Down
134 changes: 76 additions & 58 deletions resources/scripts/components/server/databases/DatabaseRow.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { Form, Formik, FormikHelpers } from 'formik';
import { useState } from 'react';
import styled from 'styled-components';
import { object, string } from 'yup';

import FlashMessageRender from '@/components/FlashMessageRender';
import Button from '@/components/elements/Button';
import Can from '@/components/elements/Can';
import CopyOnClick from '@/components/elements/CopyOnClick';
import Field from '@/components/elements/Field';
import Input from '@/components/elements/Input';
import Label from '@/components/elements/Label';
import Modal from '@/components/elements/Modal';
import { Button } from '@/components/elements/button/index';
import RotatePasswordButton from '@/components/server/databases/RotatePasswordButton';

import { httpErrorToHuman } from '@/api/http';
Expand All @@ -20,6 +20,13 @@ import { ServerContext } from '@/state/server';

import useFlash from '@/plugins/useFlash';

const Label = styled.label`
display: inline-block;
color: #ffffff77;
font-size: 0.875rem;
padding-bottom: 0.5rem;
`;

interface Props {
database: ServerDatabase;
className?: string;
Expand Down Expand Up @@ -73,70 +80,81 @@ export default ({ database, className }: Props) => {
title='Confirm database deletion'
>
<FlashMessageRender byKey={'database:delete'} />
<p className={`text-sm`}>
Deleting a database is a permanent action, it cannot be undone. This will permanently delete
the <strong>{database.name}</strong> database and remove all associated data.
</p>
<Form className={`m-0 mt-6`}>
<Field
type={'text'}
id={'confirm_name'}
name={'confirm'}
label={'Confirm Database Name'}
description={'Enter the database name to confirm deletion.'}
/>
<div className={`mt-6 text-right`}>
<Button type={'button'} isSecondary onClick={() => setVisible(false)}>
Cancel
</Button>
<Button type={'submit'} color={'red'} disabled={!isValid}>
<div className='flex flex-col'>
<p>
Deleting a database is a permanent action, it cannot be undone. This will permanently
delete the <strong>{database.name}</strong> database and remove all its data.
</p>
<Form className='mt-6'>
<Field
type={'text'}
id={'confirm_name'}
name={'confirm'}
label={'Confirm Database Name'}
description={'Enter the database name to confirm deletion.'}
/>
<Button type={'submit'} color={'red'} className='min-w-full my-6' disabled={!isValid}>
Delete Database
</Button>
</div>
</Form>
</Form>
</div>
</Modal>
)}
</Formik>
<Modal visible={connectionVisible} onDismissed={() => setConnectionVisible(false)}>
<Modal
visible={connectionVisible}
title='Database connection details'
closeButton={true}
onDismissed={() => setConnectionVisible(false)}
>
<FlashMessageRender byKey={'database-connection-modal'} />
<h3 className={`mb-6 text-2xl`}>Database connection details</h3>
<div>
<Label>Endpoint</Label>
<CopyOnClick text={database.connectionString}>
<Input type={'text'} readOnly value={database.connectionString} />
</CopyOnClick>
</div>
<div className={`mt-6`}>
<Label>Connections from</Label>
<Input type={'text'} readOnly value={database.allowConnectionsFrom} />
</div>
<div className={`mt-6`}>
<Label>Username</Label>
<CopyOnClick text={database.username}>
<Input type={'text'} readOnly value={database.username} />
</CopyOnClick>
</div>
<Can action={'database.view_password'}>
<div className={`mt-6`}>
<Label>Password</Label>
<CopyOnClick text={database.password} showInNotification={false}>
<Input type={'text'} readOnly value={database.password} />
<div className='flex flex-col min-w-full gap-4'>
<div className='grid gap-4 grid-cols-2 min-w-full'>
<div className='flex flex-col'>
<Label>Endpoint</Label>
<CopyOnClick text={database.connectionString}>
<Input type={'text'} readOnly value={database.connectionString} />
</CopyOnClick>
</div>
<div className='flex flex-col'>
<Label>Connections from</Label>
<CopyOnClick text={database.allowConnectionsFrom}>
<Input type={'text'} readOnly value={database.allowConnectionsFrom} />
</CopyOnClick>
</div>
<div className='flex flex-col'>
<Label>Username</Label>
<CopyOnClick text={database.username}>
<Input type={'text'} readOnly value={database.username} />
</CopyOnClick>
</div>
<Can action={'database.view_password'}>
<div className='flex flex-col'>
<Label>Password</Label>
<div className='flex flex-row min-w-full gap-2'>
<CopyOnClick text={database.password} showInNotification={false}>
<Input
type={'password'}
readOnly
value={database.password}
className='flex-auto'
/>
</CopyOnClick>
<Can action={'database.update'}>
<RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase} />
</Can>
</div>
</div>
</Can>
</div>
<div className='flex flex-col'>
<div className='flex flex-row gap-2 align-middle items-center'>
<Label>JDBC Connection String</Label>
</div>
<CopyOnClick text={jdbcConnectionString} showInNotification={false}>
<Input type={'password'} readOnly value={jdbcConnectionString} />
</CopyOnClick>
</div>
</Can>
<div className={`mt-6`}>
<Label>JDBC Connection String</Label>
<CopyOnClick text={jdbcConnectionString} showInNotification={false}>
<Input type={'text'} readOnly value={jdbcConnectionString} />
</CopyOnClick>
</div>
<div className={`mt-6 text-right`}>
<Can action={'database.update'}>
<RotatePasswordButton databaseId={database.id} onUpdate={appendDatabase} />
</Can>
<Button isSecondary onClick={() => setConnectionVisible(false)}>
Close
</Button>
</div>
</Modal>
<div className={className}>
Expand Down
12 changes: 9 additions & 3 deletions resources/scripts/components/server/databases/RotatePasswordButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Actions, useStoreActions } from 'easy-peasy';
import { useState } from 'react';

import Button from '@/components/elements/Button';
import Spinner from '@/components/elements/Spinner';
import { Button } from '@/components/elements/button/index';

import { httpErrorToHuman } from '@/api/http';
import { ServerDatabase } from '@/api/server/databases/getServerDatabases';
Expand Down Expand Up @@ -38,8 +41,11 @@ export default ({ databaseId, onUpdate }: { databaseId: string; onUpdate: (datab
};

return (
<Button isSecondary color={'primary'} onClick={rotate} isLoading={loading}>
Rotate Password
<Button onClick={rotate}>
<div className='flex justify-center items-center h-4 w-4'>
{!loading && <FontAwesomeIcon icon={faRotateRight}></FontAwesomeIcon>}
{loading && <Spinner size={'small'} />}
</div>
</Button>
);
};
2 changes: 1 addition & 1 deletion resources/scripts/components/server/schedules/NewTaskButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import clsx from 'clsx';
import { useState } from 'react';

import { Button } from '@/components/elements/button/index';
import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';

import { Schedule } from '@/api/server/schedules/getServerSchedules';
import clsx from 'clsx';

interface Props {
schedule: Schedule;
Expand Down
4 changes: 3 additions & 1 deletion resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,9 @@ export default () => {
<span>N/A</span>
)}

<span className={`ml-4 pl-4 border-l-4 border-neutral-600 py-px hidden sm:inline`} />
<span
className={`ml-4 pl-4 border-l-4 border-neutral-600 py-px hidden sm:inline`}
/>
<br className={`sm:hidden`} />

<strong>Next run at:&nbsp;</strong>
Expand Down

0 comments on commit 9d9a84e

Please sign in to comment.