Merge pull request #1963 from carbon-design-system/fix-hotspoteditormodal-ux

fix(hotspoteditormodal): 3 small ux improvements

Author: kodiakhq[bot]

packages/react/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx

@@ -63,7 +63,7 @@ const defaultProps = {
   dataSeriesItemLinks: null,
   dataItems: [],
   availableDimensions: {},
-  onFetchDynamicDemoHotspots: () => Promise.resolve([{ x: 50, y: 50 }]),
+  onFetchDynamicDemoHotspots: null,
 };
 
 const ImageCardFormItems = ({

packages/react/src/components/DashboardEditor/DashboardEditor.jsx

@@ -256,6 +256,8 @@ const propTypes = {
     table: PropTypes.string,
     image: PropTypes.string,
   }),
+  /** return demo hotspots while we're editing image cards */
+  onFetchDynamicDemoHotspots: PropTypes.func,
 };
 
 const defaultProps = {
@@ -312,6 +314,7 @@ const defaultProps = {
     searchPlaceHolderText: 'Enter a value',
   },
   dataSeriesItemLinks: null,
+  onFetchDynamicDemoHotspots: () => Promise.resolve([{ x: 50, y: 50, type: 'fixed' }]),
 };
 
 const LAYOUTS = {
@@ -534,6 +537,7 @@ const DashboardEditor = ({
               {...cardProps}
               dataItems={dataItemsForCard}
               availableDimensions={availableDimensions}
+              onFetchDynamicDemoHotspots={onFetchDynamicDemoHotspots}
             />
           )
         );
@@ -545,6 +549,7 @@ const DashboardEditor = ({
       dataItems,
       duplicateCard,
       getValidDataItems,
+      onFetchDynamicDemoHotspots,
       removeCard,
       renderCardPreview,
       selectedCardId,

packages/react/src/components/DashboardEditor/DashboardEditorCardRenderer.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/destructuring-assignment */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import omit from 'lodash/omit';
 import find from 'lodash/find';
 import isEqual from 'lodash/isEqual';
@@ -108,7 +108,12 @@ const renderTableCard = (props) => (
  */
 const renderImageCard = (props) => (
   <ImageCard
+    {...props}
     isEditable // render the icon in the right color in the card preview
+    values={{
+      ...props.values,
+      hotspots: props.values?.hotspots?.filter((hotspot) => hotspot.type !== 'dynamic') || [],
+    }}
     renderIconByName={(iconName, iconProps) => {
       // first search the validHotspot Icons
       const matchingHotspotIcon = validHotspotIcons.find((icon) => icon.id === iconName);
@@ -133,7 +138,6 @@ const renderImageCard = (props) => (
       // eslint-disable-next-line react/prop-types
       return <div style={{ color: iconProps.fill }}>{iconToRender}</div>;
     }}
-    {...props}
   />
 );
 
@@ -170,6 +174,26 @@ const renderCustomCard = (props) => {
  * @returns {Node}
  */
 const DashboardEditorCardRenderer = ({ dataItems, availableDimensions, ...others }) => {
+  const [dynamicHotspots, setDynamicHotspots] = useState([]);
+
+  useEffect(() => {
+    const originalDynamicHotspot = others.values?.hotspots?.find(
+      (hotspot) => hotspot.type === 'dynamic'
+    );
+    // if we have dynamic hotspots and a way to fetch them, fetch them
+    if (originalDynamicHotspot && others.onFetchDynamicDemoHotspots) {
+      others.onFetchDynamicDemoHotspots().then((hotspots) =>
+        setDynamicHotspots(
+          hotspots.map((hotspot) => ({
+            ...hotspot,
+            ...omit(originalDynamicHotspot, 'type', 'x', 'y'),
+          }))
+        )
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [others.values?.hotspots?.length, others.onFetchDynamicDemoHotspots]);
+
   if (!isCardJsonValid(others)) {
     return renderDefaultCard(others);
   }
@@ -190,7 +214,10 @@ const DashboardEditorCardRenderer = ({ dataItems, availableDimensions, ...others
     case CARD_TYPES.TABLE:
       return renderTableCard(others);
     case CARD_TYPES.IMAGE:
-      return renderImageCard(others);
+      return renderImageCard({
+        ...others,
+        values: { ...others.values, hotspots: others.values?.hotspots?.concat(dynamicHotspots) },
+      });
     case CARD_TYPES.LIST:
       return renderListCard(others);
     case CARD_TYPES.CUSTOM:

packages/react/src/components/HotspotEditorModal/HotspotEditorModal.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { ContentSwitcher, Switch, Tabs, Tab, InlineNotification } from 'carbon-components-react';
 import pick from 'lodash/pick';
+import sortBy from 'lodash/sortBy';
 import withSize from 'react-sizeme';
 import update from 'immutability-helper';
 import { gray50, red50, green50, blue50 } from '@carbon/colors';
@@ -256,7 +257,11 @@ const HotspotEditorModal = ({
   translateWithId,
 }) => {
   const initialHotspots = cardConfig.values?.hotspots || [];
-  const myDataItems = getValidDataItems ? getValidDataItems(cardConfig) : dataItems;
+  const myDataItems = useMemo(
+    () => sortBy(getValidDataItems ? getValidDataItems(cardConfig) : dataItems, 'label'),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getValidDataItems, dataItems] // watching the card config for changes will simply load this too many times
+  );
   const {
     currentType,
     hotspots,
@@ -374,6 +379,7 @@ const HotspotEditorModal = ({
           type: hotspotTypes.DYNAMIC,
         }))
       );
+      setSelectedHotspot(demoHotspots?.[0]);
       setLoadingDynamicHotspots(false);
     }
   };

packages/react/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap

@@ -8619,6 +8619,7 @@ Map {
       "onDelete": null,
       "onEditTitle": null,
       "onExport": null,
+      "onFetchDynamicDemoHotspots": [Function],
       "onImageDelete": null,
       "onImport": null,
       "onLayoutChange": null,
@@ -9150,6 +9151,9 @@ Map {
       "onExport": Object {
         "type": "func",
       },
+      "onFetchDynamicDemoHotspots": Object {
+        "type": "func",
+      },
       "onImageDelete": Object {
         "type": "func",
       },