Move template management to settings (#5811)

app/components/Sidebar/App.tsx

@@ -1,11 +1,5 @@
 import { observer } from "mobx-react";
-import {
-  EditIcon,
-  SearchIcon,
-  ShapesIcon,
-  HomeIcon,
-  SidebarIcon,
-} from "outline-icons";
+import { EditIcon, SearchIcon, HomeIcon, SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -21,12 +15,7 @@ import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import OrganizationMenu from "~/menus/OrganizationMenu";
 import { metaDisplay } from "~/utils/keyboard";
-import {
-  homePath,
-  draftsPath,
-  templatesPath,
-  searchPath,
-} from "~/utils/routeHelpers";
+import { homePath, draftsPath, searchPath } from "~/utils/routeHelpers";
 import TeamLogo from "../TeamLogo";
 import Tooltip from "../Tooltip";
 import Sidebar from "./Sidebar";
@@ -52,7 +41,6 @@ function AppSidebar() {
   React.useEffect(() => {
     if (!user.isViewer) {
       void documents.fetchDrafts();
-      void documents.fetchTemplates();
     }
   }, [documents, user.isViewer]);
 
@@ -138,19 +126,6 @@ function AppSidebar() {
             <Section>
               {can.createDocument && (
                 <>
-                  <SidebarLink
-                    to={templatesPath()}
-                    icon={<ShapesIcon />}
-                    exact={false}
-                    label={t("Templates")}
-                    active={
-                      documents.active
-                        ? documents.active.isTemplate &&
-                          !documents.active.isDeleted &&
-                          !documents.active.isArchived
-                        : undefined
-                    }
-                  />
                   <ArchiveLink />
                   <TrashLink />
                 </>

app/components/Sidebar/Settings.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { BackIcon, SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
@@ -11,6 +11,7 @@ import useSettingsConfig from "~/hooks/useSettingsConfig";
 import useStores from "~/hooks/useStores";
 import isCloudHosted from "~/utils/isCloudHosted";
 import { metaDisplay } from "~/utils/keyboard";
+import { settingsPath } from "~/utils/routeHelpers";
 import Tooltip from "../Tooltip";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
@@ -25,6 +26,7 @@ function SettingsSidebar() {
   const { ui } = useStores();
   const { t } = useTranslation();
   const history = useHistory();
+  const location = useLocation();
   const configs = useSettingsConfig();
   const groupedConfig = groupBy(configs, "group");
 
@@ -62,6 +64,11 @@ function SettingsSidebar() {
                   <SidebarLink
                     key={item.path}
                     to={item.path}
+                    active={
+                      item.path !== settingsPath()
+                        ? location.pathname.startsWith(item.path)
+                        : undefined
+                    }
                     icon={<item.icon />}
                     label={item.name}
                   />