feat(metadata): pass trackEvent callback to metadata components (#4538)

* feat(metadata): pass trackEvent callback to metadata components

* fix(metadata): fix types

* test(metadata): fix storybook test

* test: reduce waitFor timeout

* test: reduce waitFor timeout

---------

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: olehrybak

package.json

@@ -138,7 +138,7 @@
         "@box/frontend": "^11.0.1",
         "@box/item-icon": "^2.32.14",
         "@box/languages": "^1.0.0",
-        "@box/metadata-editor": "^1.61.5",
+        "@box/metadata-editor": "^1.69.6",
         "@box/metadata-filter": "^1.80.23",
         "@box/metadata-view": "^1.53.26",
         "@box/react-virtualized": "^9.22.3-rc-box.10",
@@ -305,7 +305,7 @@
         "@box/copy-input": "^1.40.21",
         "@box/content-field": "^1.40.23",
         "@box/item-icon": "^2.32.14",
-        "@box/metadata-editor": "^1.61.5",
+        "@box/metadata-editor": "^1.69.6",
         "@box/metadata-filter": "^1.80.23",
         "@box/metadata-view": "^1.53.26",
         "@box/react-virtualized": "^9.22.3-rc-box.10",

src/elements/content-sidebar/MetadataInstanceEditor.tsx

@@ -37,6 +37,7 @@ export interface MetadataInstanceEditorProps {
     isConfidenceScoreReviewEnabled?: boolean;
     onSelectMetadataField?: (field: MetadataTemplateField | null) => void;
     selectedMetadataFieldId?: string | null;
+    trackEvent?: (eventName: string, data?: Record<string, unknown>) => void;
 }
 
 const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
@@ -62,6 +63,7 @@ const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
     isConfidenceScoreReviewEnabled = false,
     onSelectMetadataField,
     selectedMetadataFieldId,
+    trackEvent,
 }) => {
     const previewContext: PreviewContextType | null = useContext(PreviewContext);
     const customRef = previewContext?.previewBodyRef?.current;
@@ -92,6 +94,7 @@ const MetadataInstanceEditor: React.FC<MetadataInstanceEditorProps> = ({
             onSelectMetadataField={onSelectMetadataField}
             selectedMetadataFieldId={selectedMetadataFieldId}
             customRef={customRef}
+            trackEvent={trackEvent}
         />
     );
 };

src/elements/content-sidebar/MetadataSidebar.js

@@ -48,6 +48,7 @@ type ExternalProps = {
     registerOpenWarningModalCallback?: (handleWarningModalOpen: (isOpen: boolean) => void) => void,
     onWarningModalDiscard?: () => void,
     onWarningModalClose?: () => void,
+    trackEvent?: (eventName: string, data?: { [string]: any }) => void,
 };
 
 type PropsWithoutContext = {

src/elements/content-sidebar/MetadataSidebarRedesign.tsx

@@ -89,6 +89,7 @@ export interface MetadataSidebarRedesignProps
     registerOpenWarningModalCallback?: (handleWarningModalOpen: (isOpen: boolean) => void) => void;
     onWarningModalDiscard?: () => void;
     onWarningModalClose?: () => void;
+    trackEvent?: (eventName: string, data?: Record<string, unknown>) => void;
 }
 
 function MetadataSidebarRedesign({
@@ -108,6 +109,7 @@ function MetadataSidebarRedesign({
     registerOpenWarningModalCallback,
     onWarningModalDiscard,
     onWarningModalClose,
+    trackEvent,
 }: MetadataSidebarRedesignProps) {
     const { formatMessage } = useIntl();
     const isBoxAiSuggestionsEnabled: boolean = useFeatureEnabled('metadata.aiSuggestions.enabled');
@@ -368,6 +370,7 @@ function MetadataSidebarRedesign({
                             isConfidenceScoreReviewEnabled={isConfidenceScoreReviewEnabled}
                             onSelectMetadataField={handleSelectMetadataField}
                             selectedMetadataFieldId={selectedMetadataFieldId}
+                            trackEvent={trackEvent}
                         />
                     )}
                     {showList && (
@@ -386,6 +389,7 @@ function MetadataSidebarRedesign({
                             templateInstances={templateInstancesList}
                             taxonomyNodeFetcher={taxonomyNodeFetcher}
                             isConfidenceScoreReviewEnabled={isConfidenceScoreReviewEnabled}
+                            trackEvent={trackEvent}
                         />
                     )}
                 </AutofillContextProvider>

src/elements/content-sidebar/stories/tests/MetadataSidebarRedesign-visual.stories.tsx

@@ -717,7 +717,16 @@ export const AcceptAllDismissesReviewNotice: StoryObj<typeof MetadataSidebarRede
             { timeout: 5000 },
         );
 
-        let acceptButtons = canvas.getAllByRole('button', { name: 'Accept extracted value' });
+        let acceptButtons: HTMLElement[] = [];
+
+        await waitFor(
+            () => {
+                acceptButtons = canvas.getAllByRole('button', { name: 'Accept extracted value' });
+                expect(acceptButtons.length).toBeGreaterThanOrEqual(1);
+            },
+            { timeout: 100 },
+        );
+
         await userEvent.click(acceptButtons[0]);
         await waitFor(() => {
             expect(canvas.getByText(/2 fields need review/i)).toBeVisible();

yarn.lock

@@ -1530,10 +1530,10 @@
   resolved "https://registry.yarnpkg.com/@box/languages/-/languages-1.1.2.tgz#cd4266b3da62da18560d881e10b429653186be29"
   integrity sha512-d64TGosx+KRmrLZj4CIyLp42LUiEbgBJ8n8cviMQwTJmfU0g+UwZqLjmQZR1j+Q9D64yV4xHzY9K1t5nInWWeQ==
 
-"@box/metadata-editor@^1.61.5":
-  version "1.61.5"
-  resolved "https://registry.yarnpkg.com/@box/metadata-editor/-/metadata-editor-1.61.5.tgz#91ed9ccd5e910b50c2ff54f77e4a9f2a98913817"
-  integrity sha512-gsZIQWXa0+reWKZG2FMiCT9bnE1xf6asv+NeuhiWi28KTHyu27LTTULDQbS//Q7dTODKTvB4KeZp6u7npCLjYg==
+"@box/metadata-editor@^1.69.6":
+  version "1.69.6"
+  resolved "https://registry.yarnpkg.com/@box/metadata-editor/-/metadata-editor-1.69.6.tgz#56a0f185e4e5b64807b32e8c155812bead8b6598"
+  integrity sha512-pVQD0FyabgpIchYBpVbi44iMz+wzRVW5YeP0FslbfHMpCGJL9lABWWN0aBp68CXRXJbSZXr/4YQUQJ0YsmRmoA==
 
 "@box/metadata-filter@^1.80.23":
   version "1.80.23"