yorkie-team / dashboard Goto Github PK

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.

ex)

Why:

This feature would enhance the customization capabilities of the project.

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.

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:

Duplicate documents with the same key are shown on the Dashboard.

1. Create a document and remove it with Yorkie CLI.
2. Add another document with the same key.
3. View the Dashboard where the documents are displayed.
4. Note the duplication of documents with the same key.

This issue seems to be reproducible when using the force option in Yorkie CLI to forcefully delete documents.

• https://yorkie.dev/docs/cli#removing-a-document
• yorkie-team/yorkie#758

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:

Server: https://github.com/yorkie-team/yorkie/blob/525cacf2747f53187e41fd495e41f1b26e0a5d4e/server/rpc/admin_server.go#L209-L233

Why:

Description:
Current document preview page directly shows the raw content in a document like below:

The content should be provided in a more readable form. For example, Text type can be showed as a styled text.

Why:
Current document preview format is too hard for human to read.

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

• https://stackoverflow.com/questions/3799193/mysql-data-best-way-to-implement-paging

Why:

• Reduce the load when Yorkie has a lot of documents.

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:

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:
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:

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:

Implement basic layout and Introduce page router.

• Add a sidebar to the left side of the screen
  • Pages: /documents, /settings
  • Let's add /projects page after implementing yorkie-team/yorkie#310
• Move the page when the user clicks on an item in the sidebar

references:

• https://flowbite.com/docs/components/sidebar/
• https://reactrouter.com/docs/en/v6/getting-started/installation

Why:

• Users can separate and manage multiple resources on each page in the service.

Description:

• Add exception handling when project name contains characters not allowed(Capital letters, Korean, ...)
  • Alert when create project with capital letters or display project naming rule

Why:

• No notification when project name does not comply with rules

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:

Implement the project list page and set it as the default page.

• Page: /projects

Why:

• Users can manage projects.

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:

"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:

In PR #114, I think that I found a subtle misspelling.

DocumentList.tsx

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:

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:
We show the total number of search results in the document search.
We should also show the total count of documents on the document list page.

as-is	to-be

Why:

The user can recognize how many documents there are.

Description:

Implement time format preference

• User settings page

• The time should be displayed in the format set by the user in the settings

Why:

Users can select a time format preference.

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>

1. Update the API key in the code and open the browser.
   (You can get the API key of the project on Dashboard.
2. Before clicking the button, the document displays correctly on the dashboard.
3. When clicking the button, the 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:

• Yorkie JS SDK version: v0.4.4

Description:
If the document has only been created, the last-updated time does not appear correctly. When creating a document, the last-updated time should be initialized to the time the document was created.

Why:
To provide the user with accurate information about the document.

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.

• On the document detail page:
  
• On the document list page:
  

Why: Users can delete document.

Description:

Implement document detail page.

The document detail page is shown when the user selects a document from the document list page.

• document list page: /documents
• document detail page: /documents/{document ID or Key}

Why:

• The user can access the document again using the URL of a specific document.

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:

• LocalStorage/SessionStorage is vulnerable to XXS attacks.

Description:

cannot update other fields unless you change the project name.

Why:

The same project name is being validated in the backend.

Description:

Show the tooltip when the user moves the mouse over the slider marker.
Tooltips are helpful to show additional information like actor, message, and time.

as-is

Wordpress Revision UI

Why:

The users can get information about histories when they move the mouse pointer over the slider.

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:

If you go back after refreshing the login page, you will see an error window.

Why:

• open house.yorkie.dev
• move house.yorkie.dev/login
• refresh
• back history
• error window

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.

0.3.4

0.3.3

0.3.1

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:

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)

• document list
  • documents?pageIndex=2&pageSize=15
  • documents?limit=15&after_id=20 📎
• document search :
  • documents/search?q=keyword
  • documents?search=keyword

Why:

Users can easily find where they were and understand their location on a page.

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):

1. Run the provided HTML code with your apiKey included.
2. View the document on the dashboard.

<!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:
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:
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.

moment docs
You-Dont-Need-Momentjs