feat(content-sidebar): programmatic refresh for sidebar panels (#1561)

* feat(content-sidebar): programmatic refresh for sidebar panels

* fix(content-sidebar): update tests for programmatic refresh

* fix(content-sidebar): address comments and fix flow

* fix(content-sidebar): address comments

* fix(content-sidebar): address comments

* fix(content-sidebar): add comment for generic flow type

* fix(content-sidebar): use more general flow type due to code splitting

* fix(content-sidebar): fix indentation

Author: swfree

src/elements/common/api-context/withAPIContext.js

@@ -6,8 +6,9 @@
 import * as React from 'react';
 import APIContext from './APIContext';
 
-const withAPIContext = (WrappedComponent: React.ComponentType<any>) => (props: any) => (
-    <APIContext.Consumer>{api => <WrappedComponent {...props} api={api} />}</APIContext.Consumer>
-);
+const withAPIContext = (WrappedComponent: React.ComponentType<any>) =>
+    React.forwardRef<Object, React.Ref<any>>((props: Object, ref: React.Ref<any>) => (
+        <APIContext.Consumer>{api => <WrappedComponent ref={ref} {...props} api={api} />}</APIContext.Consumer>
+    ));
 
 export default withAPIContext;

src/elements/content-preview/ContentPreview.js

@@ -62,7 +62,6 @@ type Props = {
     collection: Array<string | BoxItem>,
     contentOpenWithProps: ContentOpenWithProps,
     contentSidebarProps: ContentSidebarProps,
-    contentSidebarRef: React.Ref<any>,
     enableThumbnailsSidebar: boolean,
     features?: FeatureConfig,
     fileId?: string,
@@ -158,6 +157,9 @@ class ContentPreview extends React.PureComponent<Props, State> {
 
     api: API;
 
+    // Defines a generic type for ContentSidebar, since an import would interfere with code splitting
+    contentSidebar: { current: null | { refresh: Function } } = React.createRef();
+
     previewContainer: ?HTMLDivElement;
 
     mouseMoveTimeoutID: TimeoutID;
@@ -1083,6 +1085,19 @@ class ContentPreview extends React.PureComponent<Props, State> {
         this.previewContainer = container;
     };
 
+    /**
+     * Refreshes the content sidebar panel
+     *
+     * @return {void}
+     */
+    refreshSidebar(): void {
+        const { current: contentSidebar } = this.contentSidebar;
+
+        if (contentSidebar) {
+            contentSidebar.refresh();
+        }
+    }
+
     /**
      * Renders the file preview
      *
@@ -1097,7 +1112,6 @@ class ContentPreview extends React.PureComponent<Props, State> {
             messages,
             className,
             contentSidebarProps,
-            contentSidebarRef,
             contentOpenWithProps,
             hasHeader,
             history,
@@ -1191,7 +1205,7 @@ class ContentPreview extends React.PureComponent<Props, State> {
                                 history={history}
                                 isDefaultOpen={isLarge || isVeryLarge}
                                 language={language}
-                                ref={contentSidebarRef}
+                                ref={this.contentSidebar}
                                 sharedLink={sharedLink}
                                 sharedLinkPassword={sharedLinkPassword}
                                 requestInterceptor={requestInterceptor}

src/elements/content-sidebar/ActivitySidebar.js

@@ -46,7 +46,6 @@ type PropsWithoutContext = {
     file: BoxItem,
     isDisabled: boolean,
     onVersionHistoryClick?: Function,
-    refreshIdentity?: boolean,
     translations?: Translations,
 } & ExternalProps &
     WithLoggerProps;
@@ -104,13 +103,6 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         this.fetchCurrentUser(currentUser);
     }
 
-    componentDidUpdate({ refreshIdentity: prevRefreshIdentity }: Props) {
-        const { refreshIdentity } = this.props;
-        if (refreshIdentity !== prevRefreshIdentity) {
-            this.fetchFeedItems(true);
-        }
-    }
-
     /**
      * Fetches a Users info
      *
@@ -540,6 +532,10 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         });
     };
 
+    refresh(): void {
+        this.fetchFeedItems(true);
+    }
+
     renderAddTaskButton = () => {
         const { isDisabled } = this.props;
         const { approverSelectorContacts } = this.state;

src/elements/content-sidebar/ContentSidebar.js

@@ -71,7 +71,6 @@ type State = {
     file?: BoxItem,
     isLoading: boolean,
     metadataEditors?: Array<MetadataEditor>,
-    refreshIdentity?: boolean,
 };
 
 const MARK_NAME_JS_READY = `${ORIGIN_CONTENT_SIDEBAR}_${EVENT_JS_READY}`;
@@ -85,6 +84,8 @@ class ContentSidebar extends React.Component<Props, State> {
 
     api: API;
 
+    sidebarRef: Sidebar;
+
     static defaultProps = {
         activitySidebarProps: {},
         apiHost: DEFAULT_HOSTNAME_API,
@@ -285,8 +286,14 @@ class ContentSidebar extends React.Component<Props, State> {
         }
     }
 
+    /**
+     * Refreshes the sidebar panel
+     * @returns {void}
+     */
     refresh(): void {
-        this.setState(({ refreshIdentity }: State) => ({ refreshIdentity: !refreshIdentity }));
+        if (this.sidebarRef) {
+            this.sidebarRef.refresh();
+        }
     }
 
     /**
@@ -321,7 +328,7 @@ class ContentSidebar extends React.Component<Props, State> {
             onVersionHistoryClick,
             versionsSidebarProps,
         }: Props = this.props;
-        const { file, isLoading, metadataEditors, refreshIdentity }: State = this.state;
+        const { file, isLoading, metadataEditors }: State = this.state;
         const initialPath = defaultView.charAt(0) === '/' ? defaultView : `/${defaultView}`;
 
         if (!file || !fileId || !SidebarUtils.shouldRenderSidebar(this.props, file, metadataEditors)) {
@@ -353,8 +360,10 @@ class ContentSidebar extends React.Component<Props, State> {
                             metadataSidebarProps={metadataSidebarProps}
                             onVersionChange={onVersionChange}
                             onVersionHistoryClick={onVersionHistoryClick}
-                            refreshIdentity={refreshIdentity}
                             versionsSidebarProps={versionsSidebarProps}
+                            wrappedComponentRef={ref => {
+                                this.sidebarRef = ref;
+                            }}
                         />
                     </SidebarRouter>
                 </APIContext.Provider>

src/elements/content-sidebar/DetailsSidebar.js

@@ -48,7 +48,6 @@ type ExternalProps = {
     onClassificationClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
     onRetentionPolicyExtendClick?: Function,
     onVersionHistoryClick?: Function,
-    refreshIdentity?: boolean,
     retentionPolicy?: Object,
 } & ErrorContextProps &
     WithLoggerProps;
@@ -99,8 +98,8 @@ class DetailsSidebar extends React.PureComponent<Props, State> {
         }
     }
 
-    componentDidUpdate({ hasAccessStats: prevHasAccessStats, refreshIdentity: prevRefreshIdentity }: Props) {
-        const { hasAccessStats, refreshIdentity } = this.props;
+    componentDidUpdate({ hasAccessStats: prevHasAccessStats }: Props) {
+        const { hasAccessStats } = this.props;
         // Component visibility props such as hasAccessStats can sometimes be flipped after an async call
         const hasAccessStatsChanged = prevHasAccessStats !== hasAccessStats;
         if (hasAccessStatsChanged) {
@@ -114,10 +113,6 @@ class DetailsSidebar extends React.PureComponent<Props, State> {
                 });
             }
         }
-
-        if (refreshIdentity !== prevRefreshIdentity) {
-            this.fetchAccessStats();
-        }
     }
 
     /**
@@ -309,6 +304,10 @@ class DetailsSidebar extends React.PureComponent<Props, State> {
         );
     }
 
+    refresh(): void {
+        this.fetchAccessStats();
+    }
+
     render() {
         const {
             classification,

src/elements/content-sidebar/MetadataSidebar.js

@@ -42,7 +42,6 @@ type ExternalProps = {
 
 type PropsWithoutContext = {
     fileId: string,
-    refreshIdentity?: boolean,
 } & ExternalProps;
 
 type Props = {
@@ -82,13 +81,6 @@ class MetadataSidebar extends React.PureComponent<Props, State> {
         this.fetchFile();
     }
 
-    componentDidUpdate({ refreshIdentity: prevRefreshIdentity }: Props) {
-        const { refreshIdentity } = this.props;
-        if (refreshIdentity !== prevRefreshIdentity) {
-            this.fetchMetadata();
-        }
-    }
-
     /**
      * Common error callback
      *
@@ -380,6 +372,10 @@ class MetadataSidebar extends React.PureComponent<Props, State> {
         });
     }
 
+    refresh(): void {
+        this.fetchMetadata();
+    }
+
     render() {
         const { editors, file, error, isLoading, templates }: State = this.state;
         const showEditor = !!file && !!templates && !!editors;

src/elements/content-sidebar/Sidebar.js

@@ -47,7 +47,6 @@ type Props = {
     metadataSidebarProps: MetadataSidebarProps,
     onVersionChange?: Function,
     onVersionHistoryClick?: Function,
-    refreshIdentity?: boolean,
     versionsSidebarProps: VersionsSidebarProps,
 };
 
@@ -69,6 +68,8 @@ class Sidebar extends React.Component<Props, State> {
 
     props: Props;
 
+    sidebarPanels: { current: null | SidebarPanels } = React.createRef();
+
     state: State;
 
     store: LocalStore = new LocalStore();
@@ -164,6 +165,18 @@ class Sidebar extends React.Component<Props, State> {
         return this.isForced() !== null;
     }
 
+    /**
+     * Refreshes the sidebar panel
+     * @returns {void}
+     */
+    refresh(): void {
+        const { current: sidebarPanels } = this.sidebarPanels;
+
+        if (sidebarPanels) {
+            sidebarPanels.refresh();
+        }
+    }
+
     /**
      * Helper to set the local store open state based on the location open state, if defined
      */
@@ -193,7 +206,6 @@ class Sidebar extends React.Component<Props, State> {
             metadataEditors,
             metadataSidebarProps,
             onVersionChange,
-            refreshIdentity,
             versionsSidebarProps,
         }: Props = this.props;
         const isOpen = this.isForcedSet() ? this.isForcedOpen() : !!isDefaultOpen;
@@ -242,7 +254,7 @@ class Sidebar extends React.Component<Props, State> {
                             metadataSidebarProps={metadataSidebarProps}
                             onVersionChange={onVersionChange}
                             onVersionHistoryClick={onVersionHistoryClick}
-                            refreshIdentity={refreshIdentity}
+                            ref={this.sidebarPanels}
                             versionsSidebarProps={versionsSidebarProps}
                         />
                     </React.Fragment>