Style : Changing App-bar Layout. (#1534)

* Style : Changing Appbar Layout.

* Removed Scrollbar

* Addressing review comments.

* minor style tweaks.

openmetadata-ui/src/main/resources/ui/src/assets/svg/search.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="#37352F" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8086 12.1051L11.0824 9.37891C10.9594 9.25586 10.7926 9.1875 10.6176 9.1875H10.1719C10.9266 8.22227 11.375 7.0082 11.375 5.6875C11.375 2.5457 8.8293 0 5.6875 0C2.5457 0 0 2.5457 0 5.6875C0 8.8293 2.5457 11.375 5.6875 11.375C7.0082 11.375 8.22227 10.9266 9.1875 10.1719V10.6176C9.1875 10.7926 9.25586 10.9594 9.37891 11.0824L12.1051 13.8086C12.3621 14.0656 12.7777 14.0656 13.032 13.8086L13.8059 13.0348C14.0629 12.7777 14.0629 12.3621 13.8086 12.1051ZM5.6875 9.1875C3.7543 9.1875 2.1875 7.62344 2.1875 5.6875C2.1875 3.7543 3.75156 2.1875 5.6875 2.1875C7.6207 2.1875 9.1875 3.75156 9.1875 5.6875C9.1875 7.6207 7.62344 9.1875 5.6875 9.1875Z" fill="#37352F"/>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx

@@ -131,7 +131,8 @@ const Appbar: React.FC = (): JSX.Element => {
 
     return (
       <span data-testid="greeting-text">
-        Welcome, <span className="tw-font-medium">{name?.split(' ')[0]}</span>
+        <span className="tw-font-medium">{name}</span>
+        <hr className="tw--mr-2 tw--ml-2 tw-mt-1.5" />
       </span>
     );
   };
@@ -165,7 +166,7 @@ const Appbar: React.FC = (): JSX.Element => {
       {isAuthenticatedRoute && isSignedIn ? (
         <div className="tw-h-14 tw-py-2 tw-px-5 tw-border-b-2 tw-border-separator">
           <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap">
-            <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap tw-mr-auto">
+            <div className="tw-flex tw-items-center tw-flex-row tw-justify-between tw-flex-nowrap">
               <NavLink id="openmetadata_logo" to="/">
                 <SVGIcons
                   alt="OpenMetadata Logo"
@@ -173,57 +174,7 @@ const Appbar: React.FC = (): JSX.Element => {
                   width="30"
                 />
               </NavLink>
-              <div
+              <div className="tw-ml-7">
-                className="tw-flex-none tw-relative tw-pl-5 "
-                data-testid="appbar-item">
-                <span className="fa fa-search tw-absolute tw-block tw-z-10 tw-w-9 tw-h-8 tw-leading-8 tw-text-center tw-pointer-events-none tw-text-gray-400" />
-                <input
-                  autoComplete="off"
-                  className="tw-relative search-grey tw-rounded tw-border tw-border-main tw-bg-body-main focus:tw-outline-none tw-pl-8 tw-py-1 tw-form-inputs"
-                  data-testid="searchBox"
-                  id="searchBox"
-                  type="text"
-                  value={searchValue || ''}
-                  onChange={(e) => {
-                    setSearchValue(e.target.value);
-                  }}
-                  onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                    const target = e.target as HTMLInputElement;
-                    if (e.key === 'Enter') {
-                      setIsOpen(false);
-                      addToRecentSearch(target.value);
-                      history.push(
-                        getExplorePathWithSearch(
-                          target.value,
-                          // this is for if user is searching from another page
-                          location.pathname.startsWith(ROUTES.EXPLORE)
-                            ? appState.explorePageTab
-                            : 'tables'
-                        )
-                      );
-                    }
-                  }}
-                />
-                {searchValue &&
-                  (isInPageSearchAllowed(location.pathname) ? (
-                    <SearchOptions
-                      isOpen={isOpen}
-                      options={inPageSearchOptions(location.pathname)}
-                      searchText={searchValue}
-                      selectOption={(text) => {
-                        appState.inPageSearchText = text;
-                      }}
-                      setIsOpen={setIsOpen}
-                    />
-                  ) : (
-                    <Suggestions
-                      isOpen={isOpen}
-                      searchText={searchValue}
-                      setIsOpen={setIsOpen}
-                    />
-                  ))}
-              </div>
-              <div className="tw-ml-9">
                 <NavLink
                   className="tw-nav focus:tw-no-underline"
                   data-testid="appbar-item"
@@ -241,19 +192,75 @@ const Appbar: React.FC = (): JSX.Element => {
                 />
               </div>
             </div>
-            <button
+            <div
-              className="tw-nav focus:tw-no-underline hover:tw-underline"
+              className="tw-flex-none tw-relative tw-justify-items-center tw-ml-auto"
-              data-testid="whatsnew-modal"
+              data-testid="appbar-item">
-              onClick={openModal}>
               <SVGIcons
-                alt="Doc icon"
+                alt="icon-search"
-                className="tw-align-middle tw--mt-0.5 tw-mr-1"
+                className="tw-absolute tw-block tw-z-10 tw-w-4 tw-h-4 tw-right-2.5 tw-top-2 tw-leading-8 tw-text-center tw-pointer-events-none"
-                icon={Icons.WHATS_NEW}
+                icon="icon-searchv1"
-                width="16"
               />
-              <span>What&#39;s new</span>
+              <input
-            </button>
+                autoComplete="off"
-            {/* <NavLink
+                className="tw-relative search-grey tw-rounded tw-border tw-border-main focus:tw-outline-none tw-pl-2 tw-py-1 tw-form-inputs"
+                data-testid="searchBox"
+                id="searchBox"
+                placeholder="Search for Table, Topics, Dashboards and Pipeline"
+                type="text"
+                value={searchValue || ''}
+                onChange={(e) => {
+                  setSearchValue(e.target.value);
+                }}
+                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                  const target = e.target as HTMLInputElement;
+                  if (e.key === 'Enter') {
+                    setIsOpen(false);
+                    addToRecentSearch(target.value);
+                    history.push(
+                      getExplorePathWithSearch(
+                        target.value,
+                        // this is for if user is searching from another page
+                        location.pathname.startsWith(ROUTES.EXPLORE)
+                          ? appState.explorePageTab
+                          : 'tables'
+                      )
+                    );
+                  }
+                }}
+              />
+              {searchValue &&
+                (isInPageSearchAllowed(location.pathname) ? (
+                  <SearchOptions
+                    isOpen={isOpen}
+                    options={inPageSearchOptions(location.pathname)}
+                    searchText={searchValue}
+                    selectOption={(text) => {
+                      appState.inPageSearchText = text;
+                    }}
+                    setIsOpen={setIsOpen}
+                  />
+                ) : (
+                  <Suggestions
+                    isOpen={isOpen}
+                    searchText={searchValue}
+                    setIsOpen={setIsOpen}
+                  />
+                ))}
+            </div>
+            <div className="tw-flex tw-ml-auto">
+              <button
+                className="tw-nav focus:tw-no-underline hover:tw-underline"
+                data-testid="whatsnew-modal"
+                onClick={openModal}>
+                <SVGIcons
+                  alt="Doc icon"
+                  className="tw-align-middle tw--mt-0.5 tw-mr-1"
+                  icon={Icons.WHATS_NEW}
+                  width="16"
+                />
+                {/* <span>What&#39;s new</span> */}
+              </button>
+              {/* <NavLink
               className="tw-nav focus:tw-no-underline hover:tw-underline"
               data-testid="tour"
               style={navStyle(location.pathname.startsWith('/explore'))}
@@ -268,35 +275,49 @@ const Appbar: React.FC = (): JSX.Element => {
               />
               <span>Tour</span>
             </NavLink> */}
-            <div>
+              <div>
-              <DropDown
+                <DropDown
-                dropDownList={supportLinks}
+                  dropDownList={supportLinks}
-                icon={
+                  icon={
-                  <SVGIcons
+                    <SVGIcons
-                    alt="Doc icon"
+                      alt="Doc icon"
-                    className="tw-align-middle tw-mt-0.5 tw-mr-1"
+                      className="tw-align-middle tw-mt-0.5 tw-mr-1"
-                    icon={Icons.HELP_CIRCLE}
+                      icon={Icons.HELP_CIRCLE}
-                    width="16"
+                      width="16"
-                  />
+                    />
-                }
+                  }
-                label="Need Help"
+                  isDropDownIconVisible={false}
-                type="link"
+                  // label="Need Help"
-              />
+                  type="link"
+                />
+              </div>
             </div>
             <div data-testid="dropdown-profile">
               <DropDown
                 dropDownList={[
+                  {
+                    name: (
+                      <p className="tw-flex tw-flex-col">
+                        <span>Signed in as</span>
+                        {getUserDisplayName()}
+                      </p>
+                    ),
+                    to: '',
+                    disabled: false,
+                    icon: <></>,
+                    isText: true,
+                  },
                   {
                     name: (
                       <span className="tw-text-grey-muted tw-cursor-text tw-text-xs">
                         {`Version ${(version ? version : '?').split('-')[0]}`}
-                        <hr className="tw--mr-12 tw--ml-2 tw-mt-1.5" />
+                        <hr className="tw--mr-2 tw--ml-2 tw-mt-2" />
                       </span>
                     ),
                     to: '',
                     disabled: false,
                     icon: <></>,
-                    isVersion: true,
+                    isText: true,
                   },
                   {
                     name: 'Logout',
@@ -326,7 +347,6 @@ const Appbar: React.FC = (): JSX.Element => {
                     )}
                   </>
                 }
-                label={getUserDisplayName()}
                 type="link"
               />
             </div>

openmetadata-ui/src/main/resources/ui/src/components/app-bar/Suggestions.tsx

@@ -302,7 +302,7 @@ const Suggestions = ({ searchText, isOpen, setIsOpen }: SuggestionProp) => {
             aria-labelledby="menu-button"
             aria-orientation="vertical"
             className="tw-origin-top-right tw-absolute tw-z-10
-          tw-w-60 tw-mt-1 tw-rounded-md tw-shadow-lg
+          tw-w-full tw-mt-1 tw-rounded-md tw-shadow-lg
         tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 focus:tw-outline-none"
             role="menu">
             {getEntitiesSuggestions()}

openmetadata-ui/src/main/resources/ui/src/components/dropdown/AnchorDropDownList.tsx

@@ -34,8 +34,8 @@ const AnchorDropDownList = ({ dropDownList, setIsOpen }: DropDownListProp) => {
         <div className="py-1" role="none">
           {dropDownList.map((item: DropDownListItem, index: number) => (
             <div key={index}>
-              {item.isVersion ? (
+              {item.isText ? (
-                <div className="tw-px-2 tw-py-2 tw-font-normal">
+                <div className="tw-px-2 tw-py-1 tw-font-normal">
                   {item.name}
                 </div>
               ) : (

openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDown.tsx

@@ -26,6 +26,7 @@ const DropDown: React.FC<DropDownProp> = ({
   dropDownList,
   onSelect,
   selectedItems,
+  isDropDownIconVisible = true,
 }: DropDownProp) => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
@@ -63,7 +64,7 @@ const DropDown: React.FC<DropDownProp> = ({
           <button
             aria-expanded="true"
             aria-haspopup="true"
-            className={`tw-inline-flex tw-px-4 tw-py-2 focus:tw-outline-none ${
+            className={`tw-inline-flex tw-px-2 tw-py-2 focus:tw-outline-none ${
               type === DropDownType.CHECKBOX
                 ? `tw-rounded tw-text-body tw-text-gray-400 tw-border tw-border-main focus:tw-border-gray-500 tw-w-full`
                 : `tw-justify-center tw-nav`
@@ -107,7 +108,11 @@ const DropDown: React.FC<DropDownProp> = ({
                   </p>
                 )}
 
-                <DropdownIcon style={{ marginTop: '1px', color: normalLink }} />
+                {isDropDownIconVisible ? (
+                  <DropdownIcon
+                    style={{ marginTop: '1px', color: normalLink }}
+                  />
+                ) : null}
               </>
             )}
           </button>

openmetadata-ui/src/main/resources/ui/src/components/dropdown/types.ts

@@ -28,7 +28,7 @@ export type DropDownListItem = {
   method?: () => void;
   icon?: React.ReactElement;
   isOpenNewTab?: boolean;
-  isVersion?: boolean;
+  isText?: boolean;
 } & Record<
   string,
   string | number | boolean | undefined | Function | React.ReactElement
@@ -58,4 +58,5 @@ export type DropDownProp = {
   label?: string | React.ReactElement;
   type: string;
   icon?: React.ReactElement | string;
+  isDropDownIconVisible?: boolean;
 } & DropDownListProp;

openmetadata-ui/src/main/resources/ui/src/styles/x-master.css

@@ -164,8 +164,7 @@ a:focus {
   box-shadow: none;
 }
 .search-grey {
-  width: calc(300px - 60px);
+  width: 600px;
-  min-width: 150px;
 }
 
 .search-grey.has-search {
@@ -755,27 +754,19 @@ body .profiler-graph .recharts-active-dot circle {
 }
 
 /* Hide scrollbar for Chrome, Safari and Opera */
-/* #center::-webkit-scrollbar,
+#center::-webkit-scrollbar,
 #left-panel::-webkit-scrollbar,
 #right-panel::-webkit-scrollbar {
   display: none;
-  width: 4px;
-} */
-/* #center::-webkit-scrollbar-track {
-  background: #f8f9fa;
 }
-#center::-webkit-scrollbar-thumb {
-  background: #aaa;
-  border-radius: 12px;
-} */
 
 /* Hide scrollbar for IE, Edge and Firefox */
-/* #center,
+#center,
 #left-panel,
 #right-panel {
   -ms-overflow-style: none;
-  scrollbar-width: 4px;
+  scrollbar-width: none;
-} */
+}
 
 .page-layout-container {
   display: grid;

openmetadata-ui/src/main/resources/ui/src/utils/SvgUtils.tsx

@@ -75,6 +75,7 @@ import IconPipeline from '../assets/svg/pipeline.svg';
 import IconPlus from '../assets/svg/plus.svg';
 import IconProfiler from '../assets/svg/profiler.svg';
 import IconHelpCircle from '../assets/svg/question-circle.svg';
+import IconSearchV1 from '../assets/svg/search.svg';
 import IconSetting from '../assets/svg/service.svg';
 import IconSlackGrey from '../assets/svg/slack-grey.svg';
 import IconSlack from '../assets/svg/slack.svg';
@@ -175,6 +176,7 @@ export const Icons = {
   ICON_MINUS: 'icon-minus',
   TAG: 'icon-tag',
   TIER: 'icon-tier',
+  SEARCHV1: 'icon-searchv1',
 };
 
 const SVGIcons: FunctionComponent<Props> = ({
@@ -496,6 +498,10 @@ const SVGIcons: FunctionComponent<Props> = ({
     case Icons.TIER:
       IconComponent = IconTier;
 
+      break;
+    case Icons.SEARCHV1:
+      IconComponent = IconSearchV1;
+
       break;
 
     default: