From 420ceced69d6202076becfc6b6909133c43ba8b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marta=20Sieros=C5=82awska?=
 <msieroslawska@users.noreply.github.com>
Date: Fri, 13 Oct 2023 16:36:07 +0200
Subject: [PATCH] feat: add toolbar badge and correct tooltip to inline
 resources

---
 .../src/Toolbar/components/EmbedEntityWidget.tsx  | 13 ++++++++-----
 .../FetchingWrappedResourceInlineCard.tsx         |  4 ++--
 .../plugins/shared/EmbeddedBlockToolbarIcon.tsx   | 13 +++----------
 .../plugins/shared/EmbeddedInlineToolbarIcon.tsx  |  6 +++++-
 .../src/plugins/shared/ResourceNewBadge.tsx       | 15 +++++++++++++++
 5 files changed, 33 insertions(+), 18 deletions(-)
 create mode 100644 packages/rich-text/src/plugins/shared/ResourceNewBadge.tsx

diff --git a/packages/rich-text/src/Toolbar/components/EmbedEntityWidget.tsx b/packages/rich-text/src/Toolbar/components/EmbedEntityWidget.tsx
index ffee0cff7..6977ff4f9 100644
--- 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
index f4b78cbc0..2bffd4143 100644
--- 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
index d76417ed8..3a7f77dd6 100644
--- a/packages/rich-text/src/plugins/shared/EmbeddedBlockToolbarIcon.tsx
+++ b/packages/rich-text/src/plugins/shared/EmbeddedBlockToolbarIcon.tsx
@@ -1,7 +1,7 @@
 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';
@@ -9,6 +9,7 @@ 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
index 6ebf30f56..2d6d46b90 100644
--- 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
new file mode 100644
index 000000000..0f82f444c
--- /dev/null
+++ 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>
+    </>
+  );
+};