From bd895b5cf8598c28d52a4f815b88c32c8bb3ff0e Mon Sep 17 00:00:00 2001
From: "s.teleshev" <s.teleshev@mu.se>
Date: Mon, 11 Dec 2023 21:11:09 +0100
Subject: [PATCH] CB-4356 highlight invalid fields after tab being switched

---
 .../core-ui/src/Tabs/TabPanelValidationHandler.tsx  | 13 ++++++++++---
 webapp/packages/core-ui/src/locales/en.ts           |  1 +
 webapp/packages/core-ui/src/locales/it.ts           |  1 +
 webapp/packages/core-ui/src/locales/ru.ts           |  1 +
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/webapp/packages/core-ui/src/Tabs/TabPanelValidationHandler.tsx b/webapp/packages/core-ui/src/Tabs/TabPanelValidationHandler.tsx
index 0c17373f82..bc437cc015 100644
--- a/webapp/packages/core-ui/src/Tabs/TabPanelValidationHandler.tsx
+++ b/webapp/packages/core-ui/src/Tabs/TabPanelValidationHandler.tsx
@@ -4,6 +4,8 @@ import { TabsContext } from './TabsContext';
 import { FormContext, useExecutor, useObjectRef } from '@cloudbeaver/core-blocks';
 import { TabPanelValidationHandlerContext } from './TabPanelValidationHandlerContext';
 import { SyncExecutor } from '@cloudbeaver/core-executor';
+import { useService } from '@cloudbeaver/core-di';
+import { NotificationService } from '@cloudbeaver/core-events';
 
 export interface ITabPanelHandlerProps {
   children: React.ReactNode;
@@ -15,6 +17,7 @@ export const TabPanelValidationHandler = observer(function TabPanelValidationHan
   const selectedTab = state?.state.selectedId;
   const invalidTabs = useRef<Set<string>>(new Set());
   const [resetExecutor] = useState(() => new SyncExecutor());
+  const notificationService = useService(NotificationService);
 
   if (!state) {
     throw new Error('TabsState should be defined');
@@ -24,7 +27,7 @@ export const TabPanelValidationHandler = observer(function TabPanelValidationHan
     invalidTabs.current = new Set();
   }
 
-  const validate = useCallback((tabId: string) => {
+  const validate = useCallback(async (tabId: string) => {
     invalidTabs.current.add(tabId);
   
     setTimeout(() => {
@@ -38,9 +41,13 @@ export const TabPanelValidationHandler = observer(function TabPanelValidationHan
         return;
       }
 
-      state.open(next);
+      state.open(next).then(() => {
+        formContext?.reportValidity();
+      }).catch(() => {
+        notificationService.logError({ title: 'core_ui_form_save_error', message: 'core_ui_switch_tab_error' });
+      });
     }, 0);
-  }, [selectedTab, state]);
+  }, [selectedTab, state, formContext]);
 
   useExecutor({
     executor: resetExecutor,
diff --git a/webapp/packages/core-ui/src/locales/en.ts b/webapp/packages/core-ui/src/locales/en.ts
index d8a33c5409..0542cd97a3 100644
--- a/webapp/packages/core-ui/src/locales/en.ts
+++ b/webapp/packages/core-ui/src/locales/en.ts
@@ -1,4 +1,5 @@
 export default [
   ['core_ui_empty', 'Empty'],
   ['core_ui_form_save_error', 'Error occurred when saving the form'],
+  ['core_ui_switch_tab_error', 'Cannot switch tab during form validation'],
 ];
diff --git a/webapp/packages/core-ui/src/locales/it.ts b/webapp/packages/core-ui/src/locales/it.ts
index d8a33c5409..0542cd97a3 100644
--- a/webapp/packages/core-ui/src/locales/it.ts
+++ b/webapp/packages/core-ui/src/locales/it.ts
@@ -1,4 +1,5 @@
 export default [
   ['core_ui_empty', 'Empty'],
   ['core_ui_form_save_error', 'Error occurred when saving the form'],
+  ['core_ui_switch_tab_error', 'Cannot switch tab during form validation'],
 ];
diff --git a/webapp/packages/core-ui/src/locales/ru.ts b/webapp/packages/core-ui/src/locales/ru.ts
index 5bf3c48f13..802da48e06 100644
--- a/webapp/packages/core-ui/src/locales/ru.ts
+++ b/webapp/packages/core-ui/src/locales/ru.ts
@@ -1,4 +1,5 @@
 export default [
   ['core_ui_empty', 'Пусто'],
   ['core_ui_form_save_error', 'Ошибка при сохранении формы'],
+  ['core_ui_switch_tab_error', 'Невозможно переключить вкладку во время валидации формы'],
 ];