From fdaa759afa0b0515caefff0e0027163bf590c31a Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Mon, 12 Sep 2022 18:50:51 +0100
Subject: [PATCH] Group nav sidebar files (#25359)
* Move `DataAppNavbar` to its own directory
* Move `MainNavbarContainer` to its own directory
* Move `BookmarksList` to `MainNavbarContainer`
* Extract `getSelectedItems`
* Extract `DataAppActionPanel`
---
.../DataAppNavbar/DataAppActionPanel.tsx | 47 ++++++++++
.../DataAppNavbarContainer.tsx | 5 +-
.../{ => DataAppNavbar}/DataAppNavbarView.tsx | 34 ++------
.../MainNavbar/DataAppNavbar/index.tsx | 1 +
.../nav/containers/MainNavbar/MainNavbar.tsx | 76 +++-------------
.../BookmarkList/BookmarkList.styled.tsx | 3 +-
.../BookmarkList/BookmarkList.tsx | 5 +-
.../BookmarkList/index.ts | 0
.../BookmarkList/sortable.css | 0
.../MainNavbarContainer.tsx | 5 +-
.../MainNavbarView.tsx | 10 ++-
.../MainNavbar/MainNavbarContainer/index.ts | 1 +
.../containers/MainNavbar/getSelectedItems.ts | 87 +++++++++++++++++++
13 files changed, 172 insertions(+), 102 deletions(-)
create mode 100644 frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppActionPanel.tsx
rename frontend/src/metabase/nav/containers/MainNavbar/{ => DataAppNavbar}/DataAppNavbarContainer.tsx (98%)
rename frontend/src/metabase/nav/containers/MainNavbar/{ => DataAppNavbar}/DataAppNavbarView.tsx (62%)
create mode 100644 frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/index.tsx
rename frontend/src/metabase/nav/containers/MainNavbar/{ => MainNavbarContainer}/BookmarkList/BookmarkList.styled.tsx (95%)
rename frontend/src/metabase/nav/containers/MainNavbar/{ => MainNavbarContainer}/BookmarkList/BookmarkList.tsx (97%)
rename frontend/src/metabase/nav/containers/MainNavbar/{ => MainNavbarContainer}/BookmarkList/index.ts (100%)
rename frontend/src/metabase/nav/containers/MainNavbar/{ => MainNavbarContainer}/BookmarkList/sortable.css (100%)
rename frontend/src/metabase/nav/containers/MainNavbar/{ => MainNavbarContainer}/MainNavbarContainer.tsx (97%)
rename frontend/src/metabase/nav/containers/MainNavbar/{ => MainNavbarContainer}/MainNavbarView.tsx (98%)
create mode 100644 frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/index.ts
create mode 100644 frontend/src/metabase/nav/containers/MainNavbar/getSelectedItems.ts
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppActionPanel.tsx b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppActionPanel.tsx
new file mode 100644
index 00000000000..d59861c3a0d
--- /dev/null
+++ b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppActionPanel.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import _ from "underscore";
+import { t } from "ttag";
+
+import ButtonGroup from "metabase/core/components/ButtonGroup";
+import Link from "metabase/core/components/Link";
+import Tooltip from "metabase/components/Tooltip";
+
+import * as Urls from "metabase/lib/urls";
+
+import type { DataApp } from "metabase-types/api";
+
+import {
+ DataAppActionsContainer,
+ DataAppActionButton,
+ ExitDataAppButton,
+} from "../MainNavbar.styled";
+
+interface Props {
+ dataApp: DataApp;
+ onEditAppSettings: () => void;
+}
+
+function DataAppActionPanel({ dataApp, onEditAppSettings }: Props) {
+ return (
+ <DataAppActionsContainer>
+ <ButtonGroup>
+ <Tooltip tooltip={t`Add`}>
+ <DataAppActionButton icon="add" onlyIcon />
+ </Tooltip>
+ <Tooltip tooltip={t`Settings`}>
+ <DataAppActionButton
+ icon="gear"
+ onClick={onEditAppSettings}
+ onlyIcon
+ />
+ </Tooltip>
+ </ButtonGroup>
+ <ExitDataAppButton
+ as={Link}
+ to={Urls.dataApp(dataApp, { mode: "preview" })}
+ >{t`Exit app`}</ExitDataAppButton>
+ </DataAppActionsContainer>
+ );
+}
+
+export default DataAppActionPanel;
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbarContainer.tsx b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarContainer.tsx
similarity index 98%
rename from frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbarContainer.tsx
rename to frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarContainer.tsx
index a4db1246fce..0cb84c5dc9a 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbarContainer.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarContainer.tsx
@@ -13,8 +13,9 @@ import Search from "metabase/entities/search";
import type { DataApp, Dashboard } from "metabase-types/api";
import type { State } from "metabase-types/store";
-import { MainNavbarProps, MainNavbarOwnProps, SelectedItem } from "./types";
-import NavbarLoadingView from "./NavbarLoadingView";
+import { MainNavbarProps, MainNavbarOwnProps, SelectedItem } from "../types";
+import NavbarLoadingView from "../NavbarLoadingView";
+
import DataAppNavbarView from "./DataAppNavbarView";
const FETCHING_SEARCH_MODELS = ["page"];
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbarView.tsx b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarView.tsx
similarity index 62%
rename from frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbarView.tsx
rename to frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarView.tsx
index 58de052fbaa..1cc84f8a765 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbarView.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/DataAppNavbarView.tsx
@@ -2,26 +2,20 @@ import React from "react";
import _ from "underscore";
import { t } from "ttag";
-import ButtonGroup from "metabase/core/components/ButtonGroup";
-import Link from "metabase/core/components/Link";
-import Tooltip from "metabase/components/Tooltip";
-
import * as Urls from "metabase/lib/urls";
import type { DataApp } from "metabase-types/api";
-import { MainNavbarProps, SelectedItem } from "./types";
+import { MainNavbarProps, SelectedItem } from "../types";
+import DataAppActionPanel from "./DataAppActionPanel";
import {
- DataAppActionsContainer,
- DataAppActionButton,
DataAppNewButton,
- ExitDataAppButton,
PaddedSidebarLink,
SidebarContentRoot,
SidebarHeading,
SidebarHeadingWrapper,
SidebarSection,
-} from "./MainNavbar.styled";
+} from "../MainNavbar.styled";
interface Props extends MainNavbarProps {
dataApp: DataApp;
@@ -69,24 +63,10 @@ function DataAppNavbarView({
>{t`Add new page`}</DataAppNewButton>
</div>
</div>
- <DataAppActionsContainer>
- <ButtonGroup>
- <Tooltip tooltip={t`Add`}>
- <DataAppActionButton icon="add" onlyIcon />
- </Tooltip>
- <Tooltip tooltip={t`Settings`}>
- <DataAppActionButton
- icon="gear"
- onClick={onEditAppSettings}
- onlyIcon
- />
- </Tooltip>
- </ButtonGroup>
- <ExitDataAppButton
- as={Link}
- to={Urls.dataApp(dataApp, { mode: "preview" })}
- >{t`Exit app`}</ExitDataAppButton>
- </DataAppActionsContainer>
+ <DataAppActionPanel
+ dataApp={dataApp}
+ onEditAppSettings={onEditAppSettings}
+ />
</SidebarContentRoot>
);
}
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/index.tsx b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/index.tsx
new file mode 100644
index 00000000000..a7bd3d39353
--- /dev/null
+++ b/frontend/src/metabase/nav/containers/MainNavbar/DataAppNavbar/index.tsx
@@ -0,0 +1 @@
+export { default } from "./DataAppNavbarContainer";
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.tsx
index 4e68f7669b1..ed2bc06d971 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbar.tsx
@@ -6,8 +6,6 @@ import { LocationDescriptor } from "history";
import * as Urls from "metabase/lib/urls";
import { closeNavbar, openNavbar } from "metabase/redux/app";
-import { coerceCollectionId } from "metabase/collections/utils";
-
import { getQuestion } from "metabase/query_builder/selectors";
import { getDashboard } from "metabase/dashboard/selectors";
@@ -15,7 +13,7 @@ import type Question from "metabase-lib/lib/Question";
import type { Dashboard } from "metabase-types/api";
import type { State } from "metabase-types/store";
-import DataAppNavbarContainer from "./DataAppNavbarContainer";
+import DataAppNavbarContainer from "./DataAppNavbar";
import MainNavbarContainer from "./MainNavbarContainer";
import {
@@ -24,6 +22,7 @@ import {
MainNavbarDispatchProps,
SelectedItem,
} from "./types";
+import getSelectedItems from "./getSelectedItems";
import { NavRoot, Sidebar } from "./MainNavbar.styled";
interface StateProps {
@@ -78,67 +77,16 @@ function MainNavbar({
};
}, [isOpen, openNavbar, closeNavbar]);
- const selectedItems = useMemo<SelectedItem[]>(() => {
- const { pathname } = location;
- const { slug } = params;
- const isCollectionPath = pathname.startsWith("/collection");
- const isUsersCollectionPath = pathname.startsWith("/collection/users");
- const isQuestionPath = pathname.startsWith("/question");
- const isModelPath = pathname.startsWith("/model");
- const isDataAppPath = Urls.isDataAppPath(pathname);
- const isDataAppPagePath = Urls.isDataAppPagePath(pathname);
- const isDashboardPath = pathname.startsWith("/dashboard");
-
- if (isCollectionPath) {
- return [
- {
- id: isUsersCollectionPath ? "users" : Urls.extractCollectionId(slug),
- type: "collection",
- },
- ];
- }
- if (isDataAppPagePath) {
- return [
- {
- id: parseInt(params.pageId as string),
- type: "data-app-page",
- },
- ];
- }
- if (isDataAppPath) {
- return [
- {
- id: Urls.extractEntityId(slug),
- type: "data-app",
- },
- ];
- }
- if (isDashboardPath && dashboard) {
- return [
- {
- id: dashboard.id,
- type: "dashboard",
- },
- {
- id: coerceCollectionId(dashboard.collection_id),
- type: "collection",
- },
- ];
- }
- if ((isQuestionPath || isModelPath) && question) {
- return [
- {
- id: question.id(),
- type: "card",
- },
- {
- id: coerceCollectionId(question.collectionId()),
- type: "collection",
- },
- ];
- }
- return [{ url: pathname, type: "non-entity" }];
- }, [location, params, question, dashboard]);
+ const selectedItems = useMemo<SelectedItem[]>(
+ () =>
+ getSelectedItems({
+ pathname: location.pathname,
+ params,
+ question,
+ dashboard,
+ }),
+ [location, params, question, dashboard],
+ );
return (
<Sidebar className="Nav" isOpen={isOpen} aria-hidden={!isOpen}>
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.styled.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.styled.tsx
similarity index 95%
rename from frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.styled.tsx
rename to frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.styled.tsx
index e31a81fe457..4f76a194448 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.styled.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.styled.tsx
@@ -4,7 +4,8 @@ import { css } from "@emotion/react";
import { color } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
-import { SidebarLink } from "../SidebarItems";
+
+import { SidebarLink } from "../../SidebarItems";
type SidebarBookmarkItem = {
isSorting: boolean;
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx
similarity index 97%
rename from frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.tsx
rename to frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx
index 0df162262dc..1f4f9dc23ee 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/BookmarkList.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx
@@ -17,8 +17,9 @@ import { PLUGIN_COLLECTIONS } from "metabase/plugins";
import Bookmarks, { isDataAppBookmark } from "metabase/entities/bookmarks";
import * as Urls from "metabase/lib/urls";
-import { SelectedItem } from "../types";
-import { SidebarHeading } from "../MainNavbar.styled";
+import { SelectedItem } from "../../types";
+import { SidebarHeading } from "../../MainNavbar.styled";
+
import { DragIcon, SidebarBookmarkItem } from "./BookmarkList.styled";
const mapDispatchToProps = {
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/index.ts b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/index.ts
similarity index 100%
rename from frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/index.ts
rename to frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/index.ts
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/sortable.css b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/sortable.css
similarity index 100%
rename from frontend/src/metabase/nav/containers/MainNavbar/BookmarkList/sortable.css
rename to frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/sortable.css
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarContainer.tsx
similarity index 97%
rename from frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer.tsx
rename to frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarContainer.tsx
index 90518a6a8a8..276d02223dc 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarContainer.tsx
@@ -31,9 +31,10 @@ import {
nonPersonalOrArchivedCollection,
} from "metabase/collections/utils";
-import { MainNavbarProps, SelectedItem } from "./types";
+import { MainNavbarProps, SelectedItem } from "../types";
+import NavbarLoadingView from "../NavbarLoadingView";
+
import MainNavbarView from "./MainNavbarView";
-import NavbarLoadingView from "./NavbarLoadingView";
type NavbarModal = "MODAL_NEW_COLLECTION" | null;
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarView.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarView.tsx
similarity index 98%
rename from frontend/src/metabase/nav/containers/MainNavbar/MainNavbarView.tsx
rename to frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarView.tsx
index 62ac47caf9b..0098e0d1ba4 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarView.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/MainNavbarView.tsx
@@ -15,13 +15,13 @@ import * as Urls from "metabase/lib/urls";
import type { Bookmark, Collection, DataApp, User } from "metabase-types/api";
-import { SelectedItem } from "./types";
-import BookmarkList from "./BookmarkList";
+import { SelectedItem } from "../types";
import {
SidebarCollectionLink,
SidebarDataAppLink,
SidebarLink,
-} from "./SidebarItems";
+} from "../SidebarItems";
+
import {
AddYourOwnDataLink,
CollectionMenuList,
@@ -32,7 +32,9 @@ import {
SidebarHeading,
SidebarHeadingWrapper,
SidebarSection,
-} from "./MainNavbar.styled";
+} from "../MainNavbar.styled";
+
+import BookmarkList from "./BookmarkList";
interface CollectionTreeItem extends Collection {
icon: string | IconProps;
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/index.ts b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/index.ts
new file mode 100644
index 00000000000..07e4d8d03dc
--- /dev/null
+++ b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/index.ts
@@ -0,0 +1 @@
+export { default } from "./MainNavbarContainer";
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/getSelectedItems.ts b/frontend/src/metabase/nav/containers/MainNavbar/getSelectedItems.ts
new file mode 100644
index 00000000000..aa94b2d73ba
--- /dev/null
+++ b/frontend/src/metabase/nav/containers/MainNavbar/getSelectedItems.ts
@@ -0,0 +1,87 @@
+import * as Urls from "metabase/lib/urls";
+
+import { coerceCollectionId } from "metabase/collections/utils";
+
+import type Question from "metabase-lib/lib/Question";
+import type { Dashboard } from "metabase-types/api";
+
+import { SelectedItem } from "./types";
+
+type Opts = {
+ pathname: string;
+ params: {
+ slug?: string;
+ pageId?: string;
+ };
+ question?: Question;
+ dashboard?: Dashboard;
+};
+
+function getSelectedItems({
+ pathname,
+ params,
+ question,
+ dashboard,
+}: Opts): SelectedItem[] {
+ const { slug } = params;
+
+ const isCollectionPath = pathname.startsWith("/collection");
+ const isUsersCollectionPath = pathname.startsWith("/collection/users");
+ const isQuestionPath = pathname.startsWith("/question");
+ const isModelPath = pathname.startsWith("/model");
+ const isDataAppPath = Urls.isDataAppPath(pathname);
+ const isDataAppPagePath = Urls.isDataAppPagePath(pathname);
+ const isDashboardPath = pathname.startsWith("/dashboard");
+
+ if (isCollectionPath) {
+ return [
+ {
+ id: isUsersCollectionPath ? "users" : Urls.extractCollectionId(slug),
+ type: "collection",
+ },
+ ];
+ }
+ if (isDataAppPagePath) {
+ return [
+ {
+ id: parseInt(params.pageId as string),
+ type: "data-app-page",
+ },
+ ];
+ }
+ if (isDataAppPath) {
+ return [
+ {
+ id: Urls.extractEntityId(slug),
+ type: "data-app",
+ },
+ ];
+ }
+ if (isDashboardPath && dashboard) {
+ return [
+ {
+ id: dashboard.id,
+ type: "dashboard",
+ },
+ {
+ id: coerceCollectionId(dashboard.collection_id),
+ type: "collection",
+ },
+ ];
+ }
+ if ((isQuestionPath || isModelPath) && question) {
+ return [
+ {
+ id: question.id(),
+ type: "card",
+ },
+ {
+ id: coerceCollectionId(question.collectionId()),
+ type: "collection",
+ },
+ ];
+ }
+ return [{ url: pathname, type: "non-entity" }];
+}
+
+export default getSelectedItems;
--
GitLab