Merge pull request #29076 from code-dot-org/refactor-redirect-dialog

Refactor Redirect Dialog for Open Block

apps/src/applab/AppLabView.jsx

@@ -12,7 +12,7 @@ import CodeWorkspace from '../templates/CodeWorkspace';
 import DataWorkspace from '../storage/dataBrowser/DataWorkspace';
 import ProtectedDesignWorkspace from './ProtectedDesignWorkspace';
 import VisualizationResizeBar from '../lib/ui/VisualizationResizeBar';
-import RedirectDialog from '@cdo/apps/applab/RedirectDialog';
+import ExternalRedirectDialog from '@cdo/apps/applab/ExternalRedirectDialog';
 
 /**
  * Top-level React wrapper for App Lab.
@@ -46,7 +46,7 @@ class AppLabView extends React.Component {
       <StudioAppWrapper>
         <ImportProjectDialog />
         <ImportScreensDialog />
-        <RedirectDialog />
+        <ExternalRedirectDialog />
         <ApplabVisualizationColumn
           isEditingProject={this.props.isEditingProject}
           screenIds={this.props.screenIds}

apps/src/applab/RedirectDialog.jsx → apps/src/applab/ExternalRedirectDialog.jsx

@@ -8,7 +8,14 @@ import {connect} from 'react-redux';
 import {actions} from './redux/applab';
 import {studio} from '@cdo/apps/lib/util/urlHelpers';
 
-class RedirectDialog extends React.Component {
+const styles = {
+  title: {
+    display: 'inline',
+    wordWrap: 'break-word'
+  }
+};
+
+class ExternalRedirectDialog extends React.Component {
   static propTypes = {
     handleClose: PropTypes.func,
     redirects: PropTypes.array
@@ -26,7 +33,7 @@ class RedirectDialog extends React.Component {
       title = i18n.redirectTitle();
       body = (
         <div>
-          <h2>{i18n.redirectConfirm({url: url})}</h2>
+          <h2 style={styles.title}>{i18n.redirectConfirm({url: url})}</h2>
           <p>
             {i18n.redirectExplanation()}
             <span>
@@ -77,7 +84,7 @@ class RedirectDialog extends React.Component {
   }
 }
 
-export const UnconnectedRedirectDialog = RedirectDialog;
+export const UnconnectedExternalRedirectDialog = ExternalRedirectDialog;
 export default connect(
   state => ({
     redirects: state.redirectDisplay
@@ -87,4 +94,4 @@ export default connect(
       dispatch(actions.dismissRedirectNotice());
     }
   })
-)(UnconnectedRedirectDialog);
+)(UnconnectedExternalRedirectDialog);

apps/src/applab/ExternalRedirectDialog.story.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {UnconnectedExternalRedirectDialog as ExternalRedirectDialog} from '@cdo/apps/applab/ExternalRedirectDialog';
+
+export default storybook => {
+  storybook.storiesOf('ExternalRedirectDialog', module).addStoryTable([
+    {
+      name: 'Approved Site',
+      story: () => (
+        <ExternalRedirectDialog
+          handleClose={() => {}}
+          redirects={[
+            {
+              url:
+                'www.google.com/super_duper/long_url/should_be_wrapped/to-the-next-line.html',
+              approved: true
+            }
+          ]}
+        />
+      )
+    },
+    {
+      name: 'Rejected Site',
+      story: () => (
+        <ExternalRedirectDialog
+          handleClose={() => {}}
+          redirects={[{url: 'www.google.com', approved: false}]}
+        />
+      )
+    }
+  ]);
+};