Fixed #529 Adding User and Teams tabs for Owner in Manage Tab (#562)

* Fixed #529 Adding User and Teams tabs for Owner in Manage Tab

* added counts for tab label

catalog-rest-service/src/main/resources/ui/src/components/dropdown/DropDownList.tsx

@@ -18,6 +18,7 @@
 import classNames from 'classnames';
 import { isNil, lowerCase } from 'lodash';
 import React, { FunctionComponent, useEffect, useState } from 'react';
+import { getCountBadge } from '../../utils/CommonUtils';
 import { DropDownListItem, DropDownListProp } from './types';
 
 const DropDownList: FunctionComponent<DropDownListProp> = ({
@@ -28,9 +29,15 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
   showSearchBar = false,
   value,
   onSelect,
+  groupType = 'label',
 }: DropDownListProp) => {
   const [searchedList, setSearchedList] = useState(dropDownList);
   const [searchText, setSearchText] = useState(searchString);
+  const [activeTab, setActiveTab] = useState<number>(1);
+
+  const getTabClasses = (tab: number, activeTab: number) => {
+    return 'tw-gh-tabs' + (activeTab === tab ? ' active' : '');
+  };
 
   const handleListSearch = (text: string) => {
     setSearchText(text || '');
@@ -62,6 +69,17 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
     );
   };
 
+  const getActiveTab = () => {
+    let tab = 0;
+    listGroups.forEach((grp, i) => {
+      if (getSearchedListByGroup(grp).length === 0) {
+        tab = i + 1;
+      }
+    });
+
+    return tab;
+  };
+
   useEffect(() => {
     setSearchText(searchString);
   }, [searchString]);
@@ -74,6 +92,10 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
     );
   }, [searchText, dropDownList]);
 
+  useEffect(() => {
+    setActiveTab(getActiveTab() + 1);
+  }, [searchText]);
+
   return (
     <>
       {searchedList.length > 0 && (
@@ -108,28 +130,56 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
               </div>
             )}
 
+            {groupType === 'tab' && (
+              <div className="tw-flex tw-justify-around tw-border-b tw-border-separator tw-mb-1">
+                {listGroups.map((grp, index) => {
+                  return (
+                    <button
+                      className={getTabClasses(index + 1, activeTab)}
+                      data-testid="tab"
+                      key={index}
+                      onClick={() => setActiveTab(index + 1)}>
+                      {grp}
+                      {getCountBadge(getSearchedListByGroup(grp).length)}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+
             <div className="tw-py-1 tw-max-h-60 tw-overflow-y-auto" role="none">
               {getSearchedListByGroup().map(
                 (item: DropDownListItem, index: number) =>
                   getDropDownElement(item, index)
               )}
-              {listGroups.map((grp, index) => {
-                return (
-                  <div key={index}>
-                    {getSearchedListByGroup(grp).length > 0 && (
-                      <span className="tw-flex tw-my-1 tw-text-grey-muted">
-                        <hr className="tw-mt-2 tw-w-full " />
-                        <span className="tw-text-xs tw-px-0.5">{grp}</span>{' '}
-                        <hr className="tw-mt-2 tw-w-full" />
-                      </span>
-                    )}
-                    {getSearchedListByGroup(grp).map(
-                      (item: DropDownListItem, index: number) =>
-                        getDropDownElement(item, index)
-                    )}
-                  </div>
-                );
-              })}
+              {groupType === 'label' ? (
+                listGroups.map((grp, index) => {
+                  return (
+                    <div key={index}>
+                      {getSearchedListByGroup(grp).length > 0 && (
+                        <span className="tw-flex tw-my-1 tw-text-grey-muted">
+                          <hr className="tw-mt-2 tw-w-full " />
+                          <span className="tw-text-xs tw-px-0.5">
+                            {grp}
+                          </span>{' '}
+                          <hr className="tw-mt-2 tw-w-full" />
+                        </span>
+                      )}
+                      {getSearchedListByGroup(grp).map(
+                        (item: DropDownListItem, index: number) =>
+                          getDropDownElement(item, index)
+                      )}
+                    </div>
+                  );
+                })
+              ) : (
+                <>
+                  {getSearchedListByGroup(listGroups[activeTab - 1]).map(
+                    (item: DropDownListItem, index: number) =>
+                      getDropDownElement(item, index)
+                  )}
+                </>
+              )}
             </div>
           </div>
         </>

catalog-rest-service/src/main/resources/ui/src/components/dropdown/types.ts

@@ -37,6 +37,7 @@ export type DropDownListItem = {
   string | number | boolean | undefined | Function | React.ReactElement
 >;
 
+export type GroupType = 'label' | 'tab';
 export type DropDownListProp = {
   dropDownList: Array<DropDownListItem>;
   horzPosRight?: boolean;
@@ -50,6 +51,7 @@ export type DropDownListProp = {
     value?: string
   ) => void;
   setIsOpen?: (value: boolean) => void;
+  groupType?: GroupType;
 };
 
 export type DropDownProp = {

catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ManageTab.tsx

@@ -237,6 +237,7 @@ const ManageTab: FunctionComponent<Props> = ({
             <DropDownList
               showSearchBar
               dropDownList={listOwners}
+              groupType="tab"
               listGroups={['Users', 'Teams']}
               value={owner}
               onSelect={handleOwnerSelection}

catalog-rest-service/src/main/resources/ui/src/utils/CommonUtils.tsx

@@ -73,9 +73,18 @@ export const getCurrentUserId = (): string => {
 };
 
 export const pluralize = (count: number, noun: string, suffix = 's') => {
-  return `${count.toLocaleString()} ${noun}${
-    count !== 1 && count !== 0 ? suffix : ''
-  }`;
+  const countString = count.toLocaleString();
+  if (count !== 1 && count !== 0 && !noun.endsWith(suffix)) {
+    return `${countString} ${noun}${suffix}`;
+  } else {
+    if (noun.endsWith(suffix)) {
+      return `${countString} ${
+        count > 1 ? noun : noun.slice(0, noun.length - 1)
+      }`;
+    } else {
+      return `${countString} ${noun}${count !== 1 ? suffix : ''}`;
+    }
+  }
 };
 
 export const getUserTeams = (): Array<UserTeam> => {