yorkie-team / dashboard Goto Github PK
View Code? Open in Web Editor NEWDashboard is an administrative tool that allows users to manage projects and documents with ease.
Home Page: https://yorkie.dev/dashboard/
License: Apache License 2.0
Dashboard is an administrative tool that allows users to manage projects and documents with ease.
Home Page: https://yorkie.dev/dashboard/
License: Apache License 2.0
Description:
migration moment.js to date-fns
Why:
Moment is lagacy project. And it might cause a huge performance overhead because of its complex APIs and large bundle size.
Description:
Implement document detail page.
The document detail page is shown when the user selects a document from the document list page.
/documents
/documents/{document ID or Key}
Why:
Description:
There is a bug where attributes set in Tree are not displayed in the dashboard.
Dashboard retrieves detailed information about a document by calling the GetDocument
API from the server. It is suspected that attributes might be missing in the snapshot generated by the server.
Dashboard:
dashboard/src/features/documents/DocumentDetail.tsx
Lines 36 to 39 in d32345e
Why:
Description:
When moving to the document detail page, the document list should be kept.
When the document is clicked, the document list is initialized to page 1.
When the back button is clicked in the document detail view, the document list is initialized to page 1.
Why:
Users can easily navigate documents when keeping the document list
Description:
Suggest to make StatusWrapper for handling all status.
Currently, components, such as Overview, DocumentDetail, DocumentList, ...etc, are rendered by status like below.
export function Overview() {
return (
<div>
{status === 'loading' && <div>Loading...</div>}
{status === 'failed' && <div>Failed!</div>}
{status === 'idle' && <div>{project?.name}</div>}
</div>
);
}
Status loading and failed
are commonly used and thought it could be good first step to refactor.
export function StatusWrapper({ children, status }) {
if (status === 'loading') return <div>Loading...</div>
else if (status === 'failed') return <div>Failed!</div>
else return children;
}
export function Overview() {
return (
<div>
<StatusWrapper status={status}>
<div>{project?.name}</div>
</StatusWrapper>
</div>
)
}
Why:
To Eliminate duplicates and easily handle status.
Description:
Currently, the login button is not visible on the mobile page, which creates difficulty for mobile users to access the login page. To improve user experience, it is recommended to introduce a login redirect button that is clearly visible and accessible on the mobile page to direct users to the login page seamlessly.
Why:
Enhance the accessibility and usability of the platform for mobile users.
Description:
Script error when accessing a document created by ProseMirror example on dashboard
After creating the document of the ProseMirror example of the JS SDK, there seems to be a script error occurring when accessing the document on the Dashboard.
In the example, the selection is saved as a byte array type in the document to propagate it to the peers.
However, this seems to be causing a script error when performing JSON.parse on the Dashboard.
Why:
Description:
When users try to sign up or log out in yorkie house, users get an error message from the popup.
But I'm not sure this repository is the right place to discuss this issue.
Why:
I think this error message is not suitable for upper cases and we need to separate different cases for authentication.
Description:
In PR #114, I think that I found a subtle misspelling.
I think previousProjectName
is more accurate spelling.
So it would better to remove 'e'.
Why:
Grammarly spelling ensures that code understanding is not impaired.
Description:
"npm run build:proto" makes error "protoc-gen-js: program not found or is not executable" with protoc version 3.21.1.
After downgrade protoc version to 3.19.4, "npm run build:proto" makes no error. (refer protocolbuffers/protobuf-javascript#105)
"npm run build" script in package.json
need to be changed for work with the latest version of protocol or read.me should tell me the appropriate protocol version.
Why:
Can work with the latest version of protocol buffer.
Description:
Store auth token in a cookie.
We implemented the login in #31 but we store the auth token in localStorage.
Since localStorage can be referenced by JavaScript, storing the token in a cookie is recommended.
Let's store the auth token in a cookie.
Why:
Description:
Implement basic layout and Introduce page router.
/documents
, /settings
/projects
page after implementing yorkie-team/yorkie#310references:
Why:
Description:
While using yorkie.Tree
, an error occurs only in the dashboard, not in the app, when trying to view document. The error message is left and right are not in the same list.
How to reproduce:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>There are currently <span id="peersCount"></span> peers!</div>
<button id="styleButton">styleByPath</button>
<!-- include yorkie js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/yorkie-js-sdk/0.4.4/yorkie-js-sdk.js"></script>
<script>
async function main() {
const client = new yorkie.Client('https://api.yorkie.dev', {
apiKey: '👉enter-your-key',
});
await client.activate();
client.subscribe((event) => {
if (event.type === 'peers-changed') {
const peers = client.getPeersByDocKey(doc.getKey());
document.querySelector('#peersCount').innerHTML = peers.length;
}
});
const doc = new yorkie.Document('sample-tree');
doc.update((root) => {
root.tree = new yorkie.Tree({
type: 'root',
children: [
{
type: 'comp1',
children: [
{
type: 'comp2',
children: [
{
type: 'comp3',
children: [
{
type: 'comp4',
children: [],
},
],
},
],
},
],
},
{
type: 'comp1',
children: [
{
type: 'comp3',
children: [
{
type: 'comp4',
children: [],
},
],
},
],
},
],
});
root.selection = {};
});
await client.attach(doc);
doc.update((root) => {
root.tree.editByPath([1, 0, 0, 0], [1, 0, 0, 0], { type: 'text', value: 'a' });
});
doc.update((root) => {
root.tree.editByPath([1], [1], {
type: 'comp1',
children: [
{ type: 'tableRow', children: [{ type: 'tableCell' }, { type: 'tableCell' }, { type: 'tableCell' }] },
{ type: 'tableRow', children: [{ type: 'tableCell' }, { type: 'tableCell' }, { type: 'tableCell' }] },
{ type: 'tableRow', children: [{ type: 'tableCell' }, { type: 'tableCell' }, { type: 'tableCell' }] },
],
});
});
document.querySelector('#styleButton').addEventListener('click', () => {
// 🚨 error occurs
doc.update((root) => {
root.tree.styleByPath([1], { bold: true });
});
});
}
main();
</script>
</body>
</html>
API key
in the code and open the browser.API key
of the project on Dashboard.tree.styleByPath
is executed, which results in an error on the dashboard.Probable Cause:
The issue occurs when retrieving documents in the dashboard using the admin API GetDocument
. During the handling of the GetDocument request on the server, the document is built using BuildDocumentForServerSeq
(go). However, in the app, the document is built using js-sdk. So, there seems to be a difference in behavior between Go and JS-SDK, leading to errors in the dashboard(Go) but not in the app(JS-SDK).
Environment:
v0.4.4
Description:
Show a success message when project info has been updated.
Why:
When updating project info, it is applied without any notice. It is difficult for the user to know if the update has been applied.
Description:
When displaying documents with special characters such as double quotes "
or new lines \n
within the Tree data type, an error occurs on the dashboard when viewing the document.
How to reproduce it (as minimally and precisely as possible):
apiKey
included.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>test</div>
<!-- include yorkie js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/yorkie-js-sdk/0.4.13/yorkie-js-sdk.js"></script>
<script>
globalThis.process = {
env: { },
};
async function main() {
const client = new yorkie.Client('https://api.yorkie.dev', {
apiKey: '', // enter your apiKey
});
await client.activate();
const doc = new yorkie.Document('docKey');
await client.attach(doc);
doc.update((root) => {
root.t = new yorkie.Tree({
type: 'doc',
children: [
{
type: 'p',
children: [{ type: 'text', value: 'hello"\n' }],
attributes: { bold: true },
},
],
});
});
}
main();
</script>
</body>
</html>
Description:
Implement pagination to ListDocuments.
In #3, we called ListDocuments API and then displayed a list of documents on the screen. We implemented ListDocuments API considering pagination, but we didn't implement the behavior in the front-end.
Let's fetch documents incrementally and then display them on the screen.
References
Why:
Description:
With the recent introduction of the ChangePassword
and DeleteAccount
RPCs in the server, it is now feasible to implement corresponding features in the dashboard to allow admins to perform these actions.
This issue is a follow-up to the issue of yorkie-team/yorkie#849
Why:
To provide administrators with the ability to manage their accounts more effectively and efficiently through the dashboard.
Description:
Implement the project list page and set it as the default page.
/projects
Why:
Description:
We need to add a query string in URLs.
URL parameters (query strings
) are elements inserted in URLs to help you filter and organize content or track information on the website.
The main use-case of the query string is filtering: specifically searching and pagination.
ex)
documents?pageIndex=2&pageSize=15
documents?limit=15&after_id=20
📎documents/search?q=keyword
documents?search=keyword
Why:
Users can easily find where they were and understand their location on a page.
Description:
Why:
Description:
Currently, users are unable to adjust the snapshot threshold in the project settings page. It would be beneficial to provide an option for users to edit the snapshot threshold in order to tailor it to their specific needs.
Why:
This feature would enhance the customization capabilities of the project.
Description:
When I generate a document by <script> tag, CORS issue occurs like this.
I used to create a document using <script> tag,
but since I used the same way in the latest version, the document was not generated.
I tried 3 different yorkie-js-sdk versions.
The Last two versions work fine.
It works differently depending on the version, so I think it might be an issue of yorkie-js-sdk, not of the dashboard, but I'll post it here for now. I would appreciate it if you let me know if I need to move.
Why:
To generate a document using the <script> tag
Description:
Implement logout.
We implemented the login in #23 but did not implement logout. When a user logs in, the authentication token is stored in localStorage as a value of token
.
Let's remove the token in localStorage and then redirect to the login page when clicking the logout button in the navigation bar.
Why:
Users can log out of Yorkie House.
Description:
Suggest to make svg (icon) to React component.
// Sidebar.tsx
<svg
className="w-6 h-6 transition duration-75"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
<path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
</svg>
export default function SettingIcon() {
return (
<svg>...</svg>
);
}
Why:
Can tell developer what svg looks like before build project!
Description:
Duplicate documents with the same key are shown on the Dashboard.
This issue seems to be reproducible when using the force option in Yorkie CLI to forcefully delete documents.
Description:
As time went by, I began to realize that this PR(#114) causes ‘documents’ managed by redux to be lost when refreshing browser.
This is because, when browser is refreshed, state of the history object has persistence, but redux cannot maintain its redux store.
Not only refreshing browser, but user also can request ~/projects/:projectName/documents/:documentKey
directly without clicking, so without fetching data inside useEffect was a problematic approach.
Maybe the attempt to solve issue with using ‘state’ of react-router was also bad approach from the beginning.
Why:
Description:
Even if there are more search results, only up to 15 are shown.
And it seems that the search feature doesn't support 'like' search.
Why:
Description:
The feature to delete documents has been implemented in yorkie-team/yorkie#484.
Let's provide a UI in the dashboard to delete documents.
Why: Users can delete document.
Description:
When running npm run dev
or npm run build
, a deprecation warning is displayed regarding the CJS build of Vite's Node API.
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Why:
The warning suggests switching from the CJS build to ESM.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.