QueryPanel Component

The QueryPanel is a customizable React component used to render a collection of query-related buttons and a saved query dropdown. It supports both predefined and dynamic buttons and is often used in conjunction with an advanced search or query form.

Props

Prop	Type	Description
buttonDefinition	Array<Object>	List of custom button configurations. Each object should have a label key.
handleButtonClick	Function	Callback for handling standard button clicks and the saved query dropdown selection.
customButtonFunction	Function	Callback for custom button actions, triggered by items in buttonDefinition.
showSave	boolean	If true, renders the "Save" button.
showEdit	boolean	If true, renders the "Edit" button.
showDelete	boolean	If true, renders the "Delete" button.
selectedQuery	string	Currently selected query in the dropdown.
savedQueryList	Array<string>	List of saved queries to show in the dropdown.

Usage

<QueryPanel
  buttonDefinition={[{ label: "Export" }]}
  handleButtonClick={(e, label) => console.log(label)}
  customButtonFunction={(e, label) => alert(`Custom: ${label}`)}
  showSave={true}
  showEdit={true}
  showDelete={false}
  selectedQuery={"MyQuery1"}
  savedQueryList={["MyQuery1", "MyQuery2"]}
/>

Behavior

• Standard buttons like "New Query", "Search", "Save", "Edit", and "Delete" are always shown based on respective props.
• A dropdown is used to display a list of saved queries. Selecting an item triggers handleButtonClick with "saved query" as the label.
• buttonDefinition allows you to pass custom button configurations dynamically.

Styling

• Uses PrimeReact Button and Dropdown components.
• Uses a flexible layout with TailwindCSS utility classes (flex, gap-4, flex-wrap, items-center).

Example Appearance

A row of buttons followed by a dropdown for selecting saved queries. Buttons can be shown or hidden based on the props, making this component suitable for dynamic UIs involving saved and executable queries.