StatsHouse UI: markdown off

VKCOM · Nov 1, 2024 · 5b0b7a2 · 5b0b7a2
1 parent 0dd61f7
commit 5b0b7a2
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 17 deletions.
diff --git a/statshouse-ui/src/components2/Dashboard/DashboardName.tsx b/statshouse-ui/src/components2/Dashboard/DashboardName.tsx
@@ -10,7 +10,6 @@ import cn from 'classnames';
 import { Tooltip } from 'components/UI';
 import { DashboardNameTitle } from './DashboardNameTitle';
 import { useStatsHouseShallow } from 'store2';
-import Markdown from 'react-markdown';
 
 export function _DashboardName() {
   const { dashboardName, dashboardDescription } = useStatsHouseShallow(
@@ -35,7 +34,7 @@ export function _DashboardName() {
         </div>
         {!!dashboardDescription && (
           <div className="text-secondary flex-grow-1 w-0 overflow-hidden text-truncate">
-            <Markdown>{dashboardDescription}</Markdown>
+            <>{dashboardDescription}</>
           </div>
         )}
       </Tooltip>

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

diff --git a/statshouse-ui/src/components2/Plot/PlotView/PlotHeader.tsx b/statshouse-ui/src/components2/Plot/PlotView/PlotHeader.tsx
@@ -25,7 +25,6 @@ import { PlotHeaderBadges } from './PlotHeaderBadges';
 import { getMetricMeta, getMetricName, getMetricWhat } from '../../../store2/helpers';
 import { PlotLink } from '../PlotLink';
 import { PlotHeaderBadgeResolution } from './PlotHeaderBadgeResolution';
-import Markdown from 'react-markdown';
 
 export type PlotHeaderProps = { plotKey: PlotKey; isDashboard?: boolean };
 
@@ -131,10 +130,10 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
     setEditTitle(false);
   });
 
-  const plotTooltip = useMemo(() => {
-    const desc = description || '';
-    return <PlotHeaderTooltipContent name={<PlotName plotKey={plotKey} />} description={desc} />;
-  }, [description, plotKey]);
+  const plotTooltip = useMemo(
+    () => <PlotHeaderTooltipContent name={<PlotName plotKey={plotKey} />} description={description || ''} />,
+    [description, plotKey]
+  );
 
   if (isDashboard) {
     return (
@@ -221,7 +220,7 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
             className="overflow-force-wrap text-secondary fw-normal font-normal flex-grow-0"
             style={{ whiteSpace: 'pre-wrap' }}
           >
-            <Markdown>{description}</Markdown>
+            <>{description}</>
           </small>
         )}
       </div>
@@ -313,9 +312,9 @@ export function _PlotHeader({ plotKey, isDashboard }: PlotHeaderProps) {
             autoHeight
           />
         ) : (
-          <Tooltip className="d-flex" title={<Markdown>{description}</Markdown>} hover>
+          <Tooltip className="d-flex" title={description} hover>
             <small className="text-secondary w-0 flex-grow-1 text-truncate no-tooltip-safari-fix">
-              <Markdown>{description}</Markdown>
+              <>{description}</>
             </small>
           </Tooltip>
         ))}

diff --git a/statshouse-ui/src/components2/Plot/PlotView/PlotHeaderTooltipContent.tsx b/statshouse-ui/src/components2/Plot/PlotView/PlotHeaderTooltipContent.tsx
@@ -4,9 +4,8 @@
 // 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, { useMemo } from 'react';
+import React from 'react';
 import cn from 'classnames';
-import Markdown from 'react-markdown';
 
 export type PlotHeaderTooltipContentProps = {
   name: React.ReactNode;
@@ -22,10 +21,10 @@ export function PlotHeaderTooltipContent({ name, description }: PlotHeaderToolti
       {hasDescription && (
         <>
           <div style={{ maxWidth: '80vw', whiteSpace: 'pre-wrap' }}>
-            <Markdown>{description}</Markdown>
+            <>{description}</>
           </div>
           <div className="opacity-0 overflow-hidden h-0" style={{ maxWidth: '80vw', whiteSpace: 'pre' }}>
-            <Markdown>{description}</Markdown>
+            <>{description}</>
           </div>
         </>
       )}