fix(dashboard): Tab menu visible for urls trailing '/'

components/dashboard/src/Menu.tsx

@@ -25,7 +25,7 @@ import { getProjectSettingsMenu } from "./projects/ProjectSettings";
 import { ProjectContext } from "./projects/project-context";
 import { PaymentContext } from "./payment-context";
 import FeedbackFormModal from "./feedback-form/FeedbackModal";
-import { isGitpodIo } from "./utils";
+import { inResource, isGitpodIo } from "./utils";
 import { getExperimentsClient } from "./experiments/client";
 
 interface Entry {
@@ -105,9 +105,9 @@ export default function Menu() {
     }
 
     // Hide most of the top menu when in a full-page form.
-    const isMinimalUI = ["/new", "/teams/new", "/open"].includes(location.pathname);
-    const isWorkspacesUI = ["/workspaces"].includes(location.pathname);
-    const isAdminUI = window.location.pathname.startsWith("/admin");
+    const isMinimalUI = inResource(location.pathname, ["new", "teams/new", "open"]);
+    const isWorkspacesUI = inResource(location.pathname, ["workspaces"]);
+    const isAdminUI = inResource(window.location.pathname, ["admin"]);
 
     const [teamMembers, setTeamMembers] = useState<Record<string, TeamMemberInfo[]>>({});
     useEffect(() => {

components/dashboard/src/utils.test.ts

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { inResource } from "./utils";
+
+test("inResource", () => {
+
+    // Given root path is a part of resources specified
+    expect(inResource("/app", ["new", "app", "teams"])).toBe(true);
+
+    // Given path is a part of resources specified
+    expect(inResource("/app/testing", ["new", "app", "teams"])).toBe(true);
+
+    // Empty resources
+    expect(inResource("/just/a/path", [])).toBe(false);
+
+    // Both resources starting with '/'
+    expect(inResource("/app", ["/app"])).toBe(true);
+
+    // Both resources ending with '/'
+    expect(inResource("app/", ["app/"])).toBe(true);
+
+    // Both resources containing path with subdirectories
+    expect(inResource("/admin/teams/someTeam/somePerson", ["/admin/teams"])).toBe(true);
+
+});

components/dashboard/src/utils.ts

@@ -57,3 +57,21 @@ export function isGitpodIo() {
         window.location.hostname.endsWith("gitpod-io-dev.com")
     );
 }
+
+function trimResource(resource: string): string {
+    return resource.split('/').filter(Boolean).join('/');
+}
+
+// Returns 'true' if a 'pathname' is a part of 'resources' provided.
+// `inResource("/app/testing/", ["new", "app", "teams"])` will return true
+// because '/app/testing' is a part of root 'app'
+//
+// 'pathname' arg can be provided via `location.pathname`.
+export function inResource(pathname: string, resources: string[]): boolean {
+    // Removes leading and trailing '/'
+    const trimmedResource = trimResource(pathname)
+
+    // Checks if a path is part of a resource.
+    // E.g. "api/userspace/resource" path is a part of resource "api/userspace"
+    return resources.map(res => trimmedResource.startsWith(trimResource(res))).some(Boolean)
+}