Storage - is a place where backups will be stored (local disk, S3, Google Drive, etc.)
diff --git a/frontend/src/features/databases/ui/CreateDatabaseComponent.tsx b/frontend/src/features/databases/ui/CreateDatabaseComponent.tsx
index 3360970..3f6dfac 100644
--- a/frontend/src/features/databases/ui/CreateDatabaseComponent.tsx
+++ b/frontend/src/features/databases/ui/CreateDatabaseComponent.tsx
@@ -4,6 +4,7 @@ import { type BackupConfig, backupConfigApi, backupsApi } from '../../../entity/
import {
type Database,
DatabaseType,
+ type MysqlDatabase,
Period,
type PostgresqlDatabase,
databaseApi,
@@ -21,18 +22,14 @@ interface Props {
onClose: () => void;
}
-export const CreateDatabaseComponent = ({ workspaceId, onCreated, onClose }: Props) => {
- const [isCreating, setIsCreating] = useState(false);
- const [backupConfig, setBackupConfig] = useState();
- const [database, setDatabase] = useState({
+const createInitialDatabase = (workspaceId: string): Database =>
+ ({
id: undefined as unknown as string,
name: '',
workspaceId,
storePeriod: Period.MONTH,
- postgresql: {
- cpuCount: 1,
- } as unknown as PostgresqlDatabase,
+ postgresql: {} as PostgresqlDatabase,
type: DatabaseType.POSTGRES,
@@ -40,7 +37,24 @@ export const CreateDatabaseComponent = ({ workspaceId, onCreated, onClose }: Pro
notifiers: [],
sendNotificationsOn: [],
- } as Database);
+ }) as Database;
+
+const initializeDatabaseTypeData = (db: Database): Database => {
+ if (db.type === DatabaseType.POSTGRES && !db.postgresql) {
+ return { ...db, postgresql: {} as PostgresqlDatabase, mysql: undefined };
+ }
+
+ if (db.type === DatabaseType.MYSQL && !db.mysql) {
+ return { ...db, mysql: {} as MysqlDatabase, postgresql: undefined };
+ }
+
+ return db;
+};
+
+export const CreateDatabaseComponent = ({ workspaceId, onCreated, onClose }: Props) => {
+ const [isCreating, setIsCreating] = useState(false);
+ const [backupConfig, setBackupConfig] = useState();
+ const [database, setDatabase] = useState(createInitialDatabase(workspaceId));
const [step, setStep] = useState<
'base-info' | 'db-settings' | 'create-readonly-user' | 'backup-config' | 'notifiers'
@@ -74,11 +88,13 @@ export const CreateDatabaseComponent = ({ workspaceId, onCreated, onClose }: Pro
onClose()}
- onSaved={(database) => {
- setDatabase({ ...database });
+ onSaved={(db) => {
+ const initializedDb = initializeDatabaseTypeData(db);
+ setDatabase({ ...initializedDb });
setStep('db-settings');
}}
/>
diff --git a/frontend/src/features/databases/ui/DatabasesComponent.tsx b/frontend/src/features/databases/ui/DatabasesComponent.tsx
index 2088615..0b3c351 100644
--- a/frontend/src/features/databases/ui/DatabasesComponent.tsx
+++ b/frontend/src/features/databases/ui/DatabasesComponent.tsx
@@ -179,6 +179,7 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
footer={}
open={isShowAddDatabase}
onCancel={() => setIsShowAddDatabase(false)}
+ maskClosable={false}
width={420}
>
diff --git a/frontend/src/features/databases/ui/edit/CreateReadOnlyComponent.tsx b/frontend/src/features/databases/ui/edit/CreateReadOnlyComponent.tsx
index 0339855..b7ed52f 100644
--- a/frontend/src/features/databases/ui/edit/CreateReadOnlyComponent.tsx
+++ b/frontend/src/features/databases/ui/edit/CreateReadOnlyComponent.tsx
@@ -1,7 +1,7 @@
import { Button, Modal, Spin } from 'antd';
import { useEffect, useState } from 'react';
-import { type Database, databaseApi } from '../../../../entity/databases';
+import { type Database, DatabaseType, databaseApi } from '../../../../entity/databases';
interface Props {
database: Database;
@@ -21,6 +21,10 @@ export const CreateReadOnlyComponent = ({
const [isCreatingReadOnlyUser, setIsCreatingReadOnlyUser] = useState(false);
const [isShowSkipConfirmation, setShowSkipConfirmation] = useState(false);
+ const isPostgres = database.type === DatabaseType.POSTGRES;
+ const isMysql = database.type === DatabaseType.MYSQL;
+ const databaseTypeName = isPostgres ? 'PostgreSQL' : isMysql ? 'MySQL' : 'database';
+
const checkReadOnlyUser = async (): Promise => {
try {
const response = await databaseApi.isUserReadOnly(database);
@@ -36,8 +40,15 @@ export const CreateReadOnlyComponent = ({
try {
const response = await databaseApi.createReadOnlyUser(database);
- database.postgresql!.username = response.username;
- database.postgresql!.password = response.password;
+
+ if (isPostgres && database.postgresql) {
+ database.postgresql.username = response.username;
+ database.postgresql.password = response.password;
+ } else if (isMysql && database.mysql) {
+ database.mysql.username = response.username;
+ database.mysql.password = response.password;
+ }
+
onReadOnlyUserUpdated(database);
onContinue();
} catch (e) {
@@ -62,7 +73,6 @@ export const CreateReadOnlyComponent = ({
const isReadOnly = await checkReadOnlyUser();
if (isReadOnly) {
- // already has a read-only user
onContinue();
}
@@ -86,8 +96,8 @@ export const CreateReadOnlyComponent = ({
)}
+ {isShowType && (
+ Create a read-only user for Postgresus?
- A read-only user is a PostgreSQL user with limited permissions that can only read data - from your database, not modify it. This is recommended for backup operations because: + A read-only user is a {databaseTypeName} user with limited permissions that can only read + data from your database, not modify it. This is recommended for backup operations because:
-
diff --git a/frontend/src/features/databases/ui/edit/EditDatabaseBaseInfoComponent.tsx b/frontend/src/features/databases/ui/edit/EditDatabaseBaseInfoComponent.tsx
index eee1301..852f64c 100644
--- a/frontend/src/features/databases/ui/edit/EditDatabaseBaseInfoComponent.tsx
+++ b/frontend/src/features/databases/ui/edit/EditDatabaseBaseInfoComponent.tsx
@@ -1,12 +1,20 @@
-import { Button, Input } from 'antd';
+import { Button, Input, Select } from 'antd';
import { useEffect, useState } from 'react';
-import { type Database, databaseApi } from '../../../../entity/databases';
+import {
+ type Database,
+ DatabaseType,
+ type MysqlDatabase,
+ type PostgresqlDatabase,
+ databaseApi,
+ getDatabaseLogoFromType,
+} from '../../../../entity/databases';
interface Props {
database: Database;
isShowName?: boolean;
+ isShowType?: boolean;
isShowCancelButton?: boolean;
onCancel: () => void;
@@ -15,9 +23,15 @@ interface Props {
onSaved: (db: Database) => void;
}
+const databaseTypeOptions = [
+ { value: DatabaseType.POSTGRES, label: 'PostgreSQL' },
+ { value: DatabaseType.MYSQL, label: 'MySQL' },
+];
+
export const EditDatabaseBaseInfoComponent = ({
database,
isShowName,
+ isShowType,
isShowCancelButton,
onCancel,
saveButtonText,
@@ -33,6 +47,26 @@ export const EditDatabaseBaseInfoComponent = ({
setIsUnsaved(true);
};
+ const handleTypeChange = (newType: DatabaseType) => {
+ if (!editingDatabase) return;
+
+ const updatedDatabase: Database = {
+ ...editingDatabase,
+ type: newType,
+ };
+
+ if (newType === DatabaseType.POSTGRES && !editingDatabase.postgresql) {
+ updatedDatabase.postgresql = {} as PostgresqlDatabase;
+ updatedDatabase.mysql = undefined;
+ } else if (newType === DatabaseType.MYSQL && !editingDatabase.mysql) {
+ updatedDatabase.mysql = {} as MysqlDatabase;
+ updatedDatabase.postgresql = undefined;
+ }
+
+ setEditingDatabase(updatedDatabase);
+ setIsUnsaved(true);
+ };
+
const saveDatabase = async () => {
if (!editingDatabase) return;
if (isSaveToApi) {
@@ -59,7 +93,6 @@ export const EditDatabaseBaseInfoComponent = ({
if (!editingDatabase) return null;
- // mandatory-field check
const isAllFieldsFilled = !!editingDatabase.name?.trim();
return (
@@ -77,6 +110,28 @@ export const EditDatabaseBaseInfoComponent = ({
+
+ )}
+
Database type
+
+
+
+
+ })
+
+
{isShowCancelButton && (
diff --git a/frontend/src/features/storages/ui/edit/storages/EditS3StorageComponent.tsx b/frontend/src/features/storages/ui/edit/storages/EditS3StorageComponent.tsx
index 2d12701..f95e73a 100644
--- a/frontend/src/features/storages/ui/edit/storages/EditS3StorageComponent.tsx
+++ b/frontend/src/features/storages/ui/edit/storages/EditS3StorageComponent.tsx
@@ -104,6 +104,7 @@ export function EditS3StorageComponent({
size="small"
className="w-full max-w-[250px]"
placeholder="AKIAIOSFODNN7EXAMPLE"
+ autoComplete="new-password"
/>
@@ -124,6 +125,7 @@ export function EditS3StorageComponent({
setUnsaved();
}}
size="small"
+ autoComplete="new-password"
className="w-full max-w-[250px]"
placeholder="wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"
/>
diff --git a/frontend/src/features/storages/ui/edit/storages/EditSFTPStorageComponent.tsx b/frontend/src/features/storages/ui/edit/storages/EditSFTPStorageComponent.tsx
index 97db0f9..bc6c146 100644
--- a/frontend/src/features/storages/ui/edit/storages/EditSFTPStorageComponent.tsx
+++ b/frontend/src/features/storages/ui/edit/storages/EditSFTPStorageComponent.tsx
@@ -139,6 +139,7 @@ export function EditSFTPStorageComponent({ storage, setStorage, setUnsaved }: Pr
size="small"
className="w-full max-w-[250px]"
placeholder="password"
+ autoComplete="new-password"
/>
)}
diff --git a/frontend/src/features/users/ui/AdminPasswordComponent.tsx b/frontend/src/features/users/ui/AdminPasswordComponent.tsx
index 224d9d6..859b5e1 100644
--- a/frontend/src/features/users/ui/AdminPasswordComponent.tsx
+++ b/frontend/src/features/users/ui/AdminPasswordComponent.tsx
@@ -99,6 +99,7 @@ export function AdminPasswordComponent({
status={passwordError ? 'error' : undefined}
iconRender={(visible) => (visible ? Confirm password
@@ -111,6 +112,7 @@ export function AdminPasswordComponent({
setConfirmPassword(e.currentTarget.value);
}}
iconRender={(visible) => (visible ?
@@ -312,6 +313,7 @@ export function ProfileComponent({ contentHeight }: Props) {
iconRender={(visible) =>
visible ?