Merge pull request #1389 from concord-consortium/v3-simplify-componen…

…t-title

chore: simplify ComponentTitleBar

v3/src/components/calculator/calculator-title-bar.tsx

@@ -4,7 +4,6 @@ import { ComponentTitleBar } from "../component-title-bar"
 import { useDocumentContent } from "../../hooks/use-document-content"
 import { ITileTitleBarProps } from "../tiles/tile-base-props"
 import { kCalculatorTileType } from "./calculator-defs"
-import { getTitle } from "../../models/tiles/tile-content-info"
 
 export const CalculatorTitleBar =
   observer(function CalculatorTitleBar({ tile, onCloseTile, ...others }: ITileTitleBarProps) {
@@ -18,6 +17,6 @@ export const CalculatorTitleBar =
       })
     }, [documentContent])
     return (
-      <ComponentTitleBar tile={tile} getTitle={getTitle(tile)} onCloseTile={closeCalculator} {...others} />
+      <ComponentTitleBar tile={tile} onCloseTile={closeCalculator} {...others} />
     )
   })

v3/src/components/case-table-card-common/case-table-card-title-bar.tsx

@@ -13,7 +13,6 @@ import { kCaseTableTileType } from "../case-table/case-table-defs"
 import { ComponentTitleBar } from "../component-title-bar"
 import { ITileTitleBarProps } from "../tiles/tile-base-props"
 import { toggleCardTable } from "./case-table-card-utils"
-import { getTitle } from "../../models/tiles/tile-content-info"
 
 import "./case-table-card-title-bar.scss"
 
@@ -111,7 +110,7 @@ export const CaseTableCardTitleBar =
     const cardOrTableIconClass = tileInfo.iconClass
 
     return (
-      <ComponentTitleBar tile={tile} getTitle={getTitle(tile)} {...others}
+      <ComponentTitleBar tile={tile} {...others}
                          onHandleTitleChange={handleChangeTitle} onCloseTile={closeCaseTableOrCard}
                          preventTitleChange={preventTitleChange}>
         <div className="header-left"

v3/src/components/component-title-bar.test.tsx

@@ -2,14 +2,24 @@ import { DndContext } from "@dnd-kit/core"
 import React from "react"
 import { act, render, screen } from "@testing-library/react"
 import { ComponentTitleBar } from "./component-title-bar"
+import { ITileLikeModel } from "../models/tiles/tile-content-info"
 import { ITileModel, TileModel } from "../models/tiles/tile-model"
 
+const mockGetTitle = jest.fn()
+jest.mock("../models/tiles/tile-content-info", () => ({
+  ...jest.requireActual("../models/tiles/tile-content-info"),
+  getTitle: (tile: ITileLikeModel) => mockGetTitle(tile)
+}))
+
 describe("ComponentTitleBar", () => {
 
   const parentRenderCounter = jest.fn()
   const titleRenderCounter = jest.fn()
   const childRenderCounter = jest.fn()
 
+  // getTitle() is called on every render, so we use it to trigger our counter
+  mockGetTitle.mockImplementation(() => titleRenderCounter())
+
   interface ICounter {
     label: string
     fn: jest.Mock
@@ -23,11 +33,9 @@ describe("ComponentTitleBar", () => {
     tile: ITileModel
   }
   function Parent({ tile }: IParent) {
-    // getTitle() is called on every render, so we use it to trigger our counter
-    const getTitle = () => titleRenderCounter()
     return (
       <DndContext>
-        <ComponentTitleBar tile={tile} getTitle={getTitle}>
+        <ComponentTitleBar tile={tile}>
           <RenderCounter label="Child" fn={childRenderCounter} />
         </ComponentTitleBar>
         <RenderCounter label="Parent" fn={parentRenderCounter} />

v3/src/components/component-title-bar.tsx

@@ -3,6 +3,7 @@ import { clsx } from "clsx"
 import { observer } from "mobx-react-lite"
 import React, { useState } from "react"
 import { IUseDraggableTile, useDraggableTile } from "../hooks/use-drag-drop"
+import { getTitle } from "../models/tiles/tile-content-info"
 import { uiState } from "../models/ui-state"
 import MinimizeIcon from "../assets/icons/icon-minimize.svg"
 import { ITileTitleBarProps } from "./tiles/tile-base-props"
@@ -11,7 +12,7 @@ import { t } from "../utilities/translation/translate"
 import "./component-title-bar.scss"
 
 export const ComponentTitleBar = observer(function ComponentTitleBar({
-  tile, getTitle, children, onHandleTitleChange, onMinimizeTile, onCloseTile, preventTitleChange
+  tile, children, onHandleTitleChange, onMinimizeTile, onCloseTile, preventTitleChange
 }: ITileTitleBarProps) {
   // perform all title-related model access here so only title is re-rendered when properties change
   const title = (tile && getTitle?.(tile)) || tile?.title || ""

v3/src/components/graph/graph-registration.ts

@@ -6,10 +6,10 @@ import { graphComponentHandler } from "./graph-component-handler"
 import { kGraphIdPrefix, kGraphTileClass, kGraphTileType, kV2GraphType } from "./graph-defs"
 import { SharedDataSet } from "../../models/shared/shared-data-set"
 import { getSharedCaseMetadataFromDataset } from "../../models/shared/shared-data-utils"
+import { ComponentTitleBar } from "../component-title-bar"
 import { GraphContentModel, IGraphContentModelSnapshot, isGraphContentModel } from "./models/graph-content-model"
 import { kGraphDataConfigurationType } from "./models/graph-data-configuration-model"
 import { kGraphPointLayerType } from "./models/graph-point-layer-model"
-import { GraphComponentTitleBar } from "./components/graph-component-title-bar"
 import { GraphComponent } from "./components/graph-component"
 import { GraphInspector } from "./components/graph-inspector"
 import GraphIcon from '../../assets/icons/icon-graph.svg'
@@ -47,7 +47,7 @@ registerTileContentInfo({
 
 registerTileComponentInfo({
   type: kGraphTileType,
-  TitleBar: GraphComponentTitleBar,
+  TitleBar: ComponentTitleBar,
   Component: GraphComponent,
   InspectorPanel: GraphInspector,
   tileEltClass: kGraphTileClass,

v3/src/components/map/map-registration.ts

@@ -9,6 +9,7 @@ import { appState } from "../../models/app-state"
 import { ITileLikeModel, registerTileContentInfo } from "../../models/tiles/tile-content-info"
 import { t } from "../../utilities/translation/translate"
 import {registerV2TileImporter} from "../../v2/codap-v2-tile-importers"
+import { ComponentTitleBar } from "../component-title-bar"
 import {
   AttributeDescriptionsMapSnapshot, kDataConfigurationType
 } from "../data-display/models/data-configuration-model"
@@ -21,7 +22,6 @@ import { IMapPolygonLayerModelSnapshot } from "./models/map-polygon-layer-model"
 import {
   createMapContentModel, IMapModelContentSnapshot, isMapContentModel, MapContentModel
 } from "./models/map-content-model"
-import {MapComponentTitleBar} from "./components/map-component-title-bar"
 import {MapComponent} from "./components/map-component"
 import {MapInspector} from "./components/map-inspector"
 import {
@@ -42,7 +42,7 @@ registerTileContentInfo({
 
 registerTileComponentInfo({
   type: kMapTileType,
-  TitleBar: MapComponentTitleBar,
+  TitleBar: ComponentTitleBar,
   Component: MapComponent,
   InspectorPanel: MapInspector,
   tileEltClass: kMapTileClass,

v3/src/components/slider/slider-title-bar.tsx

@@ -5,7 +5,6 @@ import { ComponentTitleBar  } from "../component-title-bar"
 import { isAliveSafe } from "../../utilities/mst-utils"
 import { ITileTitleBarProps } from "../tiles/tile-base-props"
 import { isSliderModel } from "./slider-model"
-import { getTitle } from "../../models/tiles/tile-content-info"
 
 export const SliderTitleBar = observer(function SliderTitleBar({ tile, onCloseTile, ...others }: ITileTitleBarProps) {
   const { content } = tile || {}
@@ -18,6 +17,6 @@ export const SliderTitleBar = observer(function SliderTitleBar({ tile, onCloseTi
   }, [content, onCloseTile])
 
   return (
-    <ComponentTitleBar tile={tile} getTitle={getTitle(tile)} onCloseTile={handleCloseTile} {...others} />
+    <ComponentTitleBar tile={tile} onCloseTile={handleCloseTile} {...others} />
   )
 })

v3/src/components/tiles/tile-base-props.ts

@@ -7,8 +7,6 @@ export interface ITileBaseProps {
 }
 
 export interface ITileTitleBarProps extends ITileBaseProps {
-  // pass accessor function so that only title bar is re-rendered when title changes
-  getTitle?: (tile: ITileModel) => string | undefined
   children?: ReactNode
   onHandleTitleBarClick?: (e: React.MouseEvent) => void
   onHandleTitleChange?: (newValue?: string) => void

v3/src/components/web-view/web-view-title-bar.tsx

@@ -2,7 +2,6 @@ import { observer } from "mobx-react-lite"
 import React from "react"
 import { ComponentTitleBar  } from "../component-title-bar"
 import { ITileTitleBarProps } from "../tiles/tile-base-props"
-import { getTitle } from "../../models/tiles/tile-content-info"
 import { isWebViewModel } from "./web-view-model"
 
 import "./web-view-title-bar.scss"
@@ -11,7 +10,7 @@ export const WebViewTitleBar = observer(function WebViewTitleBar({ tile, ...othe
   const webView = isWebViewModel(tile?.content) ? tile.content : undefined
   const children = webView?.isPlugin ? <div className="plugin-version">{webView.version}</div> : null
   return (
-    <ComponentTitleBar tile={tile} getTitle={getTitle(tile)} {...others}>
+    <ComponentTitleBar tile={tile} {...others}>
       {children}
     </ComponentTitleBar>
   )

v3/src/models/tiles/tile-content-info.ts

@@ -75,7 +75,7 @@ export function getTilePrefixes() {
 
 export function getTitle(tile?: ITileLikeModel) {
   const tileContentInfo = getTileContentInfo(tile?.content.type)
-  return () => tile ? tileContentInfo?.getTitle?.(tile) : undefined
+  return (tile && tileContentInfo?.getTitle?.(tile)) ?? ""
 }
 
 export interface ITileExportOptions {