fix export page and add style

assembl/static2/css/_assembl_base_styles.scss

@@ -39,6 +39,7 @@
 @import 'components/switchButton';
 @import 'components/socialShare';
 @import 'components/surveyAdmin';
+@import 'components/threadAdmin';
 @import 'components/resourcesCenter';
 @import 'components/header';
 @import 'components/section';

assembl/static2/css/components/surveyAdmin.scss

@@ -1,5 +1,5 @@
 .survey-admin {
-  .survey-admin-export-section {
+  .admin-export-section {
     .admin-content {
       text-align: center;
 

assembl/static2/css/components/threadAdmin.scss

@@ -0,0 +1,21 @@
+.thread-admin {
+  .admin-export-section {
+    .admin-content {
+      text-align: center;
+
+      .form-group {
+        text-align: left;
+        display: inline-block;
+
+        .export-language-dropdown {
+          margin-top: 20px;
+          position: absolute;
+        }
+      }
+    }
+
+    .margin-l {
+      margin-top: 70px;
+    }
+  }
+}

assembl/static2/js/app/components/administration/exportSection.jsx

@@ -67,7 +67,7 @@ class ExportSection extends React.Component<Object, Props, void> {
       annotation
     } = this.props;
     return (
-      <div className="admin-box survey-admin-export-section">
+      <div className="admin-box admin-export-section">
         <SectionTitle
           title={I18n.t('administration.export.sectionTitle')}
           annotation={I18n.t(`administration.export.${annotation}`)}

assembl/static2/js/app/pages/threadAdmin.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
-import ExportSection from '../components/administration/exportSection';
+import { compose, graphql } from 'react-apollo';
+import { connect } from 'react-redux';
 import { get } from '../utils/routeMap';
+import ExportSection from '../components/administration/exportSection';
+import Navbar from '../components/administration/navbar';
+import DiscussionPreferenceLanguage from '../graphql/DiscussionPreferenceLanguage.graphql';
 
 class ThreadAdmin extends React.Component {
   constructor(props) {
@@ -12,16 +16,29 @@ class ThreadAdmin extends React.Component {
     };
   }
 
+  componentDidMount() {
+    this.props.router.setRouteLeaveHook(this.props.route, this.routerWillLeave);
+  }
+
+  componentWillUnmount() {
+    this.props.router.setRouteLeaveHook(this.props.route, null);
+  }
+
   handleExportLocaleChange = (locale) => {
     this.setState({ exportLocale: locale });
   };
 
+  handleTranslationChange = (shouldTranslate) => {
+    this.setState({ translate: shouldTranslate });
+  };
+
   render() {
     const { section, languages, debateId } = this.props;
     const { translate } = this.state;
     const exportLocale = this.state.exportLocale || (languages && languages[0].locale);
     const translation = translate && exportLocale ? `?lang=${exportLocale}` : '?'; // FIXME: using '' instead of '?' does not work
     const exportLink = get('exportThreadMulticolumnData', { debateId: debateId, translation: translation });
+    const currentStep = parseInt(section, 10);
     return (
       <div className="thread-admin">
         {section === '1' && (
@@ -37,10 +54,44 @@ class ThreadAdmin extends React.Component {
             annotation="threadAnnotation"
           />
         )}
-      )
+        {!isNaN(currentStep) && (
+          <Navbar currentStep={currentStep} totalSteps={1} phaseIdentifier="thread" />
+        )}
       </div>
     );
   }
 }
 
-export default ThreadAdmin;
+const mapStateToProps = ({ context, i18n }) => ({
+  debateId: context.debateId,
+  i18n: i18n
+});
+
+export default compose(
+  connect(mapStateToProps),
+  graphql(DiscussionPreferenceLanguage, {
+    options: ({ i18n: { locale } }) => ({
+      variables: {
+        inLocale: locale
+      }
+    }),
+    props: ({ data }) => {
+      if (data.loading) {
+        return {
+          loading: true
+        };
+      }
+
+      if (data.error) {
+        return {
+          hasErrors: true,
+          loading: false
+        };
+      }
+      return {
+        hasErrors: false,
+        languages: data.discussionPreferences.languages
+      };
+    }
+  })
+)(ThreadAdmin);

assembl/static2/js/app/routes.jsx

@@ -72,9 +72,9 @@ const AdminChild = (props) => {
   case 'survey':
     return <SurveyAdmin {...props} thematicId={props.location.query.thematic} section={props.location.query.section} />;
   case 'thread':
-    return <ThreadAdmin {...props} />;
+    return <ThreadAdmin {...props} section={props.location.query.section} />;
   case 'multiColumns':
-    return <MultiColumnsAdmin {...props} />;
+    return <MultiColumnsAdmin {...props} section={props.location.query.section} />;
   case 'voteSession':
     return <VoteSessionAdmin {...props} section={props.location.query.section} />;
   case 'resourcesCenter':

assembl/static2/tests/unit/components/administration/__snapshots__/exportSection.spec.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ExportSection component should render an ExportSection component with languages options 1`] = `
 <div
-  className="admin-box survey-admin-export-section"
+  className="admin-box admin-export-section"
 >
   <SectionTitle
     annotation="Default Annotation"
@@ -56,7 +56,7 @@ exports[`ExportSection component should render an ExportSection component with l
 
 exports[`ExportSection component should render an ExportSection component without languages options 1`] = `
 <div
-  className="admin-box survey-admin-export-section"
+  className="admin-box admin-export-section"
 >
   <SectionTitle
     annotation="Default Annotation"