Change list view header action menu from select to dropdown (#179)

* change select to dropdown in viewheader

* make the action happen

* remove comment

src/clients/ClientSettings.tsx

@@ -10,8 +10,8 @@ import {
   ActionGroup,
   Button,
   AlertVariant,
-  SelectOption,
   ButtonVariant,
+  DropdownItem,
 } from "@patternfly/react-core";
 import { useParams } from "react-router-dom";
 import { Controller, useForm } from "react-hook-form";
@@ -116,16 +116,25 @@ export const ClientSettings = () => {
               <ViewHeader
                 titleKey={name}
                 subKey="clients:clientsExplain"
-                selectItems={[
+                dropdownItems={[
-                  <SelectOption key="download" value="download">
+                  <DropdownItem
+                    key="download"
+                    onClick={() => toggleDownloadDialog()}
+                  >
                     {t("downloadAdapterConfig")}
-                  </SelectOption>,
+                  </DropdownItem>,
-                  <SelectOption key="export" value="export">
+                  <DropdownItem
+                    key="export"
+                    onClick={() => exportClient(form.getValues())}
+                  >
                     {t("common:export")}
-                  </SelectOption>,
+                  </DropdownItem>,
-                  <SelectOption key="delete" value="delete">
+                  <DropdownItem
+                    key="delete"
+                    onClick={() => toggleDeleteDialog()}
+                  >
                     {t("common:delete")}
-                  </SelectOption>,
+                  </DropdownItem>,
                 ]}
                 isEnabled={value}
                 onToggle={(value) => {
@@ -136,15 +145,6 @@ export const ClientSettings = () => {
                     save();
                   }
                 }}
-                onSelect={(value) => {
-                  if (value === "export") {
-                    exportClient(form.getValues());
-                  } else if (value === "delete") {
-                    toggleDeleteDialog();
-                  } else if (value === "download") {
-                    toggleDownloadDialog();
-                  }
-                }}
               />
             </>
           );

src/components/view-header/ViewHeader.tsx

@@ -11,22 +11,24 @@ import {
   ToolbarContent,
   ToolbarItem,
   Badge,
-  Select,
   ButtonProps,
+  Dropdown,
+  DropdownToggle,
+  DropdownPosition,
 } from "@patternfly/react-core";
 import { HelpContext } from "../help-enabler/HelpHeader";
 import { useTranslation } from "react-i18next";
 import { PageBreadCrumbs } from "../bread-crumb/PageBreadCrumbs";
 import { ExternalLink } from "../external-link/ExternalLink";
+import { isRowExpanded } from "@patternfly/react-table";
 
 export type ViewHeaderProps = {
   titleKey: string;
   badge?: string;
   subKey: string;
   subKeyLinkProps?: ButtonProps;
-  selectItems?: ReactElement[];
+  dropdownItems?: ReactElement[];
   isEnabled?: boolean;
-  onSelect?: (value: string) => void;
   onToggle?: (value: boolean) => void;
 };
 
@@ -35,14 +37,18 @@ export const ViewHeader = ({
   badge,
   subKey,
   subKeyLinkProps,
-  selectItems,
+  dropdownItems,
   isEnabled = true,
-  onSelect,
   onToggle,
 }: ViewHeaderProps) => {
   const { t } = useTranslation();
   const { enabled } = useContext(HelpContext);
-  const [open, setOpen] = useState(false);
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+
+  const onDropdownToggle = () => {
+    setDropdownOpen(!isDropdownOpen);
+  };
+
   return (
     <>
       <PageSection variant="light">
@@ -62,7 +68,7 @@ export const ViewHeader = ({
             </Level>
           </LevelItem>
           <LevelItem></LevelItem>
-          {selectItems && (
+          {dropdownItems && (
             <LevelItem>
               <Toolbar>
                 <ToolbarContent>
@@ -81,19 +87,16 @@ export const ViewHeader = ({
                     />
                   </ToolbarItem>
                   <ToolbarItem>
-                    <Select
+                    <Dropdown
-                      placeholderText={t("common:action")}
+                      position={DropdownPosition.right}
-                      isOpen={open}
+                      toggle={
-                      onToggle={() => setOpen(!open)}
+                        <DropdownToggle onToggle={onDropdownToggle}>
-                      onSelect={(_, value) => {
+                          {t("common:action")}
-                        if (onSelect) {
+                        </DropdownToggle>
-                          onSelect(value as string);
                       }
-                        setOpen(false);
+                      isOpen={isDropdownOpen}
-                      }}
+                      dropdownItems={dropdownItems}
-                    >
+                    />
-                      {selectItems}
-                    </Select>
                   </ToolbarItem>
                 </ToolbarContent>
               </Toolbar>

src/stories/ViewHeader.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import { Page, SelectOption } from "@patternfly/react-core";
+import { DropdownItem, Page } from "@patternfly/react-core";
 import {
   ViewHeader,
   ViewHeaderProps,
@@ -26,13 +26,13 @@ Extended.args = {
     title: "More information",
     href: "http://google.com",
   },
-  selectItems: [
+  dropdownItems: [
-    <SelectOption key="first" value="first-item">
+    <DropdownItem key="first" value="first-item" onClick={() => {}}>
       First item
-    </SelectOption>,
+    </DropdownItem>,
-    <SelectOption key="second" value="second-item">
+    <DropdownItem key="second" value="second-item" onClick={() => {}}>
       Second item
-    </SelectOption>,
+    </DropdownItem>,
   ],
 };