A new permalink should be generated and shown after using the re-upload feature. (#5547)

Author: fqueze

src/components/app/MenuButtons/Permalink.js

@@ -78,7 +78,7 @@ export class MenuButtonsPermalink extends React.PureComponent<Props, State> {
         <ButtonWithPanel
           buttonClassName="menuButtonsButton menuButtonsButton-hasIcon menuButtonsPermalinkButtonButton"
           label="Permalink"
-          initialOpen={this.props.isNewlyPublished}
+          open={this.props.isNewlyPublished}
           onPanelOpen={this._shortenUrlAndFocusTextFieldOnCompletion}
           onPanelClose={this._onPermalinkPanelClose}
           panelClassName="menuButtonsPermalinkPanel"

src/components/shared/ButtonWithPanel/index.js

@@ -36,9 +36,8 @@ type Props = {|
   +label: string,
   +panelContent: React.Node,
   +panelClassName?: string,
-  // This prop tells the panel to be open by default, but the open/close state is fully
-  // managed by the ButtonWithPanel component.
-  +initialOpen?: boolean,
+  // Setting this prop to true opens the panel.
+  +open?: boolean,
   // The class name of the button input element.
   +buttonClassName?: string,
   +onPanelOpen?: () => mixed,
@@ -57,7 +56,7 @@ export class ButtonWithPanel extends React.PureComponent<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    this.state = { open: !!props.initialOpen };
+    this.state = { open: !!props.open };
   }
 
   componentDidMount() {
@@ -70,6 +69,14 @@ export class ButtonWithPanel extends React.PureComponent<Props, State> {
     }
   }
 
+  componentDidUpdate(prevProps: Props) {
+    // Open the panel when the open prop becomes true.
+    if (!prevProps.open && this.props.open) {
+      this.setState({ open: true });
+      this.openPanel();
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('keydown', this._onKeyDown);
     window.removeEventListener('click', this._onWindowClick);

src/test/components/ButtonWithPanel.test.js

@@ -44,7 +44,7 @@ describe('shared/ButtonWithPanel', () => {
       <ButtonWithPanel
         className="button"
         label="My Button"
-        initialOpen={true}
+        open={true}
         panelClassName="panel"
         panelContent={<div>Panel content</div>}
       />
@@ -73,7 +73,7 @@ describe('shared/ButtonWithPanel', () => {
         <ButtonWithPanel
           className="button"
           label="My Button"
-          initialOpen={true}
+          open={true}
           panelContent={<div data-testid="panel-content">Panel content</div>}
         />
       );

src/test/components/MenuButtonsPermalinks.test.js

@@ -88,4 +88,31 @@ describe('<Permalink>', function () {
     );
     expect(input).toHaveValue(shortUrl);
   });
+
+  it('opens the permalink panel when isNewlyPublished changes to true', async function () {
+    const { dispatch, queryInput, shortUrl, shortUrlPromise } = setup();
+
+    // Initially the panel should not be open
+    expect(queryInput()).toBeFalsy();
+
+    // Simulate a profile being published/re-uploaded by dispatching PROFILE_PUBLISHED
+    act(() => {
+      dispatch({
+        type: 'PROFILE_PUBLISHED',
+        hash: 'newhash',
+        profileName: 'test',
+        prePublishedState: null,
+      });
+    });
+
+    // Wait for the async operations to complete
+    await act(() => shortUrlPromise);
+
+    // The input should now be visible, indicating the panel opened automatically
+    const input = ensureExists(
+      queryInput(),
+      'Expected the permalink panel to open automatically after publishing'
+    );
+    expect(input).toHaveValue(shortUrl);
+  });
 });