feat(dashboard): env change logic and routes #6632

LetItRock · 2024-10-04T17:02:24Z

What changed? Why was the change needed?

Switch environments logic and env-based URL routing.

Screenshots

Screen.Recording.2024-10-04.at.18.59.35.mov

Screen.Recording.2024-10-04.at.18.58.42.mov

Screen.Recording.2024-10-04.at.18.57.22.mov

Screen.Recording.2024-10-07.at.12.29.14.mov

Screen.Recording.2024-10-07.at.12.48.36.mov

linear · 2024-10-04T17:02:27Z

NV-4348 Implement environment change logic and url handling

LetItRock · 2024-10-04T17:03:04Z

apps/dashboard/src/components/side-navigation/constants.ts

-    ],
-  },
-];
+export const buildNavigationItems = ({


we need to dynamically build nav items because the workflows link depends on the current environment

LetItRock · 2024-10-04T17:05:49Z

apps/dashboard/src/context/environment/environment-provider.tsx

+      if (
+        (pathname === ROUTES.ROOT || pathname === ROUTES.ENV || pathname === `${ROUTES.ENV}/`) &&
+        selectedEnvironment
+      ) {
+        navigate(buildRoute(ROUTES.WORKFLOWS, { environmentId: selectedEnvironment._id }));
+        return;
+      } else if (pathname.includes(ROUTES.ENV) && selectedEnvironment) {
+        const newPath = pathname.replace(/\/env\/[^/]+(\/|$)/, `${ROUTES.ENV}/${selectedEnvironment._id}$1`);
+        navigate(newPath);
+        return;
+      }
+
+      navigate(pathname, { replace: true });


the navigation logic based on the current pathname handles the cases when the route is:

/

/env

/env/

/env/:environmentId

/env/:environmentId/

/env/:environmentId/workflows

/env/:environmentId/anything

For the cases when the environmentId is present in the URL, it will replace it with the new environment id

LetItRock · 2024-10-04T17:07:31Z

apps/dashboard/src/context/environment/environment-provider.tsx

+  useLayoutEffect(() => {
+    if (!environments) {
+      return;
+    }
+
+    const selectedEnvironment = selectEnvironment(environments, getEnvironmentId());
+    switchEnvironmentInternal(environments, selectedEnvironment?._id);
+  }, [environments, switchEnvironmentInternal]);


when the environment is loaded, or when the component is mounted and we have environments in the query cache --> set the current environment and redirect the user

LetItRock · 2024-10-04T17:08:23Z

apps/dashboard/src/utils/routes.ts

+export const buildRoute = (route: string, params: Record<string, string>) => {
+  return Object.entries(params).reduce((acc, [key, value]) => {
+    return acc.replace(`:${key}`, value);
+  }, route);


the helper to build the params based urls like: /env/:environmentId/workflows

netlify · 2024-10-04T17:37:35Z

✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!

Name	Link
🔨 Latest commit	`284d51c`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-stg-vite-dashboard-poc/deploys/6705593678e76600087b9ccc
😎 Deploy Preview	https://deploy-preview-6632--novu-stg-vite-dashboard-poc.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

apps/dashboard/src/context/environment/environment-provider.tsx

LetItRock · 2024-10-04T19:30:36Z

apps/dashboard/src/context/environment/environment-provider.tsx

+        return;
+      }
+
+      navigate(pathname, { replace: true });


TODO: probably the last navigate is not needed

LetItRock · 2024-10-07T10:52:04Z

apps/dashboard/src/context/environment/environment-provider.tsx

+      const selectedEnvironment = selectEnvironment(allEnvironments, environmentId);
+      setCurrentEnvironment(selectedEnvironment);


select the env based on the URL:

if there is no env ID in the URL it will default to the development environment

otherwise, it will select related env

LetItRock · 2024-10-07T10:52:53Z

apps/dashboard/src/context/environment/environment-provider.tsx

+      if (pathname === ROUTES.ROOT || pathname === ROUTES.ENV || pathname === `${ROUTES.ENV}/`) {
+        navigate(buildRoute(ROUTES.WORKFLOWS, { environmentId: newEnvironmentId }));


if URL is: / or /env or /env/ then redirect to the /env/:environmentId/workflows

apps/dashboard/src/context/environment/environment-provider.tsx

SokratisVidros · 2024-10-07T12:35:41Z

apps/dashboard/src/components/side-navigation/constants.ts

+export const buildNavigationItems = ({
+  currentEnvironment,
+}: {
+  currentEnvironment?: IEnvironment | null;


Null shouldn't be allowed as a type. This method must be called only when the env is set. This will also simplify all the checks in the method.

To ensure that, we can do exactly what we did in the current web app, introduce a Guard component that doesn't allow rendering of the layout until Clerk + Env are resolved.

@SokratisVidros, IMO, it creates a bad UX, especially since it will wait for two requests to complete. It would be better to render some loading indicator/skeleton or smth; I mentioned this here: https://novu.slack.com/archives/C07HVLG7G2U/p1728060743365279

I agree 100% with the need for a splash/loading screen. That's exactly what the guard does in web. We "server-side" render the loader via the public.html and then it is removed only when env is resolved. If not mistaken we are saying the same thing. See here

If not mistaken we are saying the same thing

Not really, what I'm saying is to render the application shell while environments are loading: header, side nav, and in the main content, show the loading indicator. We can think about how it should look design-wise. I want to avoid empty screens, loading, blinking, etc., we can do better.

I am aligned with that. The key is not to make the app interactive until Clerk + Env is loaded.

The UX about the environment is different from allowing the null type. I still suggest to remove the null bit and prevent /env/undefined route generation.

@SokratisVidros, we will solve it with UI state for the side nav while the env's are loading. Otherwise, I have to do the if statement and return nothing, so there will be a blinking experience

apps/dashboard/src/context/environment/environment-provider.tsx

LetItRock · 2024-10-07T11:04:15Z

apps/dashboard/src/context/environment/environment-provider.tsx

@@ -35,18 +32,51 @@ function selectEnvironment(environments?: IEnvironment[], selectedEnvironmentId?

 export function EnvironmentProvider({ children }: { children: React.ReactNode }) {
  const { currentOrganization } = useAuth();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const { environmentId: paramsEnvironmentId } = useParams<{ environmentId?: string }>();


Info: we will update the environmentId later to slug-hash when it will be available

SokratisVidros · 2024-10-08T12:22:17Z

apps/dashboard/src/components/side-navigation/constants.ts

+export const buildNavigationItems = ({
+  currentEnvironment,
+}: {
+  currentEnvironment?: IEnvironment | null;


The UX about the environment is different from allowing the null type. I still suggest to remove the null bit and prevent /env/undefined route generation.

LetItRock added 7 commits October 3, 2024 13:49

feat(dashboard): side navigation

0ebfea3

chore(dashboard): renamed the organization dropdown

8316f59

chore(dashboard): free trial card

500f5cd

Merge branch 'next' into nv-4347-dashboard-free-trial-card

f198d1c

chore(dashboard): updated variable names

f859800

chore(dashboard): added suggestions from the pr #6612

db593ff

feat(dashboard): env change logic and routes

0a45481

LetItRock requested review from SokratisVidros and desiprisg October 4, 2024 17:02

LetItRock self-assigned this Oct 4, 2024

LetItRock temporarily deployed to Linting October 4, 2024 17:02 — with GitHub Actions Inactive

LetItRock commented Oct 4, 2024

View reviewed changes

Base automatically changed from nv-4347-dashboard-free-trial-card to next October 4, 2024 19:27

LetItRock changed the title ~~feat(dashboard): env change logic and routes~~ [WIP] feat(dashboard): env change logic and routes Oct 4, 2024

LetItRock commented Oct 4, 2024

View reviewed changes

apps/dashboard/src/context/environment/environment-provider.tsx Show resolved Hide resolved

LetItRock commented Oct 4, 2024

View reviewed changes

Merge branch 'next' into nv-4348-env-routes-handling

2ce160a

LetItRock temporarily deployed to Linting October 7, 2024 07:44 — with GitHub Actions Inactive

chore(dashboard): fixed ts issues

0d46db4

LetItRock temporarily deployed to Linting October 7, 2024 07:57 — with GitHub Actions Inactive

chore(dashboard): the env id in the url drives the env state

c20cdde

LetItRock temporarily deployed to Linting October 7, 2024 10:47 — with GitHub Actions Inactive

LetItRock changed the title ~~[WIP] feat(dashboard): env change logic and routes~~ feat(dashboard): env change logic and routes Oct 7, 2024

LetItRock commented Oct 7, 2024

View reviewed changes

SokratisVidros requested changes Oct 7, 2024

View reviewed changes

LetItRock commented Oct 7, 2024

View reviewed changes

Merge branch 'next' into nv-4348-env-routes-handling

c767d98

LetItRock temporarily deployed to Linting October 7, 2024 15:57 — with GitHub Actions Inactive

novuhq deleted a comment from LetItRock Oct 7, 2024

LetItRock requested a review from SokratisVidros October 8, 2024 08:20

SokratisVidros approved these changes Oct 8, 2024

View reviewed changes

chore(dashboard): suggestions from the pr #6632

284d51c

LetItRock temporarily deployed to Linting October 8, 2024 16:09 — with GitHub Actions Inactive

LetItRock merged commit 14c5c23 into next Oct 8, 2024
31 checks passed

LetItRock deleted the nv-4348-env-routes-handling branch October 8, 2024 21:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(dashboard): env change logic and routes #6632

feat(dashboard): env change logic and routes #6632

LetItRock commented Oct 4, 2024 •

edited

Loading

linear bot commented Oct 4, 2024

LetItRock Oct 4, 2024

LetItRock Oct 4, 2024

LetItRock Oct 4, 2024

LetItRock Oct 4, 2024

netlify bot commented Oct 4, 2024 •

edited

Loading

LetItRock Oct 4, 2024 •

edited

Loading

LetItRock Oct 7, 2024

LetItRock Oct 7, 2024

SokratisVidros Oct 7, 2024

SokratisVidros Oct 7, 2024

LetItRock Oct 7, 2024

SokratisVidros Oct 7, 2024 •

edited

Loading

LetItRock Oct 8, 2024 •

edited

Loading

SokratisVidros Oct 8, 2024

SokratisVidros Oct 8, 2024

LetItRock Oct 8, 2024

LetItRock Oct 7, 2024

SokratisVidros Oct 8, 2024

		const selectedEnvironment = selectEnvironment(allEnvironments, environmentId);
		setCurrentEnvironment(selectedEnvironment);

		if (pathname === ROUTES.ROOT \|\| pathname === ROUTES.ENV \|\| pathname === `${ROUTES.ENV}/`) {
		navigate(buildRoute(ROUTES.WORKFLOWS, { environmentId: newEnvironmentId }));

feat(dashboard): env change logic and routes #6632

feat(dashboard): env change logic and routes #6632

Conversation

LetItRock commented Oct 4, 2024 • edited Loading

What changed? Why was the change needed?

Screenshots

linear bot commented Oct 4, 2024

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

netlify bot commented Oct 4, 2024 • edited Loading

✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!

LetItRock Oct 4, 2024 • 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

Choose a reason for hiding this comment

SokratisVidros Oct 7, 2024 • edited Loading

Choose a reason for hiding this comment

LetItRock Oct 8, 2024 • 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

Choose a reason for hiding this comment

LetItRock commented Oct 4, 2024 •

edited

Loading

netlify bot commented Oct 4, 2024 •

edited

Loading

LetItRock Oct 4, 2024 •

edited

Loading

SokratisVidros Oct 7, 2024 •

edited

Loading

LetItRock Oct 8, 2024 •

edited

Loading