feat: add toolbar badge and correct tooltip to inline resources

contentful · Oct 13, 2023 · 420cece · 420cece
1 parent db569fd
commit 420cece
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 18 deletions.
diff --git a/packages/rich-text/src/Toolbar/components/EmbedEntityWidget.tsx b/packages/rich-text/src/Toolbar/components/EmbedEntityWidget.tsx
@@ -24,6 +24,7 @@ export const EmbedEntityWidget = ({ isDisabled, canInsertBlocks }: EmbedEntityWi
   const onToggleEntityDropdown = () => setEmbedDropdownOpen(!isEmbedDropdownOpen);
 
   const inlineEntryEmbedEnabled = isNodeTypeEnabled(sdk.field, INLINES.EMBEDDED_ENTRY);
+  const inlineResourceEmbedEnabled = isNodeTypeEnabled(sdk.field, INLINES.EMBEDDED_RESOURCE);
   const blockEntryEmbedEnabled =
     isNodeTypeEnabled(sdk.field, BLOCKS.EMBEDDED_ENTRY) && canInsertBlocks;
   const blockResourceEmbedEnabled =
@@ -56,11 +57,13 @@ export const EmbedEntityWidget = ({ isDisabled, canInsertBlocks }: EmbedEntityWi
           onClose={onCloseEntityDropdown}
         />
       )}
-      <EmbeddedInlineToolbarIcon
-        nodeType={INLINES.EMBEDDED_RESOURCE}
-        isDisabled={!!isDisabled || isLinkActive(editor)}
-        onClose={onCloseEntityDropdown}
-      />
+      {inlineResourceEmbedEnabled && (
+        <EmbeddedInlineToolbarIcon
+          nodeType={INLINES.EMBEDDED_RESOURCE}
+          isDisabled={!!isDisabled || isLinkActive(editor)}
+          onClose={onCloseEntityDropdown}
+        />
+      )}
       {blockAssetEmbedEnabled && (
         <EmbeddedBlockToolbarIcon
           isDisabled={!!isDisabled}

diff --git a/packages/rich-text/src/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.tsx b/packages/rich-text/src/plugins/EmbeddedResourceInline/FetchingWrappedResourceInlineCard.tsx
@@ -42,7 +42,7 @@ export function FetchingWrappedResourceInlineCard(props: FetchingWrappedResource
     return <InlineEntryCard isLoading />;
   }
 
-  const { resource: entry, contentType, defaultLocaleCode } = data as ResourceInfo<Entry>;
+  const { resource: entry, contentType, defaultLocaleCode, space } = data as ResourceInfo<Entry>;
 
   const title = getEntryTitle({
     entry,
@@ -57,7 +57,7 @@ export function FetchingWrappedResourceInlineCard(props: FetchingWrappedResource
     <InlineEntryCard
       testId={INLINES.EMBEDDED_RESOURCE}
       isSelected={props.isSelected}
-      title={`${data?.contentType.name}: ${title}`}
+      title={`${data.contentType.name}: ${title} (Space: ${space.name})`}
       status={status}
       actions={[
         <MenuItem key="remove" onClick={props.onRemove} disabled={props.isDisabled} testId="delete">

diff --git a/packages/rich-text/src/plugins/shared/EmbeddedBlockToolbarIcon.tsx b/packages/rich-text/src/plugins/shared/EmbeddedBlockToolbarIcon.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
 
 import { FieldAppSDK } from '@contentful/app-sdk';
-import { Badge, Flex, Icon, Menu } from '@contentful/f36-components';
+import { Flex, Icon, Menu } from '@contentful/f36-components';
 import { AssetIcon, EmbeddedEntryBlockIcon } from '@contentful/f36-icons';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { css } from 'emotion';
 
 import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { useSdkContext } from '../../SdkProvider';
 import { selectEntityAndInsert, selectResourceEntityAndInsert } from '../shared/EmbeddedBlockUtil';
+import { ResourceNewBadge } from './ResourceNewBadge';
 
 export const styles = {
   icon: css({
@@ -61,15 +62,7 @@ export function EmbeddedBlockToolbarIcon({
         />
         <span>
           {type}
-          {nodeType == BLOCKS.EMBEDDED_RESOURCE && (
-            <>
-              {' '}
-              (different space){' '}
-              <Badge variant="primary-filled" size="small">
-                new
-              </Badge>
-            </>
-          )}
+          {nodeType == BLOCKS.EMBEDDED_RESOURCE && <ResourceNewBadge />}
         </span>
       </Flex>
     </Menu.Item>

diff --git a/packages/rich-text/src/plugins/shared/EmbeddedInlineToolbarIcon.tsx b/packages/rich-text/src/plugins/shared/EmbeddedInlineToolbarIcon.tsx
@@ -11,6 +11,7 @@ import { useContentfulEditor } from '../../ContentfulEditorProvider';
 import { moveToTheNextChar } from '../../helpers/editor';
 import { useSdkContext } from '../../SdkProvider';
 import { selectEntityAndInsert, selectResourceEntityAndInsert } from '../shared/EmbeddedInlineUtil';
+import { ResourceNewBadge } from './ResourceNewBadge';
 
 const styles = {
   icon: css({
@@ -69,7 +70,10 @@ export function EmbeddedInlineToolbarIcon({
           variant="secondary"
           className={`rich-text__embedded-entry-list-icon ${styles.icon}`}
         />
-        <span>Inline entry</span>
+        <span>
+          Inline entry
+          {nodeType == INLINES.EMBEDDED_RESOURCE && <ResourceNewBadge />}
+        </span>
       </Flex>
     </Menu.Item>
   );

diff --git a/packages/rich-text/src/plugins/shared/ResourceNewBadge.tsx b/packages/rich-text/src/plugins/shared/ResourceNewBadge.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { Badge } from '@contentful/f36-components';
+
+export const ResourceNewBadge = () => {
+  return (
+    <>
+      {' '}
+      (different space){' '}
+      <Badge variant="primary-filled" size="small">
+        new
+      </Badge>
+    </>
+  );
+};