feat: table query sidebar

[sunchanglong]

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly refactors the table management sidebar in the dashboard, moving from a collapsible database structure to a more user-friendly design. The changes introduce a dedicated dropdown for database selection and a separate input for searching tables, aiming to streamline the user experience for exploring and interacting with database schemas.

Highlights

• UI/UX Overhaul for Table Manager Sidebar: Replaced the collapsible database list with a more intuitive database dropdown selector and a dedicated table search input, improving navigation and search functionality.
• Enhanced Database Selection Logic: Introduced an 'activeDatabase' state and a watch effect to automatically select a default database and refresh table data upon database list changes.
• Localized Text Updates: Added new translation keys for 'Search database...' and 'tables' and updated the placeholder for table input in both English and Chinese locales.
• Improved Table Count Display: Implemented a 'currentTablesCount' computed property to show the number of tables for the currently selected database.
• Styling Refinements: Introduced new CSS for the database selector and table search components, and removed old collapse-related styles, contributing to a cleaner visual presentation.

Changelog

• src/locale/en-US/dashboard.ts
  • Updated the placeholder text for the dashboard input field to "Table name..."
  • Added new localization keys for "Search database..." and "tables".
• src/locale/zh-CN/dashboard.ts
  • Updated the placeholder text for the dashboard input field to "表格名称..."
  • Added new localization keys for "搜索数据库..." and "张表".
• src/views/dashboard/modules/table-manager.vue
  • Replaced the 'a-collapse' component for database selection with an 'a-select' dropdown and a separate 'a-input' for table searching.
  • Implemented 'activeDatabase' state management and a watch effect to handle database changes and initial selection.
  • Added a 'currentTablesCount' display to show the number of tables in the active database.
  • Refactored the 'setRefMap' and 'expandedTablesTree' computed properties to align with the new single active database model.
  • Simplified the 'virtualListHeight' calculation to use the full available height.
  • Introduced new CSS classes ('.database-selector', '.table-search', '.table-total') and removed styles related to the old collapse component.

Activity

• No human activity (comments, reviews) has been recorded on this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request refactors the table and database sidebar by replacing the accordion-style database list with a dropdown selector. This is a good user experience improvement, especially for users with many databases. The implementation is solid, with corresponding updates to the component's logic, template, and localization files. I've found a couple of minor areas for improvement in the CSS for better maintainability.

[gemini-code-assist]

The CSS class .current-database-info and its child classes are defined but do not appear to be used within this component's template. This seems to be dead code that can be removed to improve code clarity.