fix(ui): Addressing minor UI issues pre-release (datahub-project#6368)

CybercentreCanada · Nov 18, 2022 · 77712e2 · 77712e2
1 parent 8939e91
commit 77712e2
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 38 deletions.
diff --git a/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx b/datahub-web-react/src/app/entity/dataset/profile/schema/components/SchemaHeader.tsx
@@ -47,9 +47,19 @@ const RawButton = styled(Button)`
         display: flex;
         margin-right: 10px;
         justify-content: left;
+        align-items: center;
     }
 `;
 
+const RawButtonTitleContainer = styled.span`
+    display: flex;
+    align-items: center;
+`;
+
+const RawButtonTitle = styled(Typography.Text)`
+    margin-left: 6px;
+`;
+
 const KeyButton = styled(Button)<{ $highlighted: boolean }>`
     border-radius: 8px 0px 0px 8px;
     font-weight: ${(props) => (props.$highlighted ? '600' : '400')};
@@ -206,15 +216,15 @@ export default function SchemaHeader({
                     {hasRaw && (
                         <RawButton type="text" onClick={() => setShowRaw(!showRaw)}>
                             {showRaw ? (
-                                <>
-                                    <TableOutlined />
-                                    <Typography.Text>Tabular</Typography.Text>
-                                </>
+                                <RawButtonTitleContainer>
+                                    <TableOutlined style={{ padding: 0, margin: 0 }} />
+                                    <RawButtonTitle>Tabular</RawButtonTitle>
+                                </RawButtonTitleContainer>
                             ) : (
-                                <>
-                                    <FileTextOutlined />
-                                    <Typography.Text>Raw</Typography.Text>
-                                </>
+                                <RawButtonTitleContainer>
+                                    <FileTextOutlined style={{ padding: 0, margin: 0 }} />
+                                    <RawButtonTitle>Raw</RawButtonTitle>
+                                </RawButtonTitleContainer>
                             )}
                         </RawButton>
                     )}

diff --git a/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx b/datahub-web-react/src/app/entity/shared/EntityDropdown/EntityDropdown.tsx
@@ -117,9 +117,11 @@ function EntityDropdown(props: Props) {
     };
 
     const pageUrl = window.location.href;
+    const isGlossaryEntity = entityType === EntityType.GlossaryNode || entityType === EntityType.GlossaryTerm;
     const entityHasChildren = !!entityData?.children?.total;
     const canManageGlossaryEntity = !!entityData?.privileges?.canManageEntity;
     const canCreateGlossaryEntity = !!entityData?.privileges?.canManageChildren;
+    const canDeleteGlossaryEntity = !entityHasChildren && canManageGlossaryEntity;
 
     /**
      * A default path to redirect to if the entity is deleted.
@@ -192,7 +194,7 @@ function EntityDropdown(props: Props) {
                         {menuItems.has(EntityMenuItems.DELETE) && (
                             <StyledMenuItem
                                 key="5"
-                                disabled={entityHasChildren || !canManageGlossaryEntity}
+                                disabled={isGlossaryEntity && !canDeleteGlossaryEntity}
                                 onClick={onDeleteEntity}
                             >
                                 <Tooltip

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Lineage/ColumnLineageSelect.tsx b/datahub-web-react/src/app/entity/shared/tabs/Lineage/ColumnLineageSelect.tsx
@@ -67,9 +67,14 @@ export default function ColumnsLineageSelect({
                     allowClear
                     placeholder="Select column"
                 >
-                    {entityData?.schemaMetadata?.fields.map((field) => (
-                        <Select.Option value={field.fieldPath}>{downgradeV2FieldPath(field.fieldPath)}</Select.Option>
-                    ))}
+                    {entityData?.schemaMetadata?.fields.map((field) => {
+                        const fieldPath = downgradeV2FieldPath(field.fieldPath);
+                        return (
+                            <Select.Option value={field.fieldPath}>
+                                <Tooltip title={fieldPath}>{fieldPath}</Tooltip>
+                            </Select.Option>
+                        );
+                    })}
                 </StyledSelect>
             )}
             <Tooltip title={columnButtonTooltip}>

diff --git a/datahub-web-react/src/app/ingest/source/IngestionSourceTableColumns.tsx b/datahub-web-react/src/app/ingest/source/IngestionSourceTableColumns.tsx
@@ -90,7 +90,7 @@ export function TypeColumn(type: string, record: any) {
 export function LastExecutionColumn(time: any) {
     const executionDate = time && new Date(time);
     const localTime = executionDate && `${executionDate.toLocaleDateString()} at ${executionDate.toLocaleTimeString()}`;
-    return <Typography.Text>{localTime || 'N/A'}</Typography.Text>;
+    return <Typography.Text>{localTime || 'None'}</Typography.Text>;
 }
 
 export function ScheduleColumn(schedule: any, record: any) {
@@ -114,10 +114,10 @@ export function LastStatusColumn({ status, record, setFocusExecutionUrn }: LastS
     const color = getExecutionRequestStatusDisplayColor(status);
     return (
         <StatusContainer>
-            {Icon && <Icon style={{ color }} />}
+            {Icon && <Icon style={{ color, fontSize: 14 }} />}
             <StatusButton type="link" onClick={() => setFocusExecutionUrn(record.lastExecUrn)}>
                 <Typography.Text strong style={{ color, marginLeft: 8 }}>
-                    {text || 'N/A'}
+                    {text || 'Pending...'}
                 </Typography.Text>
             </StatusButton>
         </StatusContainer>

diff --git a/datahub-web-react/src/app/ingest/source/executions/IngestionExecutionTable.tsx b/datahub-web-react/src/app/ingest/source/executions/IngestionExecutionTable.tsx
@@ -38,7 +38,7 @@ export default function IngestionExecutionTable({
             dataIndex: 'duration',
             key: 'duration',
             render: (durationMs: number) => {
-                const seconds = (durationMs && `${durationMs / 1000}s`) || 'N/A';
+                const seconds = (durationMs && `${durationMs / 1000}s`) || 'None';
                 return seconds;
             },
         },

diff --git a/datahub-web-react/src/app/ingest/source/executions/IngestionExecutionTableColumns.tsx b/datahub-web-react/src/app/ingest/source/executions/IngestionExecutionTableColumns.tsx
@@ -27,7 +27,7 @@ const StatusButton = styled(Button)`
 export function TimeColumn(time: string) {
     const date = time && new Date(time);
     const localTime = date && `${date.toLocaleDateString()} at ${date.toLocaleTimeString()}`;
-    return <Typography.Text>{localTime || 'N/A'}</Typography.Text>;
+    return <Typography.Text>{localTime || 'None'}</Typography.Text>;
 }
 
 interface StatusColumnProps {
@@ -42,10 +42,10 @@ export function StatusColumn({ status, record, setFocusExecutionUrn }: StatusCol
     const color = getExecutionRequestStatusDisplayColor(status);
     return (
         <StatusContainer>
-            {Icon && <Icon style={{ color }} />}
+            {Icon && <Icon style={{ color, fontSize: 14 }} />}
             <StatusButton type="link" onClick={() => setFocusExecutionUrn(record.urn)}>
                 <Typography.Text strong style={{ color, marginLeft: 8 }}>
-                    {text || 'N/A'}
+                    {text || 'Pending...'}
                 </Typography.Text>
             </StatusButton>
         </StatusContainer>

diff --git a/datahub-web-react/src/app/ingest/source/utils.ts b/datahub-web-react/src/app/ingest/source/utils.ts
@@ -61,7 +61,7 @@ export const getExecutionRequestStatusIcon = (status: string) => {
         (status === ROLLED_BACK && WarningOutlined) ||
         (status === ROLLING_BACK && LoadingOutlined) ||
         (status === ROLLBACK_FAILED && CloseCircleOutlined) ||
-        undefined
+        ClockCircleOutlined
     );
 };
 

diff --git a/datahub-web-react/src/app/permissions/roles/ManageRoles.tsx b/datahub-web-react/src/app/permissions/roles/ManageRoles.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Button, Empty, message, Pagination, Tooltip } from 'antd';
+import { Button, Empty, message, Pagination, Tooltip, Typography } from 'antd';
 import styled from 'styled-components';
 import * as QueryString from 'query-string';
 import { useLocation } from 'react-router';
@@ -16,6 +16,7 @@ import { useBatchAssignRoleMutation } from '../../../graphql/mutations.generated
 import { CorpUser, DataHubRole, DataHubPolicy } from '../../../types.generated';
 import RoleDetailsModal from './RoleDetailsModal';
 import analytics, { EventType } from '../../analytics';
+import { ANTD_GRAY } from '../../entity/shared/constants';
 
 const SourceContainer = styled.div``;
 
@@ -33,6 +34,12 @@ const PageContainer = styled.span`
     width: 100%;
 `;
 
+const ActionsContainer = styled.div`
+    width: 100%;
+    display: flex;
+    justify-content: right;
+`;
+
 const AddUsersButton = styled(Button)`
     margin-right: 16px;
 `;
@@ -137,7 +144,7 @@ export const ManageRoles = () => {
                     <>
                         <RoleName
                             onClick={() => onViewRole(record.role)}
-                            style={{ color: record?.editable ? '#000000' : '#8C8C8C' }}
+                            style={{ color: record?.editable ? '#000000' : ANTD_GRAY[8] }}
                         >
                             {record?.name}
                         </RoleName>
@@ -158,13 +165,15 @@ export const ManageRoles = () => {
             render: (_: any, record: any) => {
                 return (
                     <>
-                        <AvatarsGroup
-                            users={record?.users}
-                            groups={record?.resolvedGroups}
-                            entityRegistry={entityRegistry}
-                            maxCount={3}
-                            size={28}
-                        />
+                        {(record?.users.length && (
+                            <AvatarsGroup
+                                users={record?.users}
+                                groups={record?.resolvedGroups}
+                                entityRegistry={entityRegistry}
+                                maxCount={3}
+                                size={28}
+                            />
+                        )) || <Typography.Text type="secondary">No assigned users</Typography.Text>}
                     </>
                 );
             },
@@ -174,7 +183,7 @@ export const ManageRoles = () => {
             key: 'actions',
             render: (_: any, record: any) => {
                 return (
-                    <>
+                    <ActionsContainer>
                         <Tooltip title={`Assign the ${record.name} role to users`}>
                             <AddUsersButton
                                 onClick={() => {
@@ -185,7 +194,7 @@ export const ManageRoles = () => {
                                 ADD USERS
                             </AddUsersButton>
                         </Tooltip>
-                    </>
+                    </ActionsContainer>
                 );
             },
         },

diff --git a/datahub-web-react/src/app/search/SearchFiltersSection.tsx b/datahub-web-react/src/app/search/SearchFiltersSection.tsx
@@ -31,7 +31,7 @@ const FiltersHeader = styled.div`
     font-weight: 600;
 
     padding-left: 20px;
-    padding-right: 20px;
+    padding-right: 4px;
     padding-bottom: 8px;
 
     width: 100%;

diff --git a/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx b/datahub-web-react/src/app/shared/admin/HeaderLinks.tsx
@@ -10,9 +10,10 @@ import {
     DownOutlined,
 } from '@ant-design/icons';
 import { Link } from 'react-router-dom';
-import { Button, Dropdown, Menu } from 'antd';
+import { Button, Dropdown, Menu, Tooltip } from 'antd';
 import { useAppConfig } from '../../useAppConfig';
 import { useGetAuthenticatedUser } from '../../useGetAuthenticatedUser';
+import { ANTD_GRAY } from '../../entity/shared/constants';
 
 const LinkWrapper = styled.span`
     margin-right: 0px;
@@ -34,6 +35,24 @@ const LinksWrapper = styled.div<{ areLinksHidden?: boolean }>`
 const MenuItem = styled(Menu.Item)`
     font-size: 12px;
     font-weight: bold;
+    max-width: 240px;
+`;
+
+const NavTitleContainer = styled.span`
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    padding: 2px;
+`;
+
+const NavTitleText = styled.span`
+    margin-left: 6px;
+`;
+
+const NavTitleDescription = styled.div`
+    font-size: 12px;
+    font-weight: normal;
+    color: ${ANTD_GRAY[7]};
 `;
 
 interface Props {
@@ -60,7 +79,12 @@ export function HeaderLinks(props: Props) {
                 <LinkWrapper>
                     <Link to="/analytics">
                         <Button type="text">
-                            <BarChartOutlined /> Analytics
+                            <Tooltip title="View DataHub usage analytics">
+                                <NavTitleContainer>
+                                    <BarChartOutlined />
+                                    <NavTitleText>Analytics</NavTitleText>
+                                </NavTitleContainer>
+                            </Tooltip>
                         </Button>
                     </Link>
                 </LinkWrapper>
@@ -69,7 +93,12 @@ export function HeaderLinks(props: Props) {
                 <LinkWrapper>
                     <Link to="/ingestion">
                         <Button type="text">
-                            <ApiOutlined /> Ingestion
+                            <Tooltip title="Connect DataHub to your organization's data sources">
+                                <NavTitleContainer>
+                                    <ApiOutlined />
+                                    <NavTitleText>Ingestion</NavTitleText>
+                                </NavTitleContainer>
+                            </Tooltip>
                         </Button>
                     </Link>
                 </LinkWrapper>
@@ -80,13 +109,21 @@ export function HeaderLinks(props: Props) {
                     <Menu>
                         <MenuItem key="0">
                             <Link to="/glossary">
-                                <BookOutlined style={{ fontSize: '14px', fontWeight: 'bold' }} /> Glossary
+                                <NavTitleContainer>
+                                    <BookOutlined style={{ fontSize: '14px', fontWeight: 'bold' }} />
+                                    <NavTitleText>Glossary</NavTitleText>
+                                </NavTitleContainer>
+                                <NavTitleDescription>View and modify your data dictionary</NavTitleDescription>
                             </Link>
                         </MenuItem>
                         {showDomains && (
                             <MenuItem key="1">
                                 <Link to="/domains">
-                                    <FolderOutlined style={{ fontSize: '14px', fontWeight: 'bold' }} /> Domains
+                                    <NavTitleContainer>
+                                        <FolderOutlined style={{ fontSize: '14px', fontWeight: 'bold' }} />
+                                        <NavTitleText>Domains</NavTitleText>
+                                    </NavTitleContainer>
+                                    <NavTitleDescription>Manage related groups of data assets</NavTitleDescription>
                                 </Link>
                             </MenuItem>
                         )}
@@ -103,7 +140,9 @@ export function HeaderLinks(props: Props) {
                 <LinkWrapper style={{ marginRight: 12 }}>
                     <Link to="/settings">
                         <Button type="text">
-                            <SettingOutlined />
+                            <Tooltip title="Manage your DataHub settings">
+                                <SettingOutlined />
+                            </Tooltip>
                         </Button>
                     </Link>
                 </LinkWrapper>