Added Table Permission Modal in Table Card Menu

[vishaljoshi789]

Fixes #4070

Added Table Permission Modal in Table Card Menu

Technical details

Used fromTableCard prop to make the design even according to the TableCard Menu design.

Screenshots

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the develop branch of the repository
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no
  visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[seancolsen]

This kind of works, but is not clean enough for me to feel comfortable merging. Here's what needs to happen:

1. In TablePermissions.svelte

   • Rip out Button and ButtonMenuItem.
   • Do not instantiate a ModalController as const controller. Instead, use export let controller: ModalController to accept a modal controller as a prop.
   • Rename the component to TablePermissionsModal, to make it clearer that it is only a modal — nothing else.

2. In TableMode.svelte:

   • Instantiate a modal controller called permissionModal.
   • Change <TablePermissions {table}/> to be the button which activates the modal. On click, the button should use the controller to activate the modal.
   • At the end of the component (not inside any other <div>), put <TablePermissionsModal> and pass the controller to it.

3. Do a similar thing in TableCard.svelte:

   • Instantiate a modal controller so that the modal state lives inside the table card, not the dropdown menu.
   • Follow steps similar to above.
   • In the dropdown menu, use a ButtonMenuItem.
   • Set closeOnInnerClick back to true.

[seancolsen]

Oh also, @vishaljoshi789, for future PRs, please don't put # characters in your branch names. It's nice that you included the issue number. But funny characters can mess up other tooling. I had to rename this branch and the one from your other PR before I was able to review it using my typical workflow (gh, + VS Code with GitHub PRs extension). It's best to keep your branch names to only letters, numbers, underscores, and dashes.

[vishaljoshi789]

Oh also, @vishaljoshi789, for future PRs, please don't put # characters in your branch names. It's nice that you included the issue number. But funny characters can mess up other tooling. I had to rename this branch and the one from your other PR before I was able to review it using my typical workflow (gh, + VS Code with GitHub PRs extension). It's best to keep your branch names to only letters, numbers, underscores, and dashes.

Alright @seancolsen I will follow this from next PRs. For this issue do I have to create a new branch or can I continue working on the same branch.

[seancolsen]

For this issue do I have to create a new branch or can I continue working on the same branch.

You can continue on the same branch.

[vishaljoshi789]

@seancolsen can you please guide me how can I pass these checks.

[seancolsen]

@vishaljoshi789

1. You have a type import error that I'm not sure is auto-fixable

   error Import "ModalController" is only used as types @typescript-eslint/consistent-type-imports

   You'll need to add the type keyword and change that code to:

   import { ImmutableMap, type ModalController } from '@mathesar-component-library';

2. You should be able to auto-fix the rest of the linting errors by running:

   docker exec -it -w /code/mathesar_ui mathesar_service_dev npx eslint --fix .
   

   You can read more about our linting is set up.

3. Finally, fix the formatting. We use Prettier to automatically format code. You can read more in our docs about using it. Personally, I have VS Code configured to format on save which I love. The quickest way to fix the failing check is to run the following command and commit the changes it makes:

   docker exec -it -w /code/mathesar_ui mathesar_service_dev npx prettier --write .
   

[vishaljoshi789]

Thanks for the help all checks have been passed.

[seancolsen]

Thanks I'll re-review this soon. Might not be today though.