fix(ui): ui feedbacks for 1.2 release (#13522)

* fix(ui): ui feedbacks for 1.2 release * fix notification panel height issue and data model expand icon issue * Data Quality, test creation, and minimizing the side panel. It shows the name as "Setup Guide.", It should be "Data Profiler Metrics." * changes locales * fix: displayName for the test cases * fix: Remove Domain shows tool tip as "Remove Owner" * chore: remove box shadow from primary buttons * fix: icon alignment in activity feed tab * Long names should be truncated * Increase the profile picture size to align with both the name and the persona * Text in Knowledge panels should be of the same size * Domain should be displayed on the explore card if the domain is available for any entity * If the Domains not configure the search filter is empty. "No data available." -> "No Domains are Assigned to Tables" etc. * fix: unit tests * fix: unit tets --------- Co-authored-by: Ashish Gupta <ashish@getcollate.io> Co-authored-by: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
open-metadata · Oct 14, 2023 · 7c25b5f · 7c25b5f
1 parent 753e182
commit 7c25b5f
Show file tree

Hide file tree

Showing 43 changed files with 218 additions and 86 deletions.
diff --git a/openmetadata-service/src/main/resources/json/data/tests/columnValueMaxToBeBetween.json b/openmetadata-service/src/main/resources/json/data/tests/columnValueMaxToBeBetween.json
@@ -1,7 +1,7 @@
 {
     "name": "columnValueMaxToBeBetween",
     "fullyQualifiedName": "columnValueMaxToBeBetween",
-    "displayName": "Column Value Max. to be Between",
+    "displayName": "Column Value Max. To Be Between",
     "description": "This schema defines the test ColumnValueMaxToBeBetween. Test the maximum value in a col is within a range.",
     "entityType": "COLUMN",
     "testPlatforms": ["OpenMetadata", "DBT"],

diff --git a/openmetadata-service/src/main/resources/json/data/tests/columnValueMeanToBeBetween.json b/openmetadata-service/src/main/resources/json/data/tests/columnValueMeanToBeBetween.json
@@ -1,7 +1,7 @@
 {
     "name": "columnValueMeanToBeBetween",
     "fullyQualifiedName": "columnValueMeanToBeBetween",
-    "displayName": "Column Value Mean To BeBetween",
+    "displayName": "Column Value Mean To Be Between",
     "description": "This schema defines the test ColumnValueMeanToBeBetween. Test the mean value in a col is within a range.",
     "entityType": "COLUMN",
     "testPlatforms": ["OpenMetadata"],

diff --git a/...in/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx b/...in/resources/ui/src/components/ActivityFeed/ActivityFeedTab/ActivityFeedTab.component.tsx
@@ -29,7 +29,10 @@ import { ReactComponent as CheckIcon } from '../../../assets/svg/ic-check.svg';
 import { ReactComponent as MentionIcon } from '../../../assets/svg/ic-mentions.svg';
 import { ReactComponent as TaskIcon } from '../../../assets/svg/ic-task.svg';
 import { ReactComponent as TaskListIcon } from '../../../assets/svg/task-ic.svg';
-import { ICON_DIMENSION } from '../../../constants/constants';
+import {
+  COMMON_ICON_STYLES,
+  ICON_DIMENSION,
+} from '../../../constants/constants';
 import { observerOptions } from '../../../constants/Mydata.constants';
 import { EntityTabs, EntityType } from '../../../enums/entity.enum';
 import { FeedFilter } from '../../../enums/mydata.enum';
@@ -298,7 +301,10 @@ export const ActivityFeedTab = ({
             label: (
               <div className="d-flex justify-between">
                 <Space align="center" size="small">
-                  <AllActivityIcon {...ICON_DIMENSION} />
+                  <AllActivityIcon
+                    style={COMMON_ICON_STYLES}
+                    {...ICON_DIMENSION}
+                  />
                   <span>{t('label.all')}</span>
                 </Space>
 
@@ -316,7 +322,7 @@ export const ActivityFeedTab = ({
           {
             label: (
               <Space align="center" size="small">
-                <MentionIcon {...ICON_DIMENSION} />
+                <MentionIcon style={COMMON_ICON_STYLES} {...ICON_DIMENSION} />
                 <span>{t('label.mention-plural')}</span>
               </Space>
             ),
@@ -326,7 +332,10 @@ export const ActivityFeedTab = ({
             label: (
               <div className="d-flex justify-between">
                 <Space align="center" size="small">
-                  <TaskListIcon {...ICON_DIMENSION} />
+                  <TaskListIcon
+                    style={COMMON_ICON_STYLES}
+                    {...ICON_DIMENSION}
+                  />
                   <span>{t('label.task-plural')}</span>
                 </Space>
                 <span>{getCountBadge(tasksCount, '', isTaskActiveTab)}</span>

diff --git a/...adata-ui/src/main/resources/ui/src/components/AddDataQualityTest/AddDataQualityTestV1.tsx b/...adata-ui/src/main/resources/ui/src/components/AddDataQualityTest/AddDataQualityTestV1.tsx
@@ -293,7 +293,7 @@ const AddDataQualityTestV1: React.FC<AddDataQualityTestProps> = ({
         flex: 0.4,
         overlay: {
           displayThreshold: 200,
-          header: t('label.setup-guide'),
+          header: t('label.data-profiler-metrics'),
           rotation: 'counter-clockwise',
         },
       }}

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx
@@ -22,7 +22,7 @@ import {
   Switch,
 } from 'antd';
 import { AxiosError } from 'axios';
-import { isEmpty, isUndefined, map, trim } from 'lodash';
+import { compact, isEmpty, map, trim } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { VALIDATION_MESSAGES } from '../../constants/constants';
@@ -33,6 +33,7 @@ import {
   CreatePasswordType,
   CreateUser as CreateUserSchema,
 } from '../../generated/api/teams/createUser';
+import { EntityReference } from '../../generated/entity/type';
 import { AuthProvider } from '../../generated/settings/settings';
 import { checkEmailInUse, generateRandomPwd } from '../../rest/auth-API';
 import { getJWTTokenExpiryOptions } from '../../utils/BotsUtils';
@@ -60,9 +61,9 @@ const CreateUser = ({
   const { authConfig } = useAuthContext();
   const [isAdmin, setIsAdmin] = useState(false);
   const [isBot, setIsBot] = useState(forceBot);
-  const [selectedTeams, setSelectedTeams] = useState<Array<string | undefined>>(
-    []
-  );
+  const [selectedTeams, setSelectedTeams] = useState<
+    Array<EntityReference | undefined>
+  >([]);
   const [isPasswordGenerating, setIsPasswordGenerating] = useState(false);
 
   const isAuthProviderBasic = useMemo(
@@ -105,9 +106,7 @@ const CreateUser = ({
   const handleSave: FormProps['onFinish'] = (values) => {
     const isPasswordGenerated =
       passwordGenerator === CreatePasswordGenerator.AutomaticGenerate;
-    const validTeam = selectedTeams.filter(
-      (id) => !isUndefined(id)
-    ) as string[];
+    const validTeam = compact(selectedTeams).map((team) => team.id);
 
     const { email, displayName, tokenExpiry, confirmPassword, description } =
       values;

diff --git a/...tadata-ui/src/main/resources/ui/src/components/DataModels/ModelTab/ModelTab.component.tsx b/...tadata-ui/src/main/resources/ui/src/components/DataModels/ModelTab/ModelTab.component.tsx
@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Table, Typography } from 'antd';
+import { Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { cloneDeep, isUndefined } from 'lodash';
 import { EntityTags } from 'Models';
@@ -25,6 +25,7 @@ import { TagLabel, TagSource } from '../../../generated/type/tagLabel';
 import { updateDataModelColumnDescription } from '../../../utils/DataModelsUtils';
 import { getEntityName } from '../../../utils/EntityUtils';
 import { updateFieldTags } from '../../../utils/TableUtils';
+import Table from '../../common/Table/Table';
 import { ModelTabProps } from './ModelTab.interface';
 
 const ModelTab = ({

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Explore/ExploreQuickFilters.tsx
@@ -34,6 +34,7 @@ import { showErrorToast } from '../../utils/ToastUtils';
 import SearchDropdown from '../SearchDropdown/SearchDropdown';
 import { SearchDropdownOption } from '../SearchDropdown/SearchDropdown.interface';
 import { useAdvanceSearch } from './AdvanceSearchProvider/AdvanceSearchProvider.component';
+import { ExploreSearchIndex } from './explore.interface';
 import { ExploreQuickFiltersProps } from './ExploreQuickFilters.interface';
 
 const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
@@ -196,6 +197,7 @@ const ExploreQuickFilters: FC<ExploreQuickFiltersProps> = ({
           <SearchDropdown
             highlight
             fixedOrderOptions={field.key === TIER_FQN_KEY}
+            index={index as ExploreSearchIndex}
             isSuggestionsLoading={isOptionsLoading}
             key={field.key}
             label={field.label}

diff --git a/...ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx b/...ui/src/main/resources/ui/src/components/ExploreV1/ExploreSearchCard/ExploreSearchCard.tsx
@@ -30,6 +30,7 @@ import {
   getEntityLinkFromType,
   getEntityName,
 } from '../../../utils/EntityUtils';
+import { getDomainPath } from '../../../utils/RouterUtils';
 import { stringToHTML } from '../../../utils/StringsUtils';
 import { getServiceIcon, getUsagePercentile } from '../../../utils/TableUtils';
 import TitleBreadcrumb from '../../common/title-breadcrumb/title-breadcrumb.component';
@@ -81,6 +82,18 @@ const ExploreSearchCard: React.FC<ExploreSearchCardProps> = forwardRef<
         },
       ];
 
+      if (source?.domain) {
+        const domain = getEntityName(source.domain);
+        const domainLink = getDomainPath(source.domain.fullyQualifiedName);
+        _otherDetails.push({
+          key: 'Domain',
+          value: domainLink,
+          placeholderText: domain,
+          isLink: true,
+          openInNewTab: false,
+        });
+      }
+
       if (
         source.entityType !== EntityType.GLOSSARY_TERM &&
         source.entityType !== EntityType.TAG

diff --git a/...data-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx b/...data-ui/src/main/resources/ui/src/components/MyData/LeftSidebar/LeftSidebar.component.tsx
@@ -49,7 +49,7 @@ const LeftSidebar = () => {
         label: (
           <Tooltip
             overlayClassName="left-panel-tooltip"
-            placement="right"
+            placement="topLeft"
             title={
               <Typography.Text className="left-panel-label">
                 {t('label.govern')}

diff --git a/...ta-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx b/...ta-ui/src/main/resources/ui/src/components/MyData/MyDataWidget/MyDataWidget.component.tsx
@@ -146,10 +146,12 @@ const MyDataWidgetInternal = ({
                 );
               })
             ) : (
-              <Transi18next
-                i18nKey="message.no-owned-data"
-                renderElement={<Link to={ROUTES.EXPLORE} />}
-              />
+              <span className="text-sm">
+                <Transi18next
+                  i18nKey="message.no-owned-data"
+                  renderElement={<Link to={ROUTES.EXPLORE} />}
+                />
+              </span>
             )}
           </div>
         </>

diff --git a/...ata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx b/...ata-ui/src/main/resources/ui/src/components/NotificationBox/NotificationBox.component.tsx
@@ -168,7 +168,7 @@ const NotificationBox = ({
         </div>
       ) : (
         <List
-          className="h-min-64"
+          className="notification-content-container"
           dataSource={notificationDropDownList}
           footer={
             <Button block href={viewAllPath} type="link">

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/notification-box.less b/openmetadata-ui/src/main/resources/ui/src/components/NotificationBox/notification-box.less
@@ -26,3 +26,12 @@
     }
   }
 }
+
+.notification-content-container {
+  min-height: 16rem;
+
+  .ant-spin-nested-loading {
+    height: 200px;
+    overflow-y: scroll;
+  }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx
@@ -315,22 +315,22 @@ const SchemaTable = ({
                   tableConstraints,
                 })}
                 {/* If we do not have displayName name only be shown in the bold from the below code */}
-                {!isEmpty(displayName) ? (
-                  <Typography.Text
-                    className="m-b-0 d-block text-grey-muted"
-                    data-testid="column-name">
-                    {name}
-                  </Typography.Text>
-                ) : null}
 
-                {/* It will render displayName fallback to name */}
+                <Typography.Text
+                  className="m-b-0 d-block text-grey-muted"
+                  data-testid="column-name">
+                  {name}
+                </Typography.Text>
+              </div>
+              {!isEmpty(displayName) ? (
+                // It will render displayName fallback to name
                 <Typography.Text
                   className="m-b-0 d-block"
                   data-testid="column-display-name"
                   ellipsis={{ tooltip: true }}>
                   {getEntityName(record)}
                 </Typography.Text>
-              </div>
+              ) : null}
               <Icon
                 className="hover-cell-icon text-left m-t-xss"
                 component={IconEdit}

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.test.tsx
@@ -221,7 +221,7 @@ describe('Test EntityTable Component', () => {
       wrapper: MemoryRouter,
     });
 
-    const columnNames = await screen.findAllByTestId('column-display-name');
+    const columnNames = await screen.findAllByTestId('column-name');
 
     expect(columnNames).toHaveLength(3);
 
@@ -244,12 +244,12 @@ describe('Test EntityTable Component', () => {
     const columnDisplayName = await screen.findAllByTestId(
       'column-display-name'
     );
-    const columnName = await screen.findByTestId('column-name');
+    const columnName = await screen.findAllByTestId('column-name');
 
     expect(columnDisplayName[0]).toBeInTheDocument();
-    expect(columnName).toBeInTheDocument();
+    expect(columnName[0]).toBeInTheDocument();
 
     expect(columnDisplayName[0].textContent).toBe('Comments');
-    expect(columnName.textContent).toBe('comments');
+    expect(columnName[0].textContent).toBe('comments');
   });
 });
diff --git a/...tadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.interface.ts b/...tadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.interface.ts
@@ -11,6 +11,8 @@
  *  limitations under the License.
  */
 
+import { ExploreSearchIndex } from '../Explore/explore.interface';
+
 export interface SearchDropdownProps {
   label: string;
   isSuggestionsLoading?: boolean;
@@ -20,6 +22,7 @@ export interface SearchDropdownProps {
   highlight?: boolean;
   showProfilePicture?: boolean;
   fixedOrderOptions?: boolean;
+  index?: ExploreSearchIndex;
   onChange: (values: SearchDropdownOption[], searchKey: string) => void;
   onGetInitialOptions?: (searchKey: string) => void;
   onSearch: (searchText: string, searchKey: string) => void;

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.test.tsx
@@ -36,6 +36,7 @@ const mockProps: SearchDropdownProps = {
   selectedKeys: [{ key: 'User 1', label: 'User 1' }],
   onChange: mockOnChange,
   onSearch: mockOnSearch,
+  index: 'table_search_index' as SearchDropdownProps['index'],
 };
 
 jest.mock('lodash', () => ({

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SearchDropdown/SearchDropdown.tsx
@@ -37,6 +37,7 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as DropDown } from '../../assets/svg/DropDown.svg';
+import { tabsInfo } from '../../constants/explore.constants';
 import {
   generateSearchDropdownLabel,
   getSearchDropdownLabels,
@@ -61,6 +62,7 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
   onChange,
   onGetInitialOptions,
   onSearch,
+  index,
 }) => {
   const { t } = useTranslation();
 
@@ -170,6 +172,8 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
 
   const getDropdownBody = useCallback(
     (menuNode: ReactNode) => {
+      const entityLabel = index && tabsInfo[index]?.label;
+      const isDomainKey = searchKey.startsWith('domain');
       if (isSuggestionsLoading) {
         return (
           <Row align="middle" className="p-y-sm" justify="center">
@@ -185,12 +189,18 @@ const SearchDropdown: FC<SearchDropdownProps> = ({
       ) : (
         <Row align="middle" className="m-y-sm" justify="center">
           <Col>
-            <Typography.Text>{t('message.no-data-available')}</Typography.Text>
+            <Typography.Text className="m-x-sm">
+              {isDomainKey && entityLabel
+                ? t('message.no-domain-assigned-to-entity', {
+                    entity: entityLabel,
+                  })
+                : t('message.no-data-available')}
+            </Typography.Text>
           </Col>
         </Row>
       );
     },
-    [isSuggestionsLoading, options, selectedOptions]
+    [isSuggestionsLoading, options, selectedOptions, index, searchKey]
   );
 
   const dropdownCardComponent = useCallback(

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx
@@ -339,7 +339,7 @@ const Services = ({ serviceName }: ServicesProps) => {
                     serviceName
                   )}>
                   <Typography.Text
-                    className="text-base text-grey-body font-medium truncate w-48"
+                    className="text-base text-grey-body font-medium truncate w-48 d-inline-block"
                     data-testid={`service-name-${service.name}`}
                     title={getEntityName(service)}>
                     {getEntityName(service)}

diff --git a/...data-ui/src/main/resources/ui/src/components/TeamsSelectable/TeamsSelectable.interface.ts b/...data-ui/src/main/resources/ui/src/components/TeamsSelectable/TeamsSelectable.interface.ts
@@ -1,3 +1,5 @@
+import { EntityReference } from '../../generated/entity/type';
+
 /*
  *  Copyright 2023 Collate.
  *  Licensed under the Apache License, Version 2.0 (the "License");
@@ -12,9 +14,9 @@
  */
 export interface TeamsSelectableProps {
   showTeamsAlert?: boolean;
-  onSelectionChange?: (teams: string[]) => void;
+  onSelectionChange?: (teams: EntityReference[]) => void;
   filterJoinable?: boolean;
   placeholder?: string;
-  selectedTeams?: string[];
+  selectedTeams?: EntityReference[];
   maxValueCount?: number;
 }