Merge branch 'compose-form-features' into 'develop'

Compose form features

See merge request soapbox-pub/soapbox-fe!1074

app/soapbox/features/compose/components/compose_form.js

@@ -83,6 +83,7 @@ export default class ComposeForm extends ImmutablePureComponent {
     isModalOpen: PropTypes.bool,
     clickableAreaRef: PropTypes.object,
     scheduledAt: PropTypes.instanceOf(Date),
+    features: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -254,7 +255,7 @@ export default class ComposeForm extends ImmutablePureComponent {
   }
 
   render() {
-    const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen, maxTootChars, scheduledStatusCount } = this.props;
+    const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen, maxTootChars, scheduledStatusCount, features } = this.props;
     const condensed = shouldCondense && !this.state.composeFocused && this.isEmpty() && !this.props.isUploading;
     const disabled = this.props.isSubmitting;
     const text     = [this.props.spoilerText, countableText(this.props.text)].join('');
@@ -366,12 +367,12 @@ export default class ComposeForm extends ImmutablePureComponent {
 
         <div className='compose-form__buttons-wrapper'>
           <div className='compose-form__buttons'>
-            <UploadButtonContainer />
+            {features.media && <UploadButtonContainer />}
-            <PollButtonContainer />
+            {features.polls && <PollButtonContainer />}
-            <PrivacyDropdownContainer />
+            {features.privacyScopes && <PrivacyDropdownContainer />}
-            <ScheduleButtonContainer />
+            {features.scheduledStatuses && <ScheduleButtonContainer />}
-            <SpoilerButtonContainer />
+            {features.spoilers && <SpoilerButtonContainer />}
-            <MarkdownButtonContainer />
+            {features.richText && <MarkdownButtonContainer />}
           </div>
           {maxTootChars && (
             <div className='compose-form__counter'>

app/soapbox/features/compose/components/markdown_button.js

@@ -17,7 +17,6 @@ class MarkdownButton extends React.PureComponent {
     active: PropTypes.bool,
     onClick: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-    unavailable: PropTypes.bool,
   };
 
   handleClick = () => {
@@ -25,11 +24,7 @@ class MarkdownButton extends React.PureComponent {
   }
 
   render() {
-    const { intl, active, unavailable } = this.props;
+    const { intl, active } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
 
     return (
       <div className='compose-form__markdown-button'>

app/soapbox/features/compose/containers/compose_form_container.js

@@ -1,6 +1,8 @@
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { getFeatures } from 'soapbox/utils/features';
+
 import {
   changeCompose,
   submitCompose,
@@ -13,24 +15,29 @@ import {
 } from '../../../actions/compose';
 import ComposeForm from '../components/compose_form';
 
-const mapStateToProps = state => ({
+const mapStateToProps = state => {
-  text: state.getIn(['compose', 'text']),
+  const instance = state.get('instance');
-  suggestions: state.getIn(['compose', 'suggestions']),
+
-  spoiler: state.getIn(['compose', 'spoiler']),
+  return {
-  spoilerText: state.getIn(['compose', 'spoiler_text']),
+    text: state.getIn(['compose', 'text']),
-  privacy: state.getIn(['compose', 'privacy']),
+    suggestions: state.getIn(['compose', 'suggestions']),
-  focusDate: state.getIn(['compose', 'focusDate']),
+    spoiler: state.getIn(['compose', 'spoiler']),
-  caretPosition: state.getIn(['compose', 'caretPosition']),
+    spoilerText: state.getIn(['compose', 'spoiler_text']),
-  isSubmitting: state.getIn(['compose', 'is_submitting']),
+    privacy: state.getIn(['compose', 'privacy']),
-  isChangingUpload: state.getIn(['compose', 'is_changing_upload']),
+    focusDate: state.getIn(['compose', 'focusDate']),
-  isUploading: state.getIn(['compose', 'is_uploading']),
+    caretPosition: state.getIn(['compose', 'caretPosition']),
-  showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
+    isSubmitting: state.getIn(['compose', 'is_submitting']),
-  anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
+    isChangingUpload: state.getIn(['compose', 'is_changing_upload']),
-  isModalOpen: state.get('modals').size && state.get('modals').last().modalType === 'COMPOSE',
+    isUploading: state.getIn(['compose', 'is_uploading']),
-  maxTootChars: state.getIn(['instance', 'configuration', 'statuses', 'max_characters']),
+    showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
-  scheduledAt: state.getIn(['compose', 'schedule']),
+    anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
-  scheduledStatusCount: state.get('scheduled_statuses').size,
+    isModalOpen: state.get('modals').size && state.get('modals').last().modalType === 'COMPOSE',
-});
+    maxTootChars: state.getIn(['instance', 'configuration', 'statuses', 'max_characters']),
+    scheduledAt: state.getIn(['compose', 'schedule']),
+    scheduledStatusCount: state.get('scheduled_statuses').size,
+    features: getFeatures(instance),
+  };
+};
 
 const mapDispatchToProps = (dispatch) => ({
 

app/soapbox/features/compose/containers/markdown_button_container.js

@@ -1,17 +1,11 @@
 import { connect } from 'react-redux';
 
-import { getFeatures } from 'soapbox/utils/features';
-
 import { changeComposeContentType } from '../../../actions/compose';
 import MarkdownButton from '../components/markdown_button';
 
 const mapStateToProps = (state, { intl }) => {
-  const instance = state.get('instance');
-  const features = getFeatures(instance);
-
   return {
     active: state.getIn(['compose', 'content_type']) === 'text/markdown',
-    unavailable: !features.richText,
   };
 };
 

app/soapbox/utils/features.js

@@ -23,6 +23,17 @@ export const getFeatures = createSelector([instance => instance], instance => {
   const federation = instance.getIn(['pleroma', 'metadata', 'federation'], ImmutableMap());
 
   return Object.assign({
+    media: true,
+    privacyScopes: true,
+    spoilers: true,
+    polls: any([
+      v.software === MASTODON && gte(v.version, '2.8.0'),
+      v.software === PLEROMA,
+    ]),
+    scheduledStatuses: any([
+      v.software === MASTODON && gte(v.version, '2.7.0'),
+      v.software === PLEROMA,
+    ]),
     bookmarks: any([
       v.software === MASTODON && gte(v.compatVersion, '3.1.0'),
       v.software === PLEROMA && gte(v.version, '0.9.9'),