chore: ui nested structure and form error casing feedback (#12597)

* chore(ui): ui feedback

* fix: cypress test

openmetadata-ui/src/main/resources/ui/cypress/common/common.js

@@ -220,7 +220,7 @@ export const testServiceCreationAndIngestion = ({
   // validation should work
   cy.get('[data-testid="next-button"]').should('exist').click();
 
-  cy.get('#name_help').should('be.visible').contains('name is required');
+  cy.get('#name_help').should('be.visible').contains('Name is required');
 
   // invalid name validation should work
   cy.get('[data-testid="service-name"]').should('exist').type('!@#$%^&*()');
@@ -725,10 +725,10 @@ export const addCustomPropertiesForEntity = (
   // validation should work
   cy.get('[data-testid="create-button"]').scrollIntoView().click();
 
-  cy.get('#name_help').should('contain', 'name is required');
-  cy.get('#propertyType_help').should('contain', 'propertyType is required');
+  cy.get('#name_help').should('contain', 'Name is required');
+  cy.get('#propertyType_help').should('contain', 'Property Type is required');
 
-  cy.get('#description_help').should('contain', 'description is required');
+  cy.get('#description_help').should('contain', 'Description is required');
 
   // capital case validation
   cy.get('[data-testid="name"]')

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Glossary.spec.js

@@ -76,10 +76,10 @@ const validateForm = () => {
   cy.get('#name_help')
     .scrollIntoView()
     .should('be.visible')
-    .contains('name is required');
+    .contains('Name is required');
   cy.get('#description_help')
     .should('be.visible')
-    .contains('description is required');
+    .contains('Description is required');
 
   // max length validation
   cy.get('[data-testid="name"]')

openmetadata-ui/src/main/resources/ui/cypress/e2e/Pages/Tags.spec.js

@@ -60,10 +60,10 @@ const validateForm = () => {
   submitForm();
 
   // error messages
-  cy.get('#tags_name_help').should('be.visible').contains('name is required');
+  cy.get('#tags_name_help').should('be.visible').contains('Name is required');
   cy.get('#tags_description_help')
     .should('be.visible')
-    .contains('description is required');
+    .contains('Description is required');
 
   // validation should work for invalid names
 

openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx

@@ -13,6 +13,7 @@
 
 import { Popover, Space, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
+import { ExpandableConfig } from 'antd/lib/table/interface';
 import FilterTablePlaceHolder from 'components/common/error-with-placeholder/FilterTablePlaceHolder';
 import TableDescription from 'components/TableDescription/TableDescription.component';
 import TableTags from 'components/TableTags/TableTags.component';
@@ -63,6 +64,7 @@ const SchemaTable = ({
   const { t } = useTranslation();
 
   const [searchedColumns, setSearchedColumns] = useState<Column[]>([]);
+  const [expandedRowKeys, setExpandedRowKeys] = useState<string[]>([]);
 
   const sortByOrdinalPosition = useMemo(
     () => sortBy(tableColumns, 'ordinalPosition'),
@@ -373,6 +375,21 @@ const SchemaTable = ({
       onThreadLinkSelect,
     ]
   );
+  const expandableConfig: ExpandableConfig<Column> = useMemo(
+    () => ({
+      ...getTableExpandableConfig<Column>(),
+      rowExpandable: (record) => !isEmpty(record.children),
+      expandedRowKeys,
+      onExpand: (expanded, record) => {
+        setExpandedRowKeys(
+          expanded
+            ? [...expandedRowKeys, record.fullyQualifiedName ?? '']
+            : expandedRowKeys.filter((key) => key !== record.fullyQualifiedName)
+        );
+      },
+    }),
+    [expandedRowKeys]
+  );
 
   useEffect(() => {
     if (!searchText) {
@@ -391,15 +408,12 @@ const SchemaTable = ({
         columns={columns}
         data-testid="entity-table"
         dataSource={data}
-        expandable={{
-          ...getTableExpandableConfig<Column>(),
-          rowExpandable: (record) => !isEmpty(record.children),
-        }}
+        expandable={expandableConfig}
         locale={{
           emptyText: <FilterTablePlaceHolder />,
         }}
         pagination={false}
-        rowKey="id"
+        rowKey="fullyQualifiedName"
         scroll={TABLE_SCROLL_VALUE}
         size="middle"
       />

openmetadata-ui/src/main/resources/ui/src/utils/formUtils.tsx

@@ -64,7 +64,10 @@ export const getField = (field: FieldProp) => {
   if (required) {
     fieldRules = [
       ...fieldRules,
-      { required, message: i18n.t('label.field-required', { field: name }) },
+      {
+        required,
+        message: i18n.t('label.field-required', { field: startCase(name) }),
+      },
     ];
   }