refactor(ui): Remove primary color for sort selector + add t… (#9363)

datahub-project · Dec 1, 2023 · 4562d79 · 4562d79
1 parent f3abfd1
commit 4562d79
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/datahub-web-react/src/app/search/context/constants.ts b/datahub-web-react/src/app/search/context/constants.ts
@@ -7,19 +7,19 @@ export const LAST_OPERATION_TIME_FIELD = 'lastOperationTime';
 export const DEFAULT_SORT_OPTION = RELEVANCE;
 
 export const SORT_OPTIONS = {
-    [RELEVANCE]: { label: 'Relevance', field: RELEVANCE, sortOrder: SortOrder.Descending },
+    [RELEVANCE]: { label: 'Relevance (Default)', field: RELEVANCE, sortOrder: SortOrder.Descending },
     [`${ENTITY_NAME_FIELD}_${SortOrder.Ascending}`]: {
-        label: 'A to Z',
+        label: 'Name A to Z',
         field: ENTITY_NAME_FIELD,
         sortOrder: SortOrder.Ascending,
     },
     [`${ENTITY_NAME_FIELD}_${SortOrder.Descending}`]: {
-        label: 'Z to A',
+        label: 'Name Z to A',
         field: ENTITY_NAME_FIELD,
         sortOrder: SortOrder.Descending,
     },
     [`${LAST_OPERATION_TIME_FIELD}_${SortOrder.Descending}`]: {
-        label: 'Last Modified in Platform',
+        label: 'Last Modified In Source',
         field: LAST_OPERATION_TIME_FIELD,
         sortOrder: SortOrder.Descending,
     },

diff --git a/datahub-web-react/src/app/search/sorting/SearchSortSelect.tsx b/datahub-web-react/src/app/search/sorting/SearchSortSelect.tsx
@@ -1,8 +1,9 @@
 import Icon, { CaretDownFilled } from '@ant-design/icons';
-import { Select } from 'antd';
+import { Select, Tooltip } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 import { ReactComponent as SortIcon } from '../../../images/sort.svg';
+import { ANTD_GRAY } from '../../entity/shared/constants';
 import { DEFAULT_SORT_OPTION, SORT_OPTIONS } from '../context/constants';
 import { useSearchContext } from '../context/SearchContext';
 
@@ -13,19 +14,20 @@ const SelectWrapper = styled.span`
 
     .ant-select-selection-item {
         // !important is necessary because updating Select styles for antd is impossible
-        color: ${(props) => props.theme.styles['primary-color']} !important;
+        color: ${ANTD_GRAY[8]} !important;
         font-weight: 700;
     }
 
-    svg {
-        color: ${(props) => props.theme.styles['primary-color']};
+    .ant-select-selection-placeholder {
+        color: ${ANTD_GRAY[8]};
+        font-weight: 700;
     }
 `;
 
 const StyledIcon = styled(Icon)`
-    color: ${(props) => props.theme.styles['primary-color']};
+    color: ${ANTD_GRAY[8]};
     font-size: 16px;
-    margin-right: -6px;
+    margin-right: -8px;
 `;
 
 export default function SearchSortSelect() {
@@ -34,18 +36,20 @@ export default function SearchSortSelect() {
     const options = Object.entries(SORT_OPTIONS).map(([value, option]) => ({ value, label: option.label }));
 
     return (
-        <SelectWrapper>
-            <StyledIcon component={SortIcon} />
-            <Select
-                value={selectedSortOption}
-                defaultValue={DEFAULT_SORT_OPTION}
-                options={options}
-                bordered={false}
-                onChange={(sortOption) => setSelectedSortOption(sortOption)}
-                dropdownStyle={{ minWidth: 'max-content' }}
-                placement="bottomRight"
-                suffixIcon={<CaretDownFilled />}
-            />
-        </SelectWrapper>
+        <Tooltip title="Sort search results" showArrow={false} placement="left">
+            <SelectWrapper>
+                <StyledIcon component={SortIcon} />
+                <Select
+                    placeholder="Sort"
+                    value={selectedSortOption === DEFAULT_SORT_OPTION ? null : selectedSortOption}
+                    options={options}
+                    bordered={false}
+                    onChange={(sortOption) => setSelectedSortOption(sortOption)}
+                    dropdownStyle={{ minWidth: 'max-content' }}
+                    placement="bottomRight"
+                    suffixIcon={<CaretDownFilled />}
+                />
+            </SelectWrapper>
+        </Tooltip>
     );
 }