FEATURE (pre-commit): Add building step to pre-commit

.pre-commit-config.yaml

@@ -18,6 +18,13 @@ repos:
         files: ^frontend/.*\.(ts|tsx|js|jsx)$
         pass_filenames: false
 
+      - id: frontend-build
+        name: Frontend Build
+        entry: bash -c "cd frontend && npm run build"
+        language: system
+        files: ^frontend/.*\.(ts|tsx|js|jsx|json|css)$
+        pass_filenames: false
+
   # Backend checks
   - repo: local
     hooks:

frontend/src/features/databases/ui/DatabaseComponent.tsx

@@ -3,6 +3,7 @@ import { useRef, useState } from 'react';
 import { useEffect } from 'react';
 
 import { type Database, databaseApi } from '../../../entity/databases';
+import type { UserProfile } from '../../../entity/users';
 import { BackupsComponent } from '../../backups';
 import { HealthckeckAttemptsComponent } from '../../healthcheck';
 import { DatabaseConfigComponent } from './DatabaseConfigComponent';
@@ -10,6 +11,7 @@ import { DatabaseConfigComponent } from './DatabaseConfigComponent';
 interface Props {
   contentHeight: number;
   databaseId: string;
+  user: UserProfile;
   onDatabaseChanged: (database: Database) => void;
   onDatabaseDeleted: () => void;
   isCanManageDBs: boolean;
@@ -18,6 +20,7 @@ interface Props {
 export const DatabaseComponent = ({
   contentHeight,
   databaseId,
+  user,
   onDatabaseChanged,
   onDatabaseDeleted,
   isCanManageDBs,
@@ -68,6 +71,7 @@ export const DatabaseComponent = ({
       {currentTab === 'config' && (
         <DatabaseConfigComponent
           database={database}
+          user={user}
           setDatabase={setDatabase}
           onDatabaseChanged={onDatabaseChanged}
           onDatabaseDeleted={onDatabaseDeleted}

frontend/src/features/databases/ui/DatabaseConfigComponent.tsx

@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react';
 
 import { backupConfigApi } from '../../../entity/backups';
 import { type Database, databaseApi } from '../../../entity/databases';
+import type { UserProfile } from '../../../entity/users';
 import { ToastHelper } from '../../../shared/toast';
 import { ConfirmationComponent } from '../../../shared/ui';
 import { EditBackupConfigComponent, ShowBackupConfigComponent } from '../../backups';
@@ -22,6 +23,7 @@ import { ShowDatabaseSpecificDataComponent } from './show/ShowDatabaseSpecificDa
 
 interface Props {
   database: Database;
+  user: UserProfile;
   setDatabase: (database?: Database | undefined) => void;
   onDatabaseChanged: (database: Database) => void;
   onDatabaseDeleted: () => void;
@@ -33,6 +35,7 @@ interface Props {
 
 export const DatabaseConfigComponent = ({
   database,
+  user,
   setDatabase,
   onDatabaseChanged,
   onDatabaseDeleted,
@@ -311,6 +314,7 @@ export const DatabaseConfigComponent = ({
               {isEditBackupConfig ? (
                 <EditBackupConfigComponent
                   database={database}
+                  user={user}
                   isShowCancelButton
                   onCancel={() => {
                     setIsEditBackupConfig(false);
@@ -464,6 +468,7 @@ export const DatabaseConfigComponent = ({
       {isShowTransferDialog && (
         <DatabaseTransferDialogComponent
           database={database}
+          user={user}
           currentStorageId={currentStorageId}
           onClose={() => setIsShowTransferDialog(false)}
           onTransferred={() => {

frontend/src/features/databases/ui/DatabaseTransferDialogComponent.tsx

@@ -8,6 +8,7 @@ import { type Database, databaseApi } from '../../../entity/databases';
 import type { Notifier } from '../../../entity/notifiers';
 import { notifierApi } from '../../../entity/notifiers';
 import { type Storage, getStorageLogoFromType, storageApi } from '../../../entity/storages';
+import type { UserProfile } from '../../../entity/users';
 import { type WorkspaceResponse, workspaceApi } from '../../../entity/workspaces';
 import { ToastHelper } from '../../../shared/toast';
 import { EditNotifierComponent } from '../../notifiers/ui/edit/EditNotifierComponent';
@@ -15,6 +16,7 @@ import { EditStorageComponent } from '../../storages/ui/edit/EditStorageComponen
 
 interface Props {
   database: Database;
+  user: UserProfile;
   currentStorageId?: string;
   onClose: () => void;
   onTransferred: () => void;
@@ -28,6 +30,7 @@ interface NotifierUsageInfo {
 
 export const DatabaseTransferDialogComponent = ({
   database,
+  user,
   currentStorageId,
   onClose,
   onTransferred,
@@ -419,6 +422,7 @@ export const DatabaseTransferDialogComponent = ({
 
           <EditStorageComponent
             workspaceId={selectedWorkspaceId}
+            user={user}
             isShowName
             isShowClose={false}
             onClose={() => setIsShowCreateStorage(false)}

frontend/src/features/databases/ui/DatabasesComponent.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 
 import { databaseApi } from '../../../entity/databases';
 import type { Database } from '../../../entity/databases';
+import type { UserProfile } from '../../../entity/users';
 import type { WorkspaceResponse } from '../../../entity/workspaces';
 import { useIsMobile } from '../../../shared/hooks';
 import { CreateDatabaseComponent } from './CreateDatabaseComponent';
@@ -12,12 +13,13 @@ import { DatabaseComponent } from './DatabaseComponent';
 interface Props {
   contentHeight: number;
   workspace: WorkspaceResponse;
+  user: UserProfile;
   isCanManageDBs: boolean;
 }
 
 const SELECTED_DATABASE_STORAGE_KEY = 'selectedDatabaseId';
 
-export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }: Props) => {
+export const DatabasesComponent = ({ contentHeight, workspace, user, isCanManageDBs }: Props) => {
   const isMobile = useIsMobile();
   const [isLoading, setIsLoading] = useState(true);
   const [databases, setDatabases] = useState<Database[]>([]);
@@ -157,6 +159,7 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
             <DatabaseComponent
               contentHeight={isMobile ? contentHeight - 50 : contentHeight}
               databaseId={selectedDatabaseId}
+              user={user}
               onDatabaseChanged={() => {
                 loadDatabases();
               }}
@@ -185,6 +188,7 @@ export const DatabasesComponent = ({ contentHeight, workspace, isCanManageDBs }:
           <div className="mt-5" />
 
           <CreateDatabaseComponent
+            user={user}
             workspaceId={workspace.id}
             onCreated={(databaseId) => {
               loadDatabases(false, databaseId);

frontend/src/pages/OauthStorageComponent.tsx

@@ -4,10 +4,13 @@ import { useEffect, useState } from 'react';
 import { GOOGLE_DRIVE_OAUTH_REDIRECT_URL } from '../constants';
 import { type Storage, StorageType } from '../entity/storages';
 import type { StorageOauthDto } from '../entity/storages/models/StorageOauthDto';
+import type { UserProfile } from '../entity/users';
+import { userApi } from '../entity/users';
 import { EditStorageComponent } from '../features/storages/ui/edit/EditStorageComponent';
 
 export function OauthStorageComponent() {
   const [storage, setStorage] = useState<Storage | undefined>();
+  const [user, setUser] = useState<UserProfile | undefined>();
 
   const exchangeGoogleOauthCode = async (oauthDto: StorageOauthDto) => {
     if (!oauthDto.storage.googleDriveStorage) {
@@ -73,6 +76,13 @@ export function OauthStorageComponent() {
   };
 
   useEffect(() => {
+    userApi
+      .getCurrentUser()
+      .then(setUser)
+      .catch(() => {
+        window.location.href = '/';
+      });
+
     const urlParams = new URLSearchParams(window.location.search);
 
     // Attempt 1: Check for the 'oauthDto' param (Third-party/Legacy way)
@@ -116,7 +126,7 @@ export function OauthStorageComponent() {
     alert('OAuth param not found. Ensure the redirect URL is configured correctly.');
   }, []);
 
-  if (!storage) {
+  if (!storage || !user) {
     return (
       <div className="mt-20 flex justify-center">
         <Spin />
@@ -140,6 +150,7 @@ export function OauthStorageComponent() {
 
         <EditStorageComponent
           workspaceId={storage.workspaceId}
+          user={user}
           isShowClose={false}
           onClose={() => {}}
           isShowName={false}

frontend/src/widgets/main/MainScreenComponent.tsx

@@ -341,6 +341,7 @@ export const MainScreenComponent = () => {
                       <DatabasesComponent
                         contentHeight={contentHeight}
                         workspace={selectedWorkspace}
+                        user={user}
                         isCanManageDBs={isCanManageDBs}
                         key={`databases-${selectedWorkspace.id}`}
                       />