SavedQueryDialog

SavedQueryDialog is a reusable React component that provides a modal dialog interface for saving new queries or confirming the deletion of existing queries. It uses PrimeReact's Dialog component and adapts its content based on the operation type.

Features

• Dual-purpose dialog - Single component handles both save and delete operations
• Context-aware interface - Changes header, content, and button text based on operation type
• Input validation - Includes input field for naming queries during save operations
• Responsive design - Adapts to different screen sizes while maintaining usability
• Customizable styling - Uses Tailwind CSS classes for easy styling customization

Installation

Ensure you have the required dependencies:

# If using npm
npm install primereact react

# If using yarn
yarn add primereact react

Component API

Props

Prop	Type	Required	Default	Description
visible	boolean	Yes	-	Controls whether the dialog is displayed.
onProceed	function	Yes	-	Callback function triggered when the confirm button is clicked.
onClose	function	Yes	-	Callback function triggered when the dialog is closed via the close button or mask click.
isDialogForSave	boolean	Yes	-	Determines the dialog mode - true for save operation, false for delete operation.
onQueryNameChange	function	Yes	-	Callback function for query name input changes. Receives field name and value.
queryName	string	Yes	-	Current value of the query name input field.

Basic Usage

import React, { useState } from 'react';
import SavedQueryDialog from './SavedQueryDialog';

function MyComponent() {
  const [dialogVisible, setDialogVisible] = useState(false);
  const [isDialogForSave, setIsDialogForSave] = useState(true);
  const [queryName, setQueryName] = useState('');

  // Open dialog for saving
  const handleSaveClick = () => {
    setIsDialogForSave(true);
    setDialogVisible(true);
  };

  // Open dialog for deletion
  const handleDeleteClick = () => {
    setIsDialogForSave(false);
    setDialogVisible(true);
  };

  // Handle dialog close
  const handleDialogClose = () => {
    setDialogVisible(false);
  };

  // Handle confirm button click
  const handleDialogProceed = () => {
    if (isDialogForSave) {
      // Save query logic
      console.log(`Saving query with name: ${queryName}`);
    } else {
      // Delete query logic
      console.log('Deleting query');
    }
    setDialogVisible(false);
  };

  // Handle query name input changes
  const handleQueryNameChange = (name, value) => {
    setQueryName(value);
  };

  return (
    <div>
      <button onClick={handleSaveClick}>Save Query</button>
      <button onClick={handleDeleteClick}>Delete Query</button>

      <SavedQueryDialog
        visible={dialogVisible}
        onProceed={handleDialogProceed}
        onClose={handleDialogClose}
        isDialogForSave={isDialogForSave}
        onQueryNameChange={handleQueryNameChange}
        queryName={queryName}
      />
    </div>
  );
}

Dialog Modes

Save Mode

When isDialogForSave is true:

• Dialog header displays "Save Query"
• Content shows an input field for the query name
• Confirm button shows "Save" text

Delete Mode

When isDialogForSave is false:

• Dialog header displays "Delete Query"
• Content shows a confirmation message
• Confirm button shows "Yes" text

Component Internals

The SavedQueryDialog component leverages PrimeReact's Dialog component for modal functionality and combines it with:

1. Conditional Rendering - Different content based on the dialog mode
2. AdvancedInputField - Custom input component for query naming
3. Styling - Tailwind CSS utility classes for consistent styling

Dependencies

This component has the following dependencies:

• React - Core library for building the component
• PrimeReact - UI component library for Dialog and Button
• AdvancedInputField - Custom input field component for query naming

Styling

The component uses several styling approaches:

• PrimeReact Styling - Base styling from PrimeReact's Dialog and Button
• Tailwind CSS - Utility classes for layout and spacing
• PrimeReact Theme Tokens (PT) - Custom styling for the dialog mask using PrimeReact's Pass Through (PT) API

CSS Classes Used

• select-none - Prevents text selection within the dialog
• !bg-black/70 - Sets dialog backdrop to semi-transparent black (70% opacity)
• p-fluid - PrimeReact class for full-width form layout
• p-field - PrimeReact class for form field container
• mt-10 - Margin top (2.5rem)
• flex justify-center - Center-aligns the button
• p-button-primary - PrimeReact primary button styling
• max-w-40 min-w-40 - Sets fixed width for the button (10rem)

Usage with AdvancedQueryFilter

This component is designed to work seamlessly with the AdvancedQueryFilter component:

// Inside AdvancedQueryFilter component
<SavedQueryDialog
  visible={dialogVisible}
  isDialogForSave={isDialogForSave}
  onClose={handleDialogClose}
  onProceed={handleDialogProceed}
  onQueryNameChange={handleQueryNameChange}
  queryName={queryName}
/>

The AdvancedQueryFilter component manages the state and callbacks needed by SavedQueryDialog.

Accessibility Considerations

• The dialog uses proper focus management through PrimeReact's Dialog
• Keyboard navigation is supported (Tab, Escape)
• Content structure follows semantic HTML patterns

Best Practices

1. Clear Labels - Use descriptive dialog titles and button labels
2. Input Validation - Add validation for query names (e.g., prevent duplicates)
3. Error Handling - Add error states for failed operations
4. Keyboard Support - Ensure all functions can be triggered via keyboard

Troubleshooting

Common Issues

• Dialog not showing - Check that the visible prop is correctly toggled
• Query name not updating - Verify the onQueryNameChange callback is correctly implemented
• Styling inconsistencies - Ensure required PrimeReact themes are properly imported

Customization

Styling Customization

To customize the appearance:

<SavedQueryDialog
  // Other props
  pt={{ 
    mask: { className: "!bg-blue-500/50" }, // Change backdrop color
    content: { className: "bg-gray-100" }    // Change content background
  }}
/>

Size Customization

<SavedQueryDialog
  // Other props
  style={{ width: "600px" }} // Change dialog width
/>

Contributing