[provider ui] initiate move to dark "mode" #13390

leecalcote · 2025-01-28T19:28:54Z

Signed-off-by: Lee Calcote [email protected]

This PR initiates a dark "mode" version of the provider UI, which modernizes the UI and starts users off in what is the default mode inside of measure UI anyway: dark mode.

Notes for reviewers:

HELP WANTED: This PR is incomplete and is in need of assistance from anyone who's willing. The there are just a few other Font and component colors to change so that the right contrast is in place for this new dark colored theme.

Signed-off-by: Lee Calcote <[email protected]>

github-actions · 2025-01-28T19:32:20Z

View in catalog, Edit in playground or learn how to interpret Meshery Designs

leecalcote · 2025-01-29T15:51:51Z

@FaheemOnHub will you kindly take over this PR and finish it off?

Signed-off-by: TheFaheem <[email protected]>

…o leecalcote/provider-color/fix

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

sudhanshutech · 2025-02-12T14:57:40Z

@FaheemOnHub i have complete your pr here itself and added fix which was needed. // @amitamrutiya
Will you guys take a look and review. If something needed to fix directly push here now.

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

amitamrutiya · 2025-02-13T04:39:40Z

provider-ui/package.json

    "isomorphic-unfetch": "^4.0.2",
+    "mui-datatables": "^4.3.0",
    "next": "^13.5.4",


is there any need of adding mui-datatables library @FaheemOnHub

basically when i added @layer5/sistent package , it started giving error and told to install mui-database package

its peer dependency inside sistent that's why i guess it needed to install.

amitamrutiya · 2025-02-13T04:40:20Z

provider-ui/components/SistentWrapper.js

+import React from "react";
+import { useTheme } from "@mui/material/styles";
+import { SistentThemeProviderWithoutBaseLine } from "@layer5/sistent";
+
+export const UsesSistent = ({ children }) => {
+  const theme = useTheme();
+  const mode = theme.palette.type;
+  if (mode === "dark") {
+    return (
+      <SistentThemeProviderWithoutBaseLine initialMode={mode}>
+        {children}
+      </SistentThemeProviderWithoutBaseLine>
+    );
+  }
+  return (
+    <SistentThemeProviderWithoutBaseLine initialMode={mode}>
+      {children}
+    </SistentThemeProviderWithoutBaseLine>
+  );
+};


We don't need this wrap the root component with the SistentThemeProvider only

Ohh you already did, remove this file

amitamrutiya · 2025-02-17T04:22:28Z

merge conflict.

amitamrutiya · 2025-02-17T09:06:56Z

provider-ui/package.json

    "@mui/icons-material": "^5.15.16",
    "@mui/material": "^5.15.11",


@FaheemOnHub try if you we are able to remove @mui/material library from the provider UI. use only @layer5/sistent instead of the mui/material

what about NoSsr and ClickAwayListener

Okay no problem then

FaheemOnHub · 2025-02-17T15:45:10Z

merge conflict.
not able to see conflict

Signed-off-by: Amit Amrutiya <[email protected]>

amitamrutiya · 2025-02-18T05:07:53Z

I resolved the merge conflict @FaheemOnHub. I added new component like nossr to sistent and made a sistent release. Now you are able to get all of the component from the sistent. so remove @mui/material and @mui/icons-material library completely and try to remove the emotion library as well if possible.

FaheemOnHub · 2025-02-18T16:35:25Z

@amitamrutiya import {ArrowDropDownIcon} from "@layer5/sistent" not present

amitamrutiya · 2025-02-18T16:39:06Z

use this icon @FaheemOnHub https://github.com/layer5io/sistent/blob/32f988ec6ff84df667a1794713858879efaf69f8/src/icons/DropDownIcon/DropDownIcon.tsx

Signed-off-by: TheFaheem <[email protected]>

…-color/fix

amitamrutiya · 2025-02-18T18:32:09Z

lint is failing @FaheemOnHub.

FaheemOnHub · 2025-02-18T18:40:54Z

lint is failing @FaheemOnHub.

but in my pr , lint is fine. ?

[provider ui] initiate move to dark "mode"

github-actions · 2025-02-19T10:58:31Z

END-TO-END TESTS

Testing started at: February 19th 2025, 10:50:04 am

📦 Test Result Summary

✅ 29 passed
❌ 1 failed
⚠️ 5 flaked
⏩ 0 skipped

⌛ Duration: 8 minutes and 7 seconds

Overall Result: 👎 Some tests failed.

[Show/Hide] Test Result Details

Test	Browser	Test Case	Tags	Result
1	chromium-meshery-provider	Verify that UI components are displayed		❌
2	chromium-meshery-provider	Add a cluster connection by uploading kubeconfig file	unstable	⚠️
3	chromium-meshery-provider	Transition to disconnected state and then back to connected state	unstable	⚠️
4	chromium-meshery-provider	Transition to ignored state and then back to connected state	unstable	⚠️
5	chromium-meshery-provider	Transition to not found state and then back to connected state	unstable	⚠️
6	chromium-meshery-provider	Delete Kubernetes cluster connections	unstable	⚠️
7	chromium-meshery-provider	Compare test of a performance profile with load generator "fortio" and service mesh "None"	unstable	⚠️
8	chromium-meshery-provider	Delete a performance profile with load generator "fortio" and service mesh "None"	unstable	⚠️
9	chromium-local-provider	Add a cluster connection by uploading kubeconfig file	unstable	⚠️
10	chromium-local-provider	Transition to disconnected state and then back to connected state	unstable	⚠️
11	chromium-local-provider	Transition to ignored state and then back to connected state	unstable	⚠️
12	chromium-local-provider	Transition to not found state and then back to connected state	unstable	⚠️
13	chromium-local-provider	Delete Kubernetes cluster connections	unstable	⚠️
14	chromium-local-provider	Compare test of a performance profile with load generator "fortio" and service mesh "None"	unstable	⚠️
15	chromium-local-provider	Delete a performance profile with load generator "fortio" and service mesh "None"	unstable	⚠️

initiate move to dark "mode" provider ui

be56017

Signed-off-by: Lee Calcote <[email protected]>

github-actions bot added the component/ui User Interface label Jan 28, 2025

leecalcote added the pr/draft WIP/Draft pull request label Jan 28, 2025

leecalcote changed the title ~~initiate move to dark "mode" provider ui~~ [provider ui] initiate move to dark "mode" Jan 28, 2025

leecalcote temporarily deployed to staging-playground January 28, 2025 19:34 — with GitHub Actions Inactive

leecalcote requested a review from FaheemOnHub January 29, 2025 15:51

leecalcote assigned FaheemOnHub Jan 29, 2025

added remaining colors

7406a9b

Signed-off-by: TheFaheem <[email protected]>

FaheemOnHub mentioned this pull request Feb 1, 2025

Integrate Sistent Theme to Provider UI , Migrate Colors, & Set Dark Mode as Default #13444

Merged

1 task

FaheemOnHub and others added 3 commits February 5, 2025 14:40

Migrate Provider UI to Sistent Theme & Standardize Colors

2a5c14a

Signed-off-by: TheFaheem <[email protected]>

Merge branch 'master' of https://github.com/sudhanshutech/meshery int…

e65cf87

…o leecalcote/provider-color/fix

remove theme file and fix theme references

b02560a

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

sudhanshutech temporarily deployed to staging-playground February 12, 2025 14:46 — with GitHub Actions Inactive

move to dark mode fix

a3dd904

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

fix eslint

808b6f3

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

sudhanshutech temporarily deployed to staging-playground February 12, 2025 15:06 — with GitHub Actions Inactive

add some dark mode references

82c87a1

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

sudhanshutech requested a review from amitamrutiya February 12, 2025 15:32

fix lint issue in provider

2b1dbb3

Signed-off-by: Sudhanshu Dasgupta <[email protected]>

sudhanshutech temporarily deployed to staging-playground February 12, 2025 15:41 — with GitHub Actions Inactive

amitamrutiya requested changes Feb 13, 2025

View reviewed changes

amitamrutiya requested changes Feb 17, 2025

View reviewed changes

Merge branch 'master' into leecalcote/provider-color/fix

cee0e31

Signed-off-by: Amit Amrutiya <[email protected]>

amitamrutiya temporarily deployed to staging-playground February 18, 2025 05:05 — with GitHub Actions Inactive

removed mui/material and mui/icons

5f073ea

Signed-off-by: TheFaheem <[email protected]>

FaheemOnHub mentioned this pull request Feb 18, 2025

[provider ui] initiate move to dark "mode" #13651

Merged

1 task

FaheemOnHub and others added 3 commits February 18, 2025 23:31

eslint fix

2fc4be0

Signed-off-by: TheFaheem <[email protected]>

Merge branch 'master' into leecalcote/provider-color/fix

40cf44f

Merge branch 'leecalcote/provider-color/fix' into leecalcote/provider…

4dd8a2e

…-color/fix

amitamrutiya temporarily deployed to staging-playground February 18, 2025 18:33 — with GitHub Actions Inactive

Merge pull request #13651 from FaheemOnHub/leecalcote/provider-color/fix

4fbc43a

[provider ui] initiate move to dark "mode"

amitamrutiya temporarily deployed to staging-playground February 18, 2025 18:55 — with GitHub Actions Inactive

amitamrutiya approved these changes Feb 19, 2025

View reviewed changes

Merge branch 'master' into leecalcote/provider-color/fix

fd9df9e

amitamrutiya merged commit d6f3a2f into master Feb 19, 2025
9 checks passed

amitamrutiya deleted the leecalcote/provider-color/fix branch February 19, 2025 10:37

amitamrutiya temporarily deployed to staging-playground February 19, 2025 10:42 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[provider ui] initiate move to dark "mode" #13390

[provider ui] initiate move to dark "mode" #13390

leecalcote commented Jan 28, 2025 •

edited

Loading

github-actions bot commented Jan 28, 2025 •

edited

Loading

leecalcote commented Jan 29, 2025

sudhanshutech commented Feb 12, 2025 •

edited

Loading

amitamrutiya Feb 13, 2025

FaheemOnHub Feb 13, 2025

sudhanshutech Feb 13, 2025

amitamrutiya Feb 13, 2025

amitamrutiya Feb 13, 2025

amitamrutiya commented Feb 17, 2025

amitamrutiya Feb 17, 2025

FaheemOnHub Feb 17, 2025

amitamrutiya Feb 17, 2025

FaheemOnHub commented Feb 17, 2025

amitamrutiya commented Feb 18, 2025

FaheemOnHub commented Feb 18, 2025

amitamrutiya commented Feb 18, 2025 •

edited

Loading

amitamrutiya commented Feb 18, 2025

FaheemOnHub commented Feb 18, 2025

github-actions bot commented Feb 19, 2025

		"@mui/icons-material": "^5.15.16",
		"@mui/material": "^5.15.11",

[provider ui] initiate move to dark "mode" #13390

[provider ui] initiate move to dark "mode" #13390

Conversation

leecalcote commented Jan 28, 2025 • edited Loading

github-actions bot commented Jan 28, 2025 • edited Loading

leecalcote commented Jan 29, 2025

sudhanshutech commented Feb 12, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amitamrutiya commented Feb 17, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FaheemOnHub commented Feb 17, 2025

amitamrutiya commented Feb 18, 2025

FaheemOnHub commented Feb 18, 2025

amitamrutiya commented Feb 18, 2025 • edited Loading

amitamrutiya commented Feb 18, 2025

FaheemOnHub commented Feb 18, 2025

github-actions bot commented Feb 19, 2025

END-TO-END TESTS

leecalcote commented Jan 28, 2025 •

edited

Loading

github-actions bot commented Jan 28, 2025 •

edited

Loading

sudhanshutech commented Feb 12, 2025 •

edited

Loading

amitamrutiya commented Feb 18, 2025 •

edited

Loading