Admin App: Switch to MUI #135

amiraliemami · 2024-03-20T19:31:07Z

Reviewer: @lickem22
Estimate: 30mins

Ticket

Fixes: 422

Description, Motivation and Context

Goal

Merge the MUI refactor feature into main.

Changes

How has this been tested?

Follow local dev setup from docs and test the front-end
Follow the local docker-compose deployment docs and test the front-end

To-do before merge

Merge Replace old admin app with new MUI admin app #136 into feature-mui-admin
rebase with main (if there are any updates).

To do

Add post to Updates section announcing the switch over!

Checklist

Fill with x for completed. Delete any lines that are not relevant

My code follows the style guidelines of this project
I have reviewed my own code to ensure good quality
I have tested the functionality of my code to ensure it works as intended
I have resolved merge conflicts
I have updated the requirements (if applicable)

Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors

* sort results by content_id * Auth and access level * fixes from review

* MUI content pages (#130) Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors * address leftover PR#130 comments * remove unnecessary spacing on cards * Make page buttons circular and smaller * cleanup imports * add max count to title input * Revert text box identifiers to reflect wireframe * Cleanup text boxes in Edit * add date back to cards to reflect wireframe * date to 12hr format * add space to bottom of page * reduce cardgrid density * change all instances of content_id to number (some where string) * improve delete button and modal * use the Content type in main grid * Add skeleton of search bar * Implement search functionality! * remove unnecessary wrapper * Move SearchBar and PageNavigation to components * Move sx parameters out of SearchBar component * Make CardsGrid backdrop persist even without cards on it * Convert Box to FlexBox and revert to 4-columns of cards on large screens * NavBar: add homepage link to AAQ logo * NavBar: enable links (but disable inactive pages) * NavBar: Make logo and user icon smaller * Set max cards back to 12 * Use content_id as key instead of index in Grid component * PR feedback fixes * cleanup imports * Simplify editAccess check boolean (use !editAccess) * Widen gap between date and buttons on cards --------- Co-authored-by: Sid Ravinutala <[email protected]>

* temp - remove old `src` * temp - replace/remove files * move logo png to inside admin app * Add condition for catching missing content_id

…t 424 for details.

admin_app/src/app/content/edit/page.tsx

lickem22

Looks good, thanks Amir.

sidravi1

Exciting to see this going in!
Nice work @amiraliemami - that was some serious hustling.

sidravi1 · 2024-03-21T17:51:37Z

admin_app/package.json

    "eslint": "^8",
-    "eslint-config-next": "13.5.4",
-    "postcss": "^8",
-    "prettier": "^3.0.3",


Where did prettier go?
We probably need it right?

Not sure, maybe something went wrong with my rebase? Please add it back if you can

sidravi1 · 2024-03-21T17:52:29Z

deployment/docker-compose/docker-compose.yml

@@ -26,6 +30,10 @@ services:
    restart: always
    env_file:
      - .env
+    develop:


sidravi1 · 2024-03-21T17:54:41Z

admin_app/tsconfig.json

    "esModuleInterop": true,
    "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",


I don't understand all the implications of this. Do you guys?

I don't either

sidravi1 · 2024-03-21T18:14:55Z

admin_app/next.config.mjs

+/* @type {import('next').NextConfig} */
+const nextConfig = {
+  experimental: {
+    missingSuspenseWithCSRBailout: false,


I somehow missed this in previous PRs. Why are we doing this? And is it possible to fix the root issue?

https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

No this one is new, the error only comes up when you try to build (e.g. docker compose deployment). I've added a ticket to backlog. I didnt have enough time to implement a genuine fix.

* MUI content pages (#130) Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors * Mui admin app auth (#134) * sort results by content_id * Auth and access level * fixes from review * HOTFIX: Layout import missing from "ProtectedComponent.tsx" * MUI improvements + search bar + navbar activation (#131) * MUI content pages (#130) Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors * address leftover PR#130 comments * remove unnecessary spacing on cards * Make page buttons circular and smaller * cleanup imports * add max count to title input * Revert text box identifiers to reflect wireframe * Cleanup text boxes in Edit * add date back to cards to reflect wireframe * date to 12hr format * add space to bottom of page * reduce cardgrid density * change all instances of content_id to number (some where string) * improve delete button and modal * use the Content type in main grid * Add skeleton of search bar * Implement search functionality! * remove unnecessary wrapper * Move SearchBar and PageNavigation to components * Move sx parameters out of SearchBar component * Make CardsGrid backdrop persist even without cards on it * Convert Box to FlexBox and revert to 4-columns of cards on large screens * NavBar: add homepage link to AAQ logo * NavBar: enable links (but disable inactive pages) * NavBar: Make logo and user icon smaller * Set max cards back to 12 * Use content_id as key instead of index in Grid component * PR feedback fixes * cleanup imports * Simplify editAccess check boolean (use !editAccess) * Widen gap between date and buttons on cards --------- Co-authored-by: Sid Ravinutala <[email protected]> * Replace old admin app with new MUI admin app (#136) * temp - remove old `src` * temp - replace/remove files * move logo png to inside admin app * Add condition for catching missing content_id * TEMP FIX: Disable missingSuspenseWithCSRBailout error. See Jira ticket 424 for details. --------- Co-authored-by: Sid Ravinutala <[email protected]>

amiraliemami changed the title ~~Admin App: Switch to MUI~~ Admin App: Switch main to MUI Mar 21, 2024

amiraliemami requested a review from lickem22 March 21, 2024 09:42

sidravi1 and others added 5 commits March 21, 2024 15:14

MUI content pages (#130)

2a798a9

Basic content grid Alerts and Snackbars Fixed warnings and errors in console Better modals Better validation errors

Mui admin app auth (#134)

ab95963

* sort results by content_id * Auth and access level * fixes from review

HOTFIX: Layout import missing from "ProtectedComponent.tsx"

30f363b

Replace old admin app with new MUI admin app (#136)

b35f986

* temp - remove old `src` * temp - replace/remove files * move logo png to inside admin app * Add condition for catching missing content_id

amiraliemami force-pushed the feature-mui-admin branch from 3a4ea1a to b35f986 Compare March 21, 2024 09:44

TEMP FIX: Disable missingSuspenseWithCSRBailout error. See Jira ticke…

1db4040

…t 424 for details.

amiraliemami marked this pull request as ready for review March 21, 2024 09:55

amiraliemami changed the title ~~Admin App: Switch main to MUI~~ Admin App: Switch to MUI Mar 21, 2024

lickem22 reviewed Mar 21, 2024

View reviewed changes

admin_app/src/app/content/edit/page.tsx Show resolved Hide resolved

amiraliemami requested a review from lickem22 March 21, 2024 11:55

lickem22 approved these changes Mar 21, 2024

View reviewed changes

sidravi1 reviewed Mar 21, 2024

View reviewed changes

lickem22 merged commit f649806 into main Mar 22, 2024
1 check passed

amiraliemami deleted the feature-mui-admin branch March 26, 2024 09:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Admin App: Switch to MUI #135

Admin App: Switch to MUI #135

amiraliemami commented Mar 20, 2024 •

edited

Loading

lickem22 left a comment

sidravi1 left a comment

sidravi1 Mar 21, 2024

amiraliemami Mar 21, 2024

sidravi1 Mar 21, 2024

sidravi1 Mar 21, 2024

amiraliemami Mar 21, 2024

sidravi1 Mar 21, 2024

amiraliemami Mar 21, 2024 •

edited

Loading

Admin App: Switch to MUI #135

Admin App: Switch to MUI #135

Conversation

amiraliemami commented Mar 20, 2024 • edited Loading

Ticket

Description, Motivation and Context

Goal

Changes

How has this been tested?

To-do before merge

To do

Checklist

lickem22 left a comment

Choose a reason for hiding this comment

sidravi1 left a comment

Choose a reason for hiding this comment

sidravi1 Mar 21, 2024

Choose a reason for hiding this comment

amiraliemami Mar 21, 2024

Choose a reason for hiding this comment

sidravi1 Mar 21, 2024

Choose a reason for hiding this comment

sidravi1 Mar 21, 2024

Choose a reason for hiding this comment

amiraliemami Mar 21, 2024

Choose a reason for hiding this comment

sidravi1 Mar 21, 2024

Choose a reason for hiding this comment

amiraliemami Mar 21, 2024 • edited Loading

Choose a reason for hiding this comment

amiraliemami commented Mar 20, 2024 •

edited

Loading

amiraliemami Mar 21, 2024 •

edited

Loading