feat(view): 12142 add tos and privacy policy to dn (#279)

* feat: add ability to make route always visible
* feat: add PrivacyPolicy page
* polishing text and style
* feat: add cookies page
* feat: add cookies page
* fix typo in policy doc
* fix typo in styles
* feat: Added common page layout
* increase test coverage
* fix: move nested routes closer to parent
* batter naming for new option
* cookies file update
* migrate sidebar to new interface
* remove md files
* removed unnecessary style
* remove mdx support

package.json

@@ -82,6 +82,7 @@
     "@konturio/default-theme": "3.1.1",
     "@konturio/ui-kit": "^3.5.3",
     "@loaders.gl/core": "^3.2.3",
+    "@mdx-js/rollup": "^2.1.5",
     "@nebula.gl/edit-modes": "1.0.3",
     "@nebula.gl/layers": "1.0.3",
     "@reatom/core": "^2.0.22",
@@ -135,7 +136,8 @@
     "react-router-cache-route": "^1.11.1",
     "react-router-dom": "^5.3.0",
     "react-transition-group": "^4.4.5",
-    "react-virtuoso": "^2.19.0"
+    "react-virtuoso": "^2.19.0",
+    "remark-gfm": "^3.0.1"
   },
   "devDependencies": {
     "@testing-library/react": "^13.4.0",

src/components/Layout/Article/Article.module.css

@@ -0,0 +1,60 @@
+.mainWrap {
+  place-content: center;
+  flex: 1;
+  padding-top: 80px;
+  padding-bottom: 80px;
+  overflow-y: auto;
+}
+
+.content {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 16px;
+  line-height: 24px;
+  box-sizing: content-box;
+  padding-left: 14px;
+  padding-right: 14px;
+}
+
+.mainWrap blockquote {
+  margin-block-start: 2em;
+  margin-block-end: 2em;
+}
+
+.mainWrap blockquote h3 {
+  margin-block-end: 0em;
+}
+
+.mainWrap blockquote p {
+  margin-block-start: 0.3em;
+  padding-left: 1em;
+}
+
+.mainWrap h1 {
+  font-weight: 500;
+  font-size: 48px;
+  line-height: 62px;
+  display: flex;
+  margin: 0 0 40px 0;
+}
+
+.mainWrap a {
+  color: var(--accent-strong);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.content table {
+  border-collapse: collapse;
+}
+
+.content td,
+.content th {
+  padding: var(--unit);
+  border: 1px solid var(--faint-weak);
+}
+
+.content tr:nth-child(odd) {
+  background-color: var(--base-weak-up);
+}

src/components/Layout/Article/Article.tsx

@@ -0,0 +1,10 @@
+import s from './Article.module.css';
+import type { PropsWithChildren } from 'react';
+
+export function Article({ children }: PropsWithChildren) {
+  return (
+    <div className={s.mainWrap}>
+      <article className={s.content}>{children}</article>
+    </div>
+  );
+}

src/components/Layout/index.tsx

@@ -0,0 +1,5 @@
+import { Column } from './Column/Column';
+import { Row } from './Row/Row';
+import { Article } from './Article/Article';
+
+export { Row, Column, Article };

src/core/localization/gettext/template/common.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2022-12-06T14:07:27.258Z\n"
-"PO-Revision-Date: 2022-12-06T14:07:27.258Z\n"
+"POT-Creation-Date: 2022-12-07T18:32:47.235Z\n"
+"PO-Revision-Date: 2022-12-07T18:32:47.235Z\n"
 
 #: km
 msgid "km"
@@ -717,6 +717,10 @@ msgstr ""
 msgid "Profile"
 msgstr ""
 
+#: modes##privacy
+msgid "Privacy"
+msgstr ""
+
 #: about##title
 msgid "Welcome to Disaster Ninja!"
 msgstr ""

src/core/localization/translations/en/common.json

@@ -240,7 +240,8 @@
     "map": "Map",
     "about": "About",
     "reports": "Reports",
-    "profile": "Profile"
+    "profile": "Profile",
+    "privacy": "Privacy"
   },
   "about": {
     "title": "Welcome to Disaster Ninja!",

src/core/router/routes.tsx

@@ -17,6 +17,8 @@ const { ReportsPage } = lazily(() => import('~views/Reports/Reports'));
 const { ReportPage } = lazily(() => import('~views/Report/Report'));
 const { ProfilePage } = lazily(() => import('~views/Profile/Profile'));
 const { AboutPage } = lazily(() => import('~views/About/About'));
+const { PrivacyPage } = lazily(() => import('~views/Privacy/Privacy'));
+const { CookiesPage } = lazily(() => import('~views/Cookies/Cookies'));
 const { BivariateManagerPage } = lazily(
   () => import('~views/BivariateManager/BivariateManager'),
 );
@@ -31,6 +33,22 @@ export const routerConfig: AppRouterConfig = {
       view: <AboutPage toHomePage={() => goTo('')} />,
       showForNewUsers: true,
     },
+    {
+      slug: 'privacy',
+      title: i18n.t('modes.privacy'),
+      icon: <Reports16 />,
+      view: <PrivacyPage />,
+      parentRoute: 'about',
+      visibilityInNavigation: 'always',
+    },
+    {
+      slug: 'cookies',
+      title: 'modes.cookies',
+      icon: <Reports16 />,
+      view: <CookiesPage />,
+      parentRoute: 'about',
+      visibilityInNavigation: 'never',
+    },
     {
       slug: 'profile',
       title: (
@@ -64,7 +82,7 @@ export const routerConfig: AppRouterConfig = {
       view: <ReportPage />,
       requiredFeature: AppFeature.REPORTS,
       parentRoute: 'reports',
-      hidden: true,
+      visibilityInNavigation: 'never',
     },
     {
       slug: 'bivariate-manager',

src/core/router/types.ts

@@ -14,8 +14,13 @@ export interface AppRoute {
   requiredFeature?: AppFeatureType;
   /** Nest routes to each other */
   parentRoute?: string;
-  /** Don't show route in navigation */
-  hidden?: boolean;
+  /**
+   * Visibility in navigation sidebar
+   * - auto (default) - show when route or it's parent is active
+   * - never - never show it in navigation
+   * - always - always show it in navigation
+   * */
+  visibilityInNavigation?: 'always' | 'never' | 'auto';
 }
 
 export interface AppRouterConfig {

src/features/side_bar/components/SideBar/SideBar.module.css

@@ -13,6 +13,14 @@
   user-select: none;
 }
 
+.nestedRoute + .topLevelRoute {
+  margin-top: var(--unit);
+}
+
+.topLevelRoute + .nestedRoute {
+  margin-top: 0;
+}
+
 .sidebar .controlButton {
   width: 100%;
   justify-content: left;

src/features/side_bar/components/SideBar/SideBar.tsx

@@ -9,39 +9,13 @@ import { i18n } from '~core/localization';
 import { currentTooltipAtom } from '~core/shared_state/currentTooltip';
 import { searchStringAtom } from '~core/url_store/atoms/urlStore';
 import { SidebarAppIcon } from '../AppIcon/AppIcon';
+import { SmallIconSlot } from '../SmallIconSlot/SmallIconSlot';
+import { routeVisibilityChecker } from './routeVisibilityChecker';
 import s from './SideBar.module.css';
 import type { AvailableRoutesAtom, CurrentRouteAtom, AppRoute } from '~core/router';
 
 const wasClosed = 'sidebarClosed';
 
-/* We want to hide children routes if parent route and his children inactive */
-function routeVisibilityChecker(routes: AppRoute[]) {
-  type RoutesTree = { [key: string]: RoutesTree };
-  const routesTree = routes.reduce((tree, route) => {
-    if (route.parentRoute) {
-      if (!tree[route.parentRoute]) tree[route.parentRoute] = {};
-      tree[route.parentRoute][route.slug] = {};
-      return tree;
-    }
-    tree[route.slug] = {};
-    return tree;
-  }, {} as RoutesTree);
-
-  return (route: AppRoute, currentRoute: AppRoute | null): boolean => {
-    if (route.hidden) return false;
-    if (!route.parentRoute) return true; // always show top level routes
-    if (currentRoute === null) return false; // hide nested routes if no selected routes
-    const isActive = route.slug === currentRoute.slug;
-    const haveActiveParentRoute = route.parentRoute
-      ? currentRoute?.slug === route.parentRoute
-      : false;
-    const neighbors = route.parentRoute ? Object.keys(routesTree[route.parentRoute]) : [];
-    const haveActiveNeighbor = neighbors.includes(currentRoute.slug);
-
-    return isActive || haveActiveParentRoute || haveActiveNeighbor;
-  };
-}
-
 export function SideBar({
   currentRouteAtom,
   availableRoutesAtom,
@@ -125,7 +99,10 @@ export function SideBar({
             return checkRouteVisibility(route, currentRoute) ? (
               <Link
                 key={route.slug}
-                className={s.sidebarItemContainer}
+                className={cn(
+                  s.sidebarItemContainer,
+                  route.parentRoute ? s.nestedRoute : s.topLevelRoute,
+                )}
                 to={getAbsoluteRoute(
                   route.parentRoute
                     ? `${route.parentRoute}/${route.slug}${searchString}`
@@ -143,7 +120,13 @@ export function SideBar({
                   <ActionsBarBTN
                     size={route.parentRoute ? 'small-xs' : 'small'}
                     active={currentRoute?.slug === route.slug}
-                    iconBefore={route.icon}
+                    iconBefore={
+                      route.parentRoute ? (
+                        <SmallIconSlot>{route.icon}</SmallIconSlot>
+                      ) : (
+                        route.icon
+                      )
+                    }
                     value={route.slug}
                     className={s.controlButton}
                   >

src/features/side_bar/components/SideBar/routeVisibilityChecker.test.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { test, expect, beforeEach, describe } from 'vitest';
+import { routeVisibilityChecker } from './routeVisibilityChecker';
+import type { AppRoute } from '~core/router';
+
+declare module 'vitest' {
+  export interface TestContext {
+    checker: (route: AppRoute, currentRoute: AppRoute | null) => boolean;
+    routes: {
+      foo: AppRoute;
+      bar: AppRoute;
+      bar_child: AppRoute;
+      bar_child_neighbor: AppRoute;
+    };
+  }
+}
+
+/* defaultRouteValues */
+const defaults = {
+  icon: React.createElement('i'),
+  view: React.createElement('p'),
+  title: '',
+};
+
+beforeEach(async (context) => {
+  const foo = {
+    ...defaults,
+    slug: 'foo',
+  };
+
+  const bar = {
+    ...defaults,
+    slug: 'bar',
+  };
+
+  const bar_child = {
+    ...defaults,
+    slug: 'bar-child',
+    parentRoute: 'bar',
+  };
+
+  const bar_child_neighbor = {
+    ...defaults,
+    slug: 'bar-child-neighbor',
+    parentRoute: 'bar',
+  };
+
+  context.routes = {
+    foo,
+    bar,
+    bar_child,
+    bar_child_neighbor,
+  };
+
+  // extend context
+  context.checker = routeVisibilityChecker(Object.values(context.routes));
+});
+
+describe('auto visibility', () => {
+  test('top level routes always visible', ({ checker, routes }) => {
+    expect(
+      checker(
+        routes.foo, // check route
+        routes.foo, // when what active
+      ),
+      'in case it active',
+    ).toBe(true);
+
+    expect(
+      checker(
+        routes.foo, // check route
+        routes.bar, // when what active
+      ),
+      'in case it inactive',
+    ).toBe(true);
+  });
+
+  test('nested routes visible when parent active', ({ checker, routes }) => {
+    expect(checker(routes.bar_child, routes.bar)).toBe(true);
+  });
+
+  test('nested routes visible when neighbor active', ({ checker, routes }) => {
+    expect(checker(routes.bar_child, routes.bar_child_neighbor)).toBe(true);
+  });
+
+  test('nested hidden when no active neighbor and parent', ({ checker, routes }) => {
+    expect(checker(routes.bar_child, routes.foo)).toBe(false);
+  });
+});