search

drawdb-io / drawdb

Free, simple, and intuitive online database design tool and SQL generator.
https://drawdb.vercel.app
MIT License
12.09k stars 855 forks source link

Completed the Ability to Share Database Diagrams via Links #75 - Mica #88

Closed micatonge closed 2 months ago

micatonge commented 2 months ago

Link to Relevant Issue: Adding the Ability to Share Database Diagrams via Links #75

Problem: This PR addresses the need to enable users to easily share their database diagrams with others, facilitating collaboration and learning within the DrawDB application. The lack of a sharing feature limits users' ability to exchange data models efficiently, hindering collaborative efforts.

Solution: In response to the issue, I implemented a sharing feature in two main components: ControlPanel.jsx and App.jsx. In ControlPanel.jsx, I added a button component with a tooltip to allow users to share links to their database diagrams. Clicking the button triggers the shareLink function, which constructs a URL for the diagram by appending the unique diagramId to the base URL obtained from window.location.origin. The URL is then copied to the clipboard using navigator.clipboard.writeText(). Additionally, I updated the React Router configuration in App.jsx to include a dynamic route parameter :diagramId, allowing the application to handle URLs with specific diagram identifiers. This enables the Editor component to load the corresponding diagram based on the provided diagramId, enhancing user experience by facilitating seamless navigation and collaboration.

Authorization Integration: In addition to sharing functionality, I proposed incorporating authorization mechanisms to ensure data security and privacy. Similar to Canva's UI/UX design, where shared documents are accessible only to users with appropriate permissions, our application should implement similar functionality. This entails associating shared links with specific access permissions, allowing users to configure permissions (e.g., view, edit, comment) when sharing a diagram. The authorization process should be seamlessly integrated into the sharing workflow, providing clear notifications and prompts to users when accessing shared diagrams. Prioritizing data security and user privacy in the sharing feature's design enhances user trust and confidence in our application.

Test Plan: To test the functionality, follow these steps:

  1. Click the share button in the Control Panel.
  2. Verify that a URL with the correct diagramId is copied to the clipboard.
  3. Paste the copied URL into a browser window and verify that the corresponding diagram is loaded based on the diagramId.

This PR aims to enhance collaboration and user experience within the DrawDB application by introducing a robust sharing feature and emphasizing data security and privacy through authorization integration.

vercel[bot] commented 2 months ago

@micatonge is attempting to deploy a commit to the dottle's projects Team on Vercel.

A member of the Team first needs to authorize it.

1ilit commented 2 months ago

Thanks for the contribution but this won't work.

In order for this to work the diagrams would have to be saved somewhere centralized. Since they're saved locally in the browser, when you send me the link editor/1 this will load my local diagram with id 1 not the one you sent me.

DesignThinkerer commented 1 month ago

Thanks for the contribution but this won't work.

In order for this to work the diagrams would have to be saved somewhere centralized. Since they're saved locally in the browser, when you send me the link editor/1 this will load my local diagram with id 1 not the one you sent me.

the diagram could be saved on a github gist, that's what https://sqlime.org/ does and it works well