Description:
The current implementation of the Query History component allows users to delete individual queries by clicking the delete button. However, deletion should be based on the query's index rather than removing all occurrences of a specific query.

Steps to Reproduce:

-Navigate to the Query History component.
-Execute multiple queries, creating a history list.
-Attempt to delete a specific query by index.

Expected Behavior:
The user should be able to delete a query based on its index, removing only that specific occurrence while keeping others intact.

Actual Behavior:
The current implementation removes all occurrences of the specified query when using the delete button.

Add a CONTRIBUTING.md file with a detailed explanation of how a new user can use and contribute to the repository.

It should include -

1. Setting up the project locally guide.
2. Github workflow of cloning, forking, adding upstream, separate branches, etc.
3. Procedure to make a PR.

Recently, we have added our Contributing.md file that guides a user on how to contribute. Add a section in the README.md named "Community and Contributions" that references the user to the contributing guidelines. Also, list all the contributors to the project in this section.

Example -

Is your feature request related to a problem? Please describe.
Yes, after executing a query, users need a way to easily determine the number of rows affected or the count of rows returned.

Describe the solution you'd like
I would like a button beside query took: 0ms button where, after executing a query, the application displays the number of rows affected or the count of rows returned. This information is valuable for users to understand the impact of their query and verify the success of the operation.

Describe alternatives you've considered
An alternative could be manually checking the count or number of rows in the database, but having this information displayed immediately after query execution would streamline the process and enhance user experience.

Additional context
This feature would provide users with quick feedback on the outcome of their executed queries, improving the usability of the application.

Is your feature request related to a problem? Please describe.
Add a dark mode toggle on the top beside the GitHub button.

Describe the solution you'd like
Chakra UI supports in built support for mode change button.

for reference - https://chakra-ui.com/docs/styled-system/color-mode

Is your feature request related to a problem? Please describe.
It is not related to a problem but it would give more precise message to user.

Describe the solution you'd like
Message for incorrect query should be clear and separate from empty query message.

Additional context

incorrect query error message (proposed change)

empty query error message (already implemented)

Describe the bug
The query time box isn't appropriately positioned right now.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://sql-editor-online.vercel.app/
2. Run a query.

Expected behavior
Align the 'Query took' box below the Export JSON button and make it responsive for all screens.

Screenshots
Current large screen view -

mobile view -

Describe the bug
There are 2 scenarios to reproduce this bug:

1. User runs query for other tables e.g. Categories, Products or Suppliers. But SQL web app always display results for Customers.
2. User runs query with invalid table name. But SQL web app display results for Customers table.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://sql-editor-i8d6w7vvc-janvi01.vercel.app/'
2. Enter query 'select * from CATEGORIES'
3. Click on 'Run Query' button > Results are displayed for Customers table.
4. Enter query 'select * from CATEGO'
5. Click on 'Run Query' button > Results are displayed for Customers table.

Expected behavior
For scenario 1:
SQL web app must display results for specific table in query.

For scenario 2:
SQL web app must display error message.

Screenshots
The column names in screenshot should be categoryId, categoryName, description, picture.

Desktop (please complete the following information):

• OS: Windows 10
• Browse: Chrome, Edge, Mozilla
• Chrome Version [118.0.5993.89]

Description
Contributor onboarding could be improved by providing a visual guide on how to install the project locally. Adding a video demonstration will help newcomers understand the setup process more effectively.

Expected Outcome:
The addition of a video tutorial in the README, demonstrating the step-by-step process of installing the project locally, will make it easier for contributors, especially those new to the codebase.

Proposed Content:
A short video covering the following:

Cloning the repository.
Installing dependencies.
Configuring any necessary settings.
Running the project locally.
Problem
Contributor onboarding could be improved by providing a visual guide on how to install the project locally. Adding a video demonstration will help newcomers understand the setup process more effectively.

Proposed Solution
Record a concise video for that.

-> raising under #JWOC

SQL online editor uses React-ace code editor. Implement a dropdown to change the font size of the editor.

Describe the solution you'd like

• Add a dropdown beside the theme dropdown.
• use reference from react ace how the font size dropdown is implemented.

for example -

Is your feature request related to a problem? Please describe.
Currently, after running a query we can export results in the CSV format.

Describe the solution you'd like

• Add a way to export results in JSON files.
• Add a button the same as 'Export CSV' as 'Export JSON'

Is your feature request related to a problem? Please describe.
Just like the result can be exported in CSV format in our web app now, there should be a way to import data also.

Describe the solution you'd like
Add an import button that on clicks prompts the user to their local files. The styling would be the same as the export button and needs to be added below the editor beside the available tables button. There is no need to add further functionality, just UI as of now.

Add a button having an icon and "Import" that on clicks prompts the user to their local files.

Is your feature request related to a problem? Please describe.
Currently, when clicking on the run query, the spinner loads, and the result is displayed.

Describe the solution you'd like
Add a toast component saying "Query run successful" that appears at the bottom after a query is being run and disappears when results are displayed.

Take reference from the Chakra Toast component..

Describe the bug
The recently executed query is appended to the end of the query history, which should be displayed at the top instead of the last position in the query history.

To Reproduce
-Execute a query.
-Execute another query.
-Observe the position of the last executed query in the query history.

Expected behavior
The recently executed query should be displayed at the top of the query history.

Screenshots
N.A

Desktop (please complete the following information):

• Operating System: Windows 10
  -Browser: Chrome, Firefox
  -Browser Version: 1.61.101

Additional context
N.A

Describe the bug
There are 2 issues with the alignment of Delete buttons:

1. Delete button touches the text in Queries History section. There should be some spacing (reproducible when screen width > 1428px)
2. Delete buttons are not in alignment if there are more than one text query in history.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://sql-editor-i8d6w7vvc-janvi01.vercel.app'.
2. Run the query using a table name (Click on 'Available Tables' button to see table names).
3. Run another query with another table name of different length (eg. Customers and Products).
4. See error: Delete button are too close to the text and not aligned with consistent spacing. (When screen width is > 1428px)

Expected behavior
There should be a consistent spacing between text and delete buttons. My suggested is to right align the delete button with some right margin.

Screenshots

Desktop

• OS: Windows 10
• Browse: Chrome, Edge, Mozilla
• Chrome Version [118.0.5993.89]
• Screen width: bug is reproducible when screen width > 1428px

Currently, the readme looks average with no styling and attraction for users.

Revamp the readme introduction part by adding different badges.

For Example - Take a reference from the react-play repo. Use sql editor favicon icon

Describe the bug
Currently, we have added a functionality to delete a single history but the icons are not aligned, it is not responsive.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://sql-editor-online.vercel.app/
2. Click on Run Query.
3. See Query history container.

Expected behavior
Align the elements properly, fix the height, add a vertical scrollbar, and make it responsive for all screens.

Screenshots

Is your feature request related to a problem? Please describe.
Currently, when we click on fullscreen/expand btn, it just expands the editor merely.

Describe the solution you'd like
After clicking on fullscreen btn, the editor spreads over the screen fully and the query history can be made hidden (maybe in a click drawer or something else appropriate).

Describe alternatives you've considered

Describe the bug
When user runs the query 1st time, the results are displayed. But when user runs the query 2nd time, the results are not displayed and loader keeps spinning.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://sql-editor-i8d6w7vvc-janvi01.vercel.app/'
2. Click on 'Run Query' button > Results would be displayed.
3. Click on 'Run Query' button again > This time, results are not displayed, but loader keeps spinning.

Expected behavior
Results should be displayed every time the query is run by user.

Screenshots
When user runs the query 1st time.

When user runs the query 2nd time.

Desktop

OS: Windows 10
Browse: Chrome, Edge, Mozilla
Chrome Version [118.0.5993.89]
Screen width: bug is reproducible when screen width > 1428px

Describe the bug
Currently, the queries history cards expand as much as we add. It isn't appropriate after a certain height.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://sql-editor-online.vercel.app/
2. Click on Run Query and do it for several times.
3. See Query history container.

Expected behavior
Query history should be scrollable and the height should be fixed.

Screenshots

Describe the bug
Currently, we have added a new girl with laptop illustration which has reduced the page performance as the Image elements do not have explicit width and height.

image ref: https://pagespeed.web.dev/analysis/https-sql-editor-online-vercel-app/moc82rthn4?form_factor=desktop
(go to https://pagespeed.web.dev/ and enter https://sql-editor-online.vercel.app/ to get page speed insights)

Expected behavior
Add appropriate Image width and height to girlwithlaptop image illustration and kindly crosscheck on page speed if the errors go or not.

Is your feature request related to a problem? Please describe.
Currently, the queries history card is not well-designed.

Describe the solution you'd like
Reimplement query history cards with an improved design that enhances user experience.

Describe the bug
A clear and concise description of what the bug is.
The query history viewer has spacing and UI flaws that can be improved

Things that can be done to improve the UI:

• addition of a better icon for each history item.
• left alignment of the query item content
• trail the query with "...." if its length is bigger than container width

Is your feature request related to a problem? Please describe.
Currently, the user is able to delete all history at once. There should be a way to delete a single history at a time.

Describe the solution you'd like
Add a delete button beside each history row and onclick it should delete that particular history. This can be done using a map and assigning a unique key to every history.

Describe the bug
Currently, the query output header(Query output text, query time, export csv) is not responsive in mobile view.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://sql-editor-online.vercel.app/
2. Switch to Mobile view.
3. Run a Query and scroll down to Query output.

Expected behavior
It should be responsive.

Screenshots

Describe the bug
If the queryHistory list is empty, the queryHistoryButton is still visible when it should be hidden.

To Reproduce
Steps to reproduce the behavior:

• Execute a query to populate the queryHistory.
• Remove all queries from the queryHistory.
• Observe that the queryHistoryButton is still visible even though the queryHistory list is empty.

or
-Observe that the queryHistoryButton is still visible even though the queryHistory list is empty.

Expected behavior
If the queryHistory list is empty, the queryHistoryButton should be hidden.

Actual Behavior
The queryHistoryButton remains visible even when the queryHistory list is empty.

Screenshots

Desktop (please complete the following information):
-Operating System: Windows 10
-Browser: Chrome, Firefox
-Browser Version: 1.61.101

Additional context
N.A

Describe the bug
content overflow of query time container in mobile view

To Reproduce
Steps to reproduce the behavior:

Go to https://sql-editor-online.vercel.app/
Click on Run Query.
See Query time container.

Expected behavior
fix the width of the element and add proper padding . maybe a column view is needed for the content for better spacing .

Describe the bug:
The "Select Theme" button is currently utilizing the same background color as the website background, resulting in visual inconsistency and making the button less noticeable.

To Reproduce:

• Navigate to the homepage.
• Locate the "Select Theme" button.
• Observe the background color of the button.

Expected behavior
The "Select Theme" button should have a distinct background color that differs from the website background, ensuring it stands out and aligns with the theme selection feature.

ScreenShots

Current UI

Proposed UI

I have the implementation ready, If it aligns with the project requirement assign me this issue, will raise PR.

Describe the bug
Currently, the accessibility score of https://sql-editor-online.vercel.app/ is 96. It can be improved to 100%.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://pagespeed.web.dev/ or Chrome dev tools Lighthouse report.
2. Measure https://sql-editor-online.vercel.app/ page score.
3. See the accessibility score and how it can be improved.

Expected behavior
Improve the accessibility score.

Screenshots

Is your feature request related to a problem? Please describe.
It is not related to a problem. if implemented, web app would behave same as in SQL servers.

Describe the solution you'd like
Accept queries in uppercase, lowercase or mixed case.

Additional context

lowercase query

UPPERCASE query

Is your feature request related to a problem? Please describe.
Add a Footer section that includes -

• copyrights - "SQL Online Editor - Copyright ©2023"
• the creator's GitHub profile - https://github.com/janvi01
• "Found an issue? Report it here"

Take reference from other open-source projects like https://reactplay.io/

Describe the bug
Fix the responsiveness of the web app for all screen views.
Use flex, stack row & column according to the screen size.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://sql-editor-online.vercel.app/
2. Switch to mobile view.
3. See the components overlaying over each other and being unresponsive.

Expected behavior
Fix the responsiveness for each component for all screen views. (particularly mobile view)

Screenshots

Is your feature request related to a problem? Please describe.
Currently, when there is no query run, it shows "Nothing to show at the moment" which looks boring.

Describe the solution you'd like
Reimplement the empty area with an image addition and text shown below.

png file -

The upper div will expand up to the illustration.

When working on a certain open-source project, every participant should understand what is expected of them. That is where a code of conduct comes in. This is a document that outlines the rules that the participants in the open-source community should follow.

Create a new file named CODE_OF_CONDUCT and add guidelines.

Take reference from -

1. React - https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md
2. Google - https://opensource.google/conduct
3. https://contributing.md/your-code-of-conduct-for-open-source-communities/

Describe the bug
Executing the same query results in it being added to the query history, even though it should not be added if the previous query executed was the same.

To Reproduce
Steps to reproduce the behavior:

1. Execute a query.
2. Execute the same query again.

Expected behavior
The same query should not be added to the query history if it was the previous query is executed.

Screenshots
N.A.

Desktop (please complete the following information):

• Operating System: Windows 10
• Browser: Chrome, Firefox
• Browser Version: 1.61.101

Additional context
N.A.