add descriptions SH-216

VKCOM · Nov 6, 2024 · c02009a · c02009a
1 parent 173febf
commit c02009a
Show file tree

Hide file tree

Showing 9 changed files with 600 additions and 33 deletions.
diff --git a/statshouse-ui/package-lock.json b/statshouse-ui/package-lock.json
diff --git a/statshouse-ui/package.json b/statshouse-ui/package.json
@@ -40,6 +40,7 @@
     "react-router-dom": "^6.17.0",
     "react-scripts": "^5.0.1",
     "react-window": "^1.8.10",
+    "remark-gfm": "^4.0.0",
     "sass": "^1.69.5",
     "typescript": "^4.9.5",
     "uplot": "^1.6.27",

diff --git a/statshouse-ui/src/components2/Dashboard/DashboardName.tsx b/statshouse-ui/src/components2/Dashboard/DashboardName.tsx
@@ -10,6 +10,8 @@ import cn from 'classnames';
 import { Tooltip } from 'components/UI';
 import { DashboardNameTitle } from './DashboardNameTitle';
 import { useStatsHouseShallow } from 'store2';
+import css from '../style.module.css';
+import { MarkdownRender } from 'hooks/useMarkdownRender';
 
 export function _DashboardName() {
   const { dashboardName, dashboardDescription } = useStatsHouseShallow(
@@ -28,13 +30,22 @@ export function _DashboardName() {
         hover
         horizontal="left"
       >
-        <div>
+        <div className="overflow-hidden text-truncate">
           {dashboardName}
           {!!dashboardDescription && ':'}
         </div>
         {!!dashboardDescription && (
-          <div className="text-secondary flex-grow-1 w-0 overflow-hidden text-truncate">
-            <>{dashboardDescription}</>
+          <div className="text-secondary flex-grow-1 w-0 overflow-hidden">
+            <MarkdownRender
+              className={css.markdown}
+              allowedElements={['p', 'a']}
+              components={{
+                p: ({ node, ...props }) => <span {...props} />,
+              }}
+              unwrapDisallowed
+            >
+              {dashboardDescription}
+            </MarkdownRender>
           </div>
         )}
       </Tooltip>

diff --git a/statshouse-ui/src/components2/Dashboard/DashboardNameTitle.tsx b/statshouse-ui/src/components2/Dashboard/DashboardNameTitle.tsx
@@ -5,6 +5,8 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import React from 'react';
+import markdownStyles from '../style.module.css';
+import { MarkdownRender } from 'hooks/useMarkdownRender';
 
 export type DashboardNameTitleProps = {
   name: string;
@@ -21,10 +23,10 @@ export function DashboardNameTitle({ name, description }: DashboardNameTitleProp
       {!!description && (
         <>
           <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>
-            <>{description}</>
+            <MarkdownRender className={markdownStyles.markdownMargin}>{description}</MarkdownRender>
           </div>
           <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
-            <>{description}</>
+            <MarkdownRender>{description}</MarkdownRender>
           </div>
         </>
       )}

diff --git a/statshouse-ui/src/components2/Dashboard/DashboardSettings/DashboardInfo.tsx b/statshouse-ui/src/components2/Dashboard/DashboardSettings/DashboardInfo.tsx
@@ -4,9 +4,9 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button } from 'components/UI';
+import { Button, TextArea } from 'components/UI';
 import { useStatsHouseShallow } from 'store2';
 import { useGlobalLoader } from 'store2/plotQueryStore';
 
@@ -44,15 +44,12 @@ export function DashboardInfo({ className }: DashboardInfoProps) {
     },
     [setParams]
   );
-  const inputDescription = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      setParams((params) => {
-        params.dashboardDescription = value;
-      });
-    },
-    [setParams]
-  );
+
+  const inputDescription = (value: string) => {
+    setParams((params) => {
+      params.dashboardDescription = value;
+    });
+  };
 
   const onRemoveDashboard = useCallback(
     (event: React.MouseEvent) => {
@@ -95,13 +92,11 @@ export function DashboardInfo({ className }: DashboardInfoProps) {
               Description
             </label>
             <div className="col-sm-10">
-              <input
-                id="dashboard-input-description"
-                type="text"
-                className="form-control"
-                aria-label="Name"
-                defaultValue={dashboardDescription ?? ''}
+              <TextArea
+                className="form-control-sm"
+                value={dashboardDescription || ''}
                 onInput={inputDescription}
+                autoHeight
               />
             </div>
           </div>

diff --git a/statshouse-ui/src/components2/Plot/PlotView/PlotHeader.tsx b/statshouse-ui/src/components2/Plot/PlotView/PlotHeader.tsx
@@ -11,6 +11,7 @@ import { useStatsHouseShallow } from 'store2';
 import { PlotNavigate } from '../PlotNavigate';
 import cn from 'classnames';
 import css from './style.module.css';
+import markdownStyles from '../../style.module.css';
 import { ReactComponent as SVGTrash } from 'bootstrap-icons/icons/trash.svg';
 import { ReactComponent as SVGBoxArrowUpRight } from 'bootstrap-icons/icons/box-arrow-up-right.svg';
 import { ReactComponent as SVGChevronUp } from 'bootstrap-icons/icons/chevron-up.svg';
@@ -25,6 +26,7 @@ import { PlotHeaderBadges } from './PlotHeaderBadges';
 import { getMetricMeta, getMetricName, getMetricWhat } from '../../../store2/helpers';
 import { PlotLink } from '../PlotLink';
 import { PlotHeaderBadgeResolution } from './PlotHeaderBadgeResolution';
+import { MarkdownRender } from 'hooks/useMarkdownRender';
 
 export type PlotHeaderProps = { plotKey: PlotKey; isDashboard?: boolean };
 
@@ -130,10 +132,10 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
     setEditTitle(false);
   });
 
-  const plotTooltip = useMemo(
-    () => <PlotHeaderTooltipContent name={<PlotName plotKey={plotKey} />} description={description || ''} />,
-    [description, plotKey]
-  );
+  const plotTooltip = useMemo(() => {
+    const desc = description || '';
+    return <PlotHeaderTooltipContent name={<PlotName plotKey={plotKey} />} description={desc} />;
+  }, [description, plotKey]);
 
   if (isDashboard) {
     return (
@@ -220,7 +222,7 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
             className="overflow-force-wrap text-secondary fw-normal font-normal flex-grow-0"
             style={{ whiteSpace: 'pre-wrap' }}
           >
-            <>{description}</>
+            <MarkdownRender className={markdownStyles.markdownMargin}>{description}</MarkdownRender>
           </small>
         )}
       </div>
@@ -312,9 +314,31 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
             autoHeight
           />
         ) : (
-          <Tooltip className="d-flex" title={description} hover>
-            <small className="text-secondary w-0 flex-grow-1 text-truncate no-tooltip-safari-fix">
-              <>{description}</>
+          <Tooltip
+            className="d-flex"
+            title={
+              <div className="small text-secondary overflow-auto">
+                <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>
+                  <MarkdownRender className={markdownStyles.markdownMargin}>{description}</MarkdownRender>
+                </div>
+                <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
+                  <MarkdownRender className={markdownStyles.markdownMargin}>{description}</MarkdownRender>
+                </div>
+              </div>
+            }
+            hover
+          >
+            <small className="text-secondary w-0 flex-grow-1 no-tooltip-safari-fix">
+              <MarkdownRender
+                className={markdownStyles.markdown}
+                allowedElements={['p', 'a']}
+                components={{
+                  p: ({ node, ...props }) => <span {...props} />,
+                }}
+                unwrapDisallowed
+              >
+                {description}
+              </MarkdownRender>
             </small>
           </Tooltip>
         ))}

diff --git a/statshouse-ui/src/components2/Plot/PlotView/PlotHeaderTooltipContent.tsx b/statshouse-ui/src/components2/Plot/PlotView/PlotHeaderTooltipContent.tsx
@@ -4,8 +4,10 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import cn from 'classnames';
+import markdownStyles from '../style.module.css';
+import { MarkdownRender } from 'hooks/useMarkdownRender';
 
 export type PlotHeaderTooltipContentProps = {
   name: React.ReactNode;
@@ -21,10 +23,10 @@ export function PlotHeaderTooltipContent({ name, description }: PlotHeaderToolti
       {hasDescription && (
         <>
           <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>
-            <>{description}</>
+            <MarkdownRender className={markdownStyles.markdownMargin}>{description}</MarkdownRender>
           </div>
           <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
-            <>{description}</>
+            <MarkdownRender className={markdownStyles.markdownMargin}>{description}</MarkdownRender>
           </div>
         </>
       )}

diff --git a/statshouse-ui/src/components2/style.module.css b/statshouse-ui/src/components2/style.module.css
@@ -0,0 +1,18 @@
+/* Copyright 2024 V Kontakte LLC
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+/* referring to tag <p> because <Markdown> returns content inside tag <p> */
+.markdown {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+.markdownMargin p {
+  margin: 0;
+}
diff --git a/statshouse-ui/src/hooks/useMarkdownRender.tsx b/statshouse-ui/src/hooks/useMarkdownRender.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactMarkdown, { Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+type IMarkdownRenderer = {
+  children?: string;
+  className?: string;
+  allowedElements?: string[];
+  components?: Components;
+  unwrapDisallowed?: boolean;
+};
+
+export const MarkdownRender = ({ children, ...props }: IMarkdownRenderer) => (
+  <ReactMarkdown remarkPlugins={[remarkGfm]} {...props}>
+    {children}
+  </ReactMarkdown>
+);