feat(wren-ui): Added FE Support for MySQL SSL Connection #1072
Conversation
WalkthroughThe pull request introduces comprehensive SSL configuration support for MySQL data sources across the Wren UI application. The changes span multiple files, adding new enumerations for SSL modes, updating connection information interfaces, and enhancing the MySQL properties component to support SSL certificate uploads. The modifications enable users to configure different SSL modes (DISABLE, REQUIRE, VERIFY_CA) and upload SSL certificates when needed. Changes
Assessment against linked issues
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Hi, I’m exploring ways to allow users to select a file from their local system and display its absolute file path, instead of typing the path into the input box themselves. I’ve looked into the Ant Design |
|
hi @ongdisheng any reason you close this PR ? looks like a good contribution to me! I'm thinking we should provide some options for users to pick instead of a SSL Mode
If users choose cc @fredalai @andreashimin @onlyjackfrost chime in if you guys want. I think you might want to work on some implementation on backend as well. |
|
Hi @wwwy3y3, thank you for the feedback! I closed the PR earlier as I felt the current implementation wasn't quite up to the mark. I’ve reopened it as a draft and will continue working on it 😊. |
ongdisheng
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
wren-ui/src/apollo/server/types/index.ts (1)
7-7: Leverage strongly-typed imports for maintainability.Exporting everything from
./sslModeis a valid approach for quick bundling. However, if the file grows, consider explicitly re-exporting only what's needed to maintain clarity and ensure only intended types or utilities are exposed.wren-ui/src/utils/error/dictionary.ts (1)
52-54: Provide additional clarity for SSL certificate requirements.The new
SSL_CERT.REQUIREDmessage is straightforward. To further assist users, consider including details on valid file formats or maximum file sizes (if applicable). This can reduce confusion about acceptable certificate files during upload.wren-ui/src/components/pages/setup/dataSources/MySQLProperties.tsx (2)
13-63: Consider improving file upload error handling and applying optional chaining.
TheUploadSSLcomponent is well-structured, but there are points you might refine:
- Potential file-read failures: The
readFileContentfunction does not handle errors. Consider addingreader.onerrorto handle read failures gracefully.- Optional chaining: Instead of using
onChange && onChange(...)at lines 41 and 49, you can use optional chaining (onChange?.(...)) in TypeScript/modern JS for cleaner code.- File size or type checks: If large or invalid files are a concern, consider validating them in the
onUploadChangeevent.Below is a suggested diff snippet for optional chaining:
- onChange && onChange(fileContent); + onChange?.(fileContent);- onChange && onChange(undefined); + onChange?.(undefined);🧰 Tools
🪛 Biome (1.9.4)
[error] 41-41: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 49-49: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
149-176: Enhance user guidance and default behaviors for SSL mode.
- User feedback: When users select a mode other than
DISABLE, consider giving tooltips or descriptions to clarify whatREQUIREvs.VERIFY_CAdoes.- Conditional display: The conditional rendering for
sslCAis correct but ensure it matches any server constraints (e.g., do you also need a client certificate or key?).- Preview uploaded file: If needed, allow users to confirm they uploaded the correct SSL certificate by showing a truncated snippet of file content or the file name.
Would you like help implementing additional user feedback or advanced upload validations?
wren-ui/src/apollo/server/dataSource.ts (1)
111-125: Verify base64 encoding and SSL property usage.
This block correctly includessslModeand optionally base64-encodessslCAbefore returning. A few considerations:
- Condition checks: If you add more SSL-related fields (e.g.,
sslKeyorsslCert) in the future, ensure consistent logic for each field.- Validate usage: Confirm that downstream code expects a base64 string for
sslCA.wren-ui/src/apollo/server/adaptors/tests/ibisAdaptor.test.ts (2)
48-49: Clarify SSL usage in test data.
You’ve specifiedsslMode: SSLMode.VERIFY_CAandsslCA: 'encrypted-certificate-string'. Make sure tests also cover other modes for completeness (e.g.,SSLMode.DISABLE,SSLMode.REQUIRE).
191-202: Check for consistent property naming and transformations.
Here, you mapsslCAtosslCA(base64-encoded). For uniformity, confirm that other SSL props (e.g.,sslKey) follow a similar approach to keep your code symmetrical.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
wren-ui/src/apollo/server/adaptors/tests/ibisAdaptor.test.ts(3 hunks)wren-ui/src/apollo/server/dataSource.ts(1 hunks)wren-ui/src/apollo/server/repositories/projectRepository.ts(1 hunks)wren-ui/src/apollo/server/types/index.ts(1 hunks)wren-ui/src/apollo/server/types/sslMode.ts(1 hunks)wren-ui/src/components/pages/setup/dataSources/MySQLProperties.tsx(2 hunks)wren-ui/src/utils/enum/index.ts(1 hunks)wren-ui/src/utils/enum/sslMode.ts(1 hunks)wren-ui/src/utils/error/dictionary.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- wren-ui/src/apollo/server/types/sslMode.ts
- wren-ui/src/utils/enum/sslMode.ts
🧰 Additional context used
🪛 Biome (1.9.4)
wren-ui/src/components/pages/setup/dataSources/MySQLProperties.tsx
[error] 41-41: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 49-49: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (6)
wren-ui/src/utils/enum/index.ts (1)
10-10: Centralize enum usage.Similarly, re-exporting all from
sslModemakes the enum easily accessible throughout the codebase. As the codebase evolves, ensure repeated or conflicting enum definitions are consolidated to maintain consistency.wren-ui/src/components/pages/setup/dataSources/MySQLProperties.tsx (2)
1-6: Ensure consistent import usage and check for unused imports.
These imports look fine for the newly introduced features, such asUploadand Ant Design icons. Verify that each imported item (e.g.,Button,Select) is actually used in this file.
68-69: Ensure SSL mode state updates are fully validated.
ThesslModestate andonSSLModeChangefunction are straightforward. Double-check that all form validations (e.g., required certificates on certain modes) are handled or triggered consistently in your parent form logic.wren-ui/src/apollo/server/dataSource.ts (1)
105-105: Add an extra safeguard for sensitive properties.
By addingsslCAtosensitiveProps, you ensure that it will be encrypted at rest. Confirm that your logs or error outputs do not inadvertently displaysslCAvalues in plaintext.wren-ui/src/apollo/server/adaptors/tests/ibisAdaptor.test.ts (2)
9-9: Consolidate or differentiate imports as needed.
The newSSLModeimport is straightforward. If multiple modules import the same enumerations, ensure they reference a shared location for consistency.
181-184: Consider verifying decryption fails gracefully ifsslCAis invalid.
Currently, you mock decryption to always succeed with ansslCAstring. Test how your code behaves if decryption fails or the certificate data is malformed.
Description
This PR introduces SSL connection handling for
MySQLdata source by adding aSelectmenu and anUploadcomponent for Certificate Authority (CA) Certificate in the setup form. Meanwhile, existing logic has also been modified to include these fields when passing connection info to the engine. Fix #886UI Screenshot
VERIFY_CA), the connection succeeds:Summary by CodeRabbit
New Features
Improvements
Documentation