Merge commit '71db616fed' into kb_migration

app/javascript/mastodon/features/ui/components/embed_modal.jsx

@@ -14,7 +14,7 @@ const messages = defineMessages({
 class EmbedModal extends ImmutablePureComponent {
 
   static propTypes = {
-    url: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
     onError: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -26,11 +26,11 @@ class EmbedModal extends ImmutablePureComponent {
   };
 
   componentDidMount () {
-    const { url } = this.props;
+    const { id } = this.props;
 
     this.setState({ loading: true });
 
-    api().post('/api/web/embed', { url }).then(res => {
+    api().get(`/api/web/embeds/${id}`).then(res => {
       this.setState({ loading: false, oembed: res.data });
 
       const iframeDocument = this.iframe.contentWindow.document;

app/javascript/mastodon/features/ui/components/link_footer.jsx

@@ -38,6 +38,7 @@ class LinkFooter extends PureComponent {
   };
 
   static propTypes = {
+    multiColumn: PropTypes.bool,
     onLogout: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
@@ -53,6 +54,7 @@ class LinkFooter extends PureComponent {
 
   render () {
     const { signedIn, permissions } = this.context.identity;
+    const { multiColumn } = this.props;
 
     const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS);
     const canProfileDirectory = profileDirectory;
@@ -64,7 +66,7 @@ class LinkFooter extends PureComponent {
         <p>
           <strong>{domain}</strong>:
           {' '}
-          <Link to='/about'><FormattedMessage id='footer.about' defaultMessage='About' /></Link>
+          <Link to='/about' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.about' defaultMessage='About' /></Link>
           {statusPageUrl && (
             <>
               {DividingCircle}
@@ -84,7 +86,7 @@ class LinkFooter extends PureComponent {
             </>
           )}
           {DividingCircle}
-          <Link to='/privacy-policy'><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link>
+          <Link to='/privacy-policy' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link>
         </p>
 
         <p>

app/javascript/mastodon/features/ui/components/navigation_panel.jsx

@@ -7,7 +7,8 @@ import { Link } from 'react-router-dom';
 
 import { WordmarkLogo } from 'mastodon/components/logo';
 import NavigationPortal from 'mastodon/components/navigation_portal';
-import { timelinePreview, showTrends } from 'mastodon/initial_state';
+import { timelinePreview, trendsEnabled } from 'mastodon/initial_state';
+import { transientSingleColumn } from 'mastodon/is_mobile';
 
 import ColumnLink from './column_link';
 import DisabledAccountBanner from './disabled_account_banner';
@@ -30,6 +31,7 @@ const messages = defineMessages({
   followsAndFollowers: { id: 'navigation_bar.follows_and_followers', defaultMessage: 'Follows and followers' },
   about: { id: 'navigation_bar.about', defaultMessage: 'About' },
   search: { id: 'navigation_bar.search', defaultMessage: 'Search' },
+  advancedInterface: { id: 'navigation_bar.advanced_interface', defaultMessage: 'Open in advanced web interface' },
 });
 
 class NavigationPanel extends Component {
@@ -51,7 +53,7 @@ class NavigationPanel extends Component {
     const { intl } = this.props;
     const { signedIn, disabledAccountId } = this.context.identity;
 
-    const explorer = (showTrends ? (
+    const explorer = (trendsEnabled ? (
       <ColumnLink transparent to='/explore' icon='hashtag' text={intl.formatMessage(messages.explore)} />
     ) : (
       <ColumnLink transparent to='/search' icon='search' text={intl.formatMessage(messages.search)} />
@@ -61,6 +63,12 @@ class NavigationPanel extends Component {
       <div className='navigation-panel'>
         <div className='navigation-panel__logo'>
           <Link to='/' className='column-link column-link--logo'><WordmarkLogo /></Link>
+
+          {transientSingleColumn && (
+            <a href={`/deck${location.pathname}`} className='button button--block'>
+              {intl.formatMessage(messages.advancedInterface)}
+            </a>
+          )}
           <hr />
         </div>
 

app/javascript/mastodon/features/ui/components/report_modal.jsx

@@ -45,25 +45,26 @@ class ReportModal extends ImmutablePureComponent {
   state = {
     step: 'category',
     selectedStatusIds: OrderedSet(this.props.statusId ? [this.props.statusId] : []),
+    selectedDomains: OrderedSet(),
     comment: '',
     category: null,
     selectedRuleIds: OrderedSet(),
-    forward: true,
     isSubmitting: false,
     isSubmitted: false,
   };
 
   handleSubmit = () => {
     const { dispatch, accountId } = this.props;
-    const { selectedStatusIds, comment, category, selectedRuleIds, forward } = this.state;
+    const { selectedStatusIds, selectedDomains, comment, category, selectedRuleIds } = this.state;
 
     this.setState({ isSubmitting: true });
 
     dispatch(submitReport({
       account_id: accountId,
       status_ids: selectedStatusIds.toArray(),
+      selected_domains: selectedDomains.toArray(),
       comment,
-      forward,
+      forward: selectedDomains.size > 0,
       category,
       rule_ids: selectedRuleIds.toArray(),
     }, this.handleSuccess, this.handleFail));
@@ -87,13 +88,19 @@ class ReportModal extends ImmutablePureComponent {
     }
   };
 
-  handleRuleToggle = (ruleId, checked) => {
-    const { selectedRuleIds } = this.state;
-
+  handleDomainToggle = (domain, checked) => {
     if (checked) {
-      this.setState({ selectedRuleIds: selectedRuleIds.add(ruleId) });
+      this.setState((state) => ({ selectedDomains: state.selectedDomains.add(domain) }));
     } else {
-      this.setState({ selectedRuleIds: selectedRuleIds.remove(ruleId) });
+      this.setState((state) => ({ selectedDomains: state.selectedDomains.remove(domain) }));
+    }
+  };
+
+  handleRuleToggle = (ruleId, checked) => {
+    if (checked) {
+      this.setState((state) => ({ selectedRuleIds: state.selectedRuleIds.add(ruleId) }));
+    } else {
+      this.setState((state) => ({ selectedRuleIds: state.selectedRuleIds.remove(ruleId) }));
     }
   };
 
@@ -105,10 +112,6 @@ class ReportModal extends ImmutablePureComponent {
     this.setState({ comment });
   };
 
-  handleChangeForward = forward => {
-    this.setState({ forward });
-  };
-
   handleNextStep = step => {
     this.setState({ step });
   };
@@ -136,8 +139,8 @@ class ReportModal extends ImmutablePureComponent {
       step,
       selectedStatusIds,
       selectedRuleIds,
+      selectedDomains,
       comment,
-      forward,
       category,
       isSubmitting,
       isSubmitted,
@@ -185,10 +188,11 @@ class ReportModal extends ImmutablePureComponent {
           isSubmitting={isSubmitting}
           isRemote={isRemote}
           comment={comment}
-          forward={forward}
           domain={domain}
           onChangeComment={this.handleChangeComment}
-          onChangeForward={this.handleChangeForward}
+          statusIds={selectedStatusIds}
+          selectedDomains={selectedDomains}
+          onToggleDomain={this.handleDomainToggle}
         />
       );
       break;

app/javascript/mastodon/features/ui/containers/notifications_container.js

@@ -7,26 +7,27 @@ import { NotificationStack } from 'react-notification';
 import { dismissAlert } from '../../../actions/alerts';
 import { getAlerts } from '../../../selectors';
 
-const mapStateToProps = (state, { intl }) => {
-  const notifications = getAlerts(state);
+const formatIfNeeded = (intl, message, values) => {
+  if (typeof message === 'object') {
+    return intl.formatMessage(message, values);
+  }
 
-  notifications.forEach(notification => ['title', 'message'].forEach(key => {
-    const value = notification[key];
-
-    if (typeof value === 'object') {
-      notification[key] = intl.formatMessage(value, notification[`${key}_values`]);
-    }
-  }));
-
-  return { notifications };
+  return message;
 };
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    onDismiss: alert => {
-      dispatch(dismissAlert(alert));
-    },
-  };
-};
+const mapStateToProps = (state, { intl }) => ({
+  notifications: getAlerts(state).map(alert => ({
+    ...alert,
+    action: formatIfNeeded(intl, alert.action, alert.values),
+    title: formatIfNeeded(intl, alert.title, alert.values),
+    message: formatIfNeeded(intl, alert.message, alert.values),
+  })),
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  onDismiss (alert) {
+    dispatch(dismissAlert(alert));
+  },
+});
 
 export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationStack));

app/javascript/mastodon/features/ui/index.jsx

@@ -22,7 +22,7 @@ import { clearHeight } from '../../actions/height_cache';
 import { expandNotifications } from '../../actions/notifications';
 import { fetchServer, fetchServerTranslationLanguages } from '../../actions/server';
 import { expandHomeTimeline } from '../../actions/timelines';
-import initialState, { me, owner, singleUserMode, showTrends, trendsAsLanding } from '../../initial_state';
+import initialState, { me, owner, singleUserMode, trendsEnabled, trendsAsLanding } from '../../initial_state';
 
 import BundleColumnError from './components/bundle_column_error';
 import Header from './components/header';
@@ -132,11 +132,11 @@ class SwitchingColumnsArea extends PureComponent {
   static propTypes = {
     children: PropTypes.node,
     location: PropTypes.object,
-    mobile: PropTypes.bool,
+    singleColumn: PropTypes.bool,
   };
 
   UNSAFE_componentWillMount () {
-    if (this.props.mobile) {
+    if (this.props.singleColumn) {
       document.body.classList.toggle('layout-single-column', true);
       document.body.classList.toggle('layout-multiple-columns', false);
     } else {
@@ -150,9 +150,9 @@ class SwitchingColumnsArea extends PureComponent {
       this.node.handleChildrenContentChange();
     }
 
-    if (prevProps.mobile !== this.props.mobile) {
-      document.body.classList.toggle('layout-single-column', this.props.mobile);
-      document.body.classList.toggle('layout-multiple-columns', !this.props.mobile);
+    if (prevProps.singleColumn !== this.props.singleColumn) {
+      document.body.classList.toggle('layout-single-column', this.props.singleColumn);
+      document.body.classList.toggle('layout-multiple-columns', !this.props.singleColumn);
     }
   }
 
@@ -163,30 +163,34 @@ class SwitchingColumnsArea extends PureComponent {
   };
 
   render () {
-    const { children, mobile } = this.props;
+    const { children, singleColumn } = this.props;
     const { signedIn } = this.context.identity;
+    const pathName = this.props.location.pathname;
 
     let redirect;
 
     if (signedIn) {
-      if (mobile) {
+      if (singleColumn) {
         redirect = <Redirect from='/' to='/home' exact />;
       } else {
-        redirect = <Redirect from='/' to='/getting-started' exact />;
+        redirect = <Redirect from='/' to='/deck/getting-started' exact />;
       }
     } else if (singleUserMode && owner && initialState?.accounts[owner]) {
       redirect = <Redirect from='/' to={`/@${initialState.accounts[owner].username}`} exact />;
-    } else if (showTrends && trendsAsLanding) {
+    } else if (trendsEnabled && trendsAsLanding) {
       redirect = <Redirect from='/' to='/explore' exact />;
     } else {
       redirect = <Redirect from='/' to='/about' exact />;
     }
 
     return (
-      <ColumnsAreaContainer ref={this.setRef} singleColumn={mobile}>
+      <ColumnsAreaContainer ref={this.setRef} singleColumn={singleColumn}>
         <WrappedSwitch>
           {redirect}
 
+          {singleColumn ? <Redirect from='/deck' to='/home' exact /> : null}
+          {singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={pathName.slice(5)} /> : null}
+
           <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
           <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
           <WrappedRoute path='/about' component={About} content={children} />
@@ -592,7 +596,7 @@ class UI extends PureComponent {
         <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef} style={{ pointerEvents: dropdownMenuIsOpen ? 'none' : null }}>
           <Header />
 
-          <SwitchingColumnsArea location={location} mobile={layout === 'mobile' || layout === 'single-column'}>
+          <SwitchingColumnsArea location={location} singleColumn={layout === 'mobile' || layout === 'single-column'}>
             {children}
           </SwitchingColumnsArea>
 

app/javascript/mastodon/features/ui/util/react_router_helpers.jsx

@@ -11,13 +11,21 @@ import BundleContainer from '../containers/bundle_container';
 
 // Small wrapper to pass multiColumn to the route components
 export class WrappedSwitch extends PureComponent {
+  static contextTypes = {
+    router: PropTypes.object,
+  };
 
   render () {
     const { multiColumn, children } = this.props;
+    const { location } = this.context.router.route;
+
+    const decklessLocation = multiColumn && location.pathname.startsWith('/deck')
+      ? {...location, pathname: location.pathname.slice(5)}
+      : location;
 
     return (
-      <Switch>
-        {Children.map(children, child => cloneElement(child, { multiColumn }))}
+      <Switch location={decklessLocation}>
+        {Children.map(children, child => child ? cloneElement(child, { multiColumn }) : null)}
       </Switch>
     );
   }