feat(ui/search): option to sort browse paths (#10268)

Author: gaurav2733

datahub-web-react/src/app/search/sidebar/BrowseNode.tsx

@@ -22,6 +22,7 @@ import {
 import useSidebarAnalytics from './useSidebarAnalytics';
 import EntityLink from './EntityLink';
 import { EntityType } from '../../../types.generated';
+import { SortBy, useSort } from './useSort';
 
 const FolderStyled = styled(FolderOutlined)`
     font-size: 16px;
@@ -34,7 +35,11 @@ const Count = styled(Typography.Text)`
     padding-right: 2px;
 `;
 
-const BrowseNode = () => {
+interface EntityNodeProps {
+    sortBy: string;
+}
+
+const BrowseNode: React.FC<EntityNodeProps> = ({ sortBy }) => {
     const isBrowsePathPrefix = useIsBrowsePathPrefix();
     const isBrowsePathSelected = useIsBrowsePathSelected();
     const onSelectBrowsePath = useOnSelectBrowsePath();
@@ -71,6 +76,8 @@ const BrowseNode = () => {
 
     const color = '#000';
 
+    const sortedGroups = useSort(groups, sortBy as SortBy);
+
     return (
         <ExpandableNode
             isOpen={isOpen && !isClosing && loaded}
@@ -105,7 +112,7 @@ const BrowseNode = () => {
             }
             body={
                 <ExpandableNode.Body>
-                    {groups.map((group) => (
+                    {sortedGroups.map((group) => (
                         <BrowseProvider
                             key={group.name}
                             entityAggregation={entityAggregation}
@@ -114,7 +121,7 @@ const BrowseNode = () => {
                             browseResultGroup={group}
                             parentPath={path}
                         >
-                            <BrowseNode />
+                            <BrowseNode sortBy={sortBy} />
                         </BrowseProvider>
                     ))}
                     {error && <SidebarLoadingError onClickRetry={retry} />}

datahub-web-react/src/app/search/sidebar/BrowseSidebar.tsx

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { Typography } from 'antd';
+import { Select, Tooltip, Typography } from 'antd';
+import Icon, { CaretDownFilled } from '@ant-design/icons';
 import EntityNode from './EntityNode';
 import { BrowseProvider } from './BrowseContext';
 import SidebarLoadingError from './SidebarLoadingError';
 import { SEARCH_RESULTS_BROWSE_SIDEBAR_ID } from '../../onboarding/config/SearchOnboardingConfig';
 import useSidebarEntities from './useSidebarEntities';
-import { ANTD_GRAY_V2 } from '../../entity/shared/constants';
+import { ANTD_GRAY, ANTD_GRAY_V2 } from '../../entity/shared/constants';
 import { ProfileSidebarResizer } from '../../entity/shared/containers/profile/sidebar/ProfileSidebarResizer';
+import SortIcon from '../../../images/sort.svg?react';
 
 export const MAX_BROWSER_WIDTH = 500;
 export const MIN_BROWSWER_WIDTH = 200;
@@ -24,6 +26,7 @@ export const SidebarWrapper = styled.div<{ visible: boolean; width: number }>`
 const SidebarHeader = styled.div`
     display: flex;
     align-items: center;
+    justify-content: space-between;
     padding-left: 24px;
     height: 47px;
     border-bottom: 1px solid ${(props) => props.theme.styles['border-color-base']};
@@ -39,6 +42,26 @@ const SidebarBody = styled.div<{ visible: boolean }>`
     white-space: nowrap;
 `;
 
+const SelectWrapper = styled.div`
+    display: inline-flex;
+    align-items: center;
+    width: 200px .ant-select-selection-item {
+        color: ${ANTD_GRAY[8]} !important;
+        font-weight: 700;
+    }
+
+    .ant-select-selection-placeholder {
+        color: ${ANTD_GRAY[8]};
+        font-weight: 700;
+    }
+`;
+
+const StyledIcon = styled(Icon)`
+    color: ${ANTD_GRAY[8]};
+    font-size: 16px;
+    margin-right: -8px;
+`;
+
 type Props = {
     visible: boolean;
 };
@@ -48,6 +71,7 @@ const BrowseSidebar = ({ visible }: Props) => {
         skip: !visible,
     });
     const [browserWidth, setBrowserWith] = useState(window.innerWidth * 0.2);
+    const [sortBy, setSortBy] = useState('default');
 
     return (
         <>
@@ -58,15 +82,38 @@ const BrowseSidebar = ({ visible }: Props) => {
                 data-testid="browse-v2"
             >
                 <SidebarHeader>
-                    <Typography.Text strong>Navigate</Typography.Text>
+                    <Typography.Text strong> Navigate</Typography.Text>
+                    <Tooltip title="Sort folder results" showArrow={false} placement="left">
+                        <SelectWrapper>
+                            <StyledIcon component={SortIcon} />
+                            <Select
+                                placeholder="Sort"
+                                placement="bottomRight"
+                                dropdownStyle={{ minWidth: '110px' }}
+                                onChange={(value) => setSortBy(value)}
+                                bordered={false}
+                                suffixIcon={<CaretDownFilled />}
+                            >
+                                <Select.Option key="sort" value="sort">
+                                    Size (Default)
+                                </Select.Option>
+                                <Select.Option key="AtoZ" value="AtoZ">
+                                    Name A to Z
+                                </Select.Option>
+                                <Select.Option key="ZtoA" value="ZtoA">
+                                    Name Z to A
+                                </Select.Option>
+                            </Select>
+                        </SelectWrapper>
+                    </Tooltip>
                 </SidebarHeader>
                 <SidebarBody visible={visible}>
                     {entityAggregations && !entityAggregations.length && <div>No results found</div>}
                     {entityAggregations
                         ?.filter((entityAggregation) => entityAggregation?.value !== 'DATA_PRODUCT')
                         ?.map((entityAggregation) => (
                             <BrowseProvider key={entityAggregation?.value} entityAggregation={entityAggregation}>
-                                <EntityNode />
+                                <EntityNode sortBy={sortBy} />
                             </BrowseProvider>
                         ))}
                     {error && <SidebarLoadingError onClickRetry={retry} />}

datahub-web-react/src/app/search/sidebar/EntityNode.tsx

@@ -22,7 +22,11 @@ const Count = styled(Typography.Text)`
     padding-left: 4px;
 `;
 
-const EntityNode = () => {
+interface EntityNodeProps {
+    sortBy: string;
+}
+
+const EntityNode: React.FC<EntityNodeProps> = ({ sortBy }) => {
     const isSelected = useIsEntitySelected();
     const entityType = useEntityType();
     const entityAggregation = useEntityAggregation();
@@ -83,7 +87,7 @@ const EntityNode = () => {
                                   entityAggregation={entityAggregation}
                                   environmentAggregation={environmentAggregation}
                               >
-                                  <EnvironmentNode />
+                                  <EnvironmentNode sortBy={sortBy} />
                               </BrowseProvider>
                           ))
                         : platformAggregations?.map((platformAggregation) => (
@@ -92,7 +96,7 @@ const EntityNode = () => {
                                   entityAggregation={entityAggregation}
                                   platformAggregation={platformAggregation}
                               >
-                                  <PlatformNode />
+                                  <PlatformNode sortBy={sortBy} />
                               </BrowseProvider>
                           ))}
                     {error && <SidebarLoadingError onClickRetry={retry} />}

datahub-web-react/src/app/search/sidebar/EnvironmentNode.tsx

@@ -22,7 +22,11 @@ const Count = styled(Typography.Text)`
     padding-right: 8px;
 `;
 
-const EnvironmentNode = () => {
+interface EntityNodeProps {
+    sortBy: string;
+}
+
+const EnvironmentNode: React.FC<EntityNodeProps> = ({ sortBy }) => {
     const isSelected = useIsEnvironmentSelected();
     const entityAggregation = useEntityAggregation();
     const environmentAggregation = useEnvironmentAggregation();
@@ -72,7 +76,7 @@ const EnvironmentNode = () => {
                             environmentAggregation={environmentAggregation}
                             platformAggregation={platformAggregation}
                         >
-                            <PlatformNode />
+                            <PlatformNode sortBy={sortBy} />
                         </BrowseProvider>
                     ))}
                     {error && <SidebarLoadingError onClickRetry={retry} />}

datahub-web-react/src/app/search/sidebar/PlatformNode.tsx

@@ -20,6 +20,7 @@ import {
 } from './BrowseContext';
 import useSidebarAnalytics from './useSidebarAnalytics';
 import { useHasFilterField } from './SidebarContext';
+import { SortBy, useSort } from './useSort';
 
 const PlatformIconContainer = styled.div`
     width: 16px;
@@ -33,7 +34,11 @@ const Count = styled(Typography.Text)`
     padding-right: 8px;
 `;
 
-const PlatformNode = () => {
+interface EntityNodeProps {
+    sortBy: string;
+}
+
+const PlatformNode: React.FC<EntityNodeProps> = ({ sortBy }) => {
     const isPlatformSelected = useIsPlatformSelected();
     const hasBrowseFilter = useHasFilterField(BROWSE_PATH_V2_FILTER_NAME);
     const isPlatformAndPathSelected = isPlatformSelected && hasBrowseFilter;
@@ -74,6 +79,9 @@ const PlatformNode = () => {
 
     const color = '#000';
 
+    const sortedGroups = useSort(groups, sortBy as SortBy);
+    console.log({ groups, sortedGroups });
+
     return (
         <ExpandableNode
             isOpen={isOpen && !isClosing && loaded}
@@ -101,7 +109,7 @@ const PlatformNode = () => {
             }
             body={
                 <ExpandableNode.Body>
-                    {groups.map((group) => (
+                    {sortedGroups.map((group) => (
                         <BrowseProvider
                             key={group.name}
                             entityAggregation={entityAggregation}
@@ -110,7 +118,7 @@ const PlatformNode = () => {
                             browseResultGroup={group}
                             parentPath={path}
                         >
-                            <BrowseNode />
+                            <BrowseNode sortBy={sortBy} />
                         </BrowseProvider>
                     ))}
                     {error && <SidebarLoadingError onClickRetry={retry} />}

datahub-web-react/src/app/search/sidebar/useSort.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+
+export type SortBy = 'AtoZ' | 'ZtoA';
+
+export const useSort = (initialData, sortBy: SortBy) => {
+    const [sortedData, setSortedData] = useState([...initialData]);
+
+    useEffect(() => {
+        const sortData = () => {
+            const newData = [...initialData];
+            if (sortBy === 'AtoZ') {
+                newData?.sort((a, b) => {
+                    const nameA = a?.entity?.properties?.name || a.name;
+                    const nameB = b?.entity?.properties?.name || b.name;
+                    return nameA?.localeCompare(nameB);
+                });
+            } else if (sortBy === 'ZtoA') {
+                newData?.sort((a, b) => {
+                    const nameA = a?.entity?.properties?.name || a.name;
+                    const nameB = b?.entity?.properties?.name || b.name;
+                    return nameB?.localeCompare(nameA);
+                });
+            }
+            setSortedData(newData);
+        };
+        sortData();
+    }, [initialData, sortBy]);
+
+    return sortedData;
+};