Bugfix/fix thread composer ux

cypress/integration/thread_spec.js

@@ -398,6 +398,8 @@ describe('/new/thread', () => {
     cy.get('[data-cy="rich-text-editor"]').should('be.visible');
     cy.get('[data-cy="composer-community-selector"]').should('be.visible');
     cy.get('[data-cy="composer-channel-selector"]').should('be.visible');
+    cy.get('[data-cy="composer-community-selector"]').select('Spectrum');
+    cy.get('[data-cy="composer-channel-selector"]').select('General');
     // Type title and body
     cy.get('[data-cy="composer-title-input"]').type(title);
     cy.get('[contenteditable="true"]').type(body);

src/components/composer/index.js

@@ -25,7 +25,6 @@ import type { GetComposerType } from 'shared/graphql/queries/composer/getCompose
 import publishThread from 'shared/graphql/mutations/thread/publishThread';
 import { getLinkPreviewFromUrl } from '../../helpers/utils';
 import { TextButton, Button } from '../buttons';
-import { FlexRow } from '../../components/globals';
 import { LoadingSelect } from '../loading';
 import Titlebar from '../../views/titlebar';
 import type { Dispatch } from 'redux';
@@ -34,16 +33,13 @@ import {
   ThreadDescription,
   ThreadTitle,
   ThreadInputs,
+  ActionsContainer,
   Actions,
   Dropdowns,
   RequiredSelector,
   DisabledWarning,
 } from './style';
-import {
-  sortCommunities,
-  sortChannels,
-  getDefaultActiveChannel,
-} from './utils';
+import { sortCommunities, sortChannels } from './utils';
 import { events, track } from 'src/helpers/analytics';
 
 const ENDS_IN_WHITESPACE = /(\s|\n)$/;
@@ -174,8 +170,8 @@ class ComposerWithData extends Component<Props, State> {
       return this.setState({
         availableCommunities: [],
         availableChannels: [],
-        activeCommunity: null,
-        activeChannel: null,
+        activeCommunity: '',
+        activeChannel: '',
       });
     }
 
@@ -195,36 +191,28 @@ class ComposerWithData extends Component<Props, State> {
     );
 
     const activeSlug = props.activeCommunity || this.state.activeCommunity;
-    let community;
+    let community = null;
 
     // User is viewing a community/channel? Use the community from the URL
     if (activeSlug) {
       community = communities.find(
         community => community.slug.toLowerCase() === activeSlug.toLowerCase()
       );
-    } else {
-      community = communities && communities.length > 0 ? communities[0] : null;
     }
 
-    if (!community || !community.id) return props.data.refetch();
-
     // get the channels for the active community
     const communityChannels = channels
       .filter(
         channel => channel && community && channel.community.id === community.id
       )
       .filter(channel => channel && !channel.isArchived);
 
-    const activeChannel = getDefaultActiveChannel(
-      communityChannels,
-      props.activeChannel
-    );
-
     this.setState({
       availableCommunities: communities,
-      availableChannels: channels,
-      activeCommunity: community ? community.id : null,
-      activeChannel: activeChannel ? activeChannel.id : null,
+      availableChannels:
+        communityChannels.length > 0 ? communityChannels : channels,
+      activeCommunity: !community ? '' : community.id,
+      activeChannel: '',
     });
   };
 
@@ -379,23 +367,12 @@ class ComposerWithData extends Component<Props, State> {
 
   setActiveCommunity = e => {
     const newActiveCommunity = e.target.value;
-    const activeCommunityChannels = this.state.availableChannels.filter(
-      channel => channel.community.id === newActiveCommunity
-    );
     const newActiveCommunityData = this.state.availableCommunities.find(
       community => community.id === newActiveCommunity
     );
-    const isActiveCommunity =
-      newActiveCommunityData &&
-      this.props.activeCommunity === newActiveCommunityData.slug;
-    const newActiveChannel = getDefaultActiveChannel(
-      activeCommunityChannels,
-      isActiveCommunity ? this.props.activeChannel : ''
-    );
-
     this.setState({
-      activeCommunity: newActiveCommunity,
-      activeChannel: newActiveChannel && newActiveChannel.id,
+      activeCommunity: !newActiveCommunityData ? '' : newActiveCommunityData.id,
+      activeChannel: '',
     });
   };
 
@@ -409,7 +386,11 @@ class ComposerWithData extends Component<Props, State> {
 
   publishThread = () => {
     // if no title and no channel is set, don't allow a thread to be published
-    if (!this.state.title || !this.state.activeChannel) {
+    if (
+      !this.state.title ||
+      !this.state.activeChannel ||
+      !this.state.activeCommunity
+    ) {
       return;
     }
 
@@ -626,49 +607,9 @@ class ComposerWithData extends Component<Props, State> {
       !networkOnline ||
       (websocketConnection !== 'connected' &&
         websocketConnection !== 'reconnected');
-
     return (
       <Container>
         <Titlebar provideBack title={'New conversation'} noComposer />
-        <Dropdowns>
-          <span>To:</span>
-          {!dataExists ? (
-            <LoadingSelect />
-          ) : (
-            <RequiredSelector
-              data-cy="composer-community-selector"
-              onChange={this.setActiveCommunity}
-              value={activeCommunity}
-            >
-              {availableCommunities.map(community => {
-                return (
-                  <option key={community.id} value={community.id}>
-                    {community.name}
-                  </option>
-                );
-              })}
-            </RequiredSelector>
-          )}
-          {!dataExists ? (
-            <LoadingSelect />
-          ) : (
-            <RequiredSelector
-              data-cy="composer-channel-selector"
-              onChange={this.setActiveChannel}
-              value={activeChannel}
-            >
-              {availableChannels
-                .filter(channel => channel.community.id === activeCommunity)
-                .map(channel => {
-                  return (
-                    <option key={channel.id} value={channel.id}>
-                      {channel.name}
-                    </option>
-                  );
-                })}
-            </RequiredSelector>
-          )}
-        </Dropdowns>
         <ThreadInputs>
           <Textarea
             data-cy="composer-title-input"
@@ -706,25 +647,71 @@ class ComposerWithData extends Component<Props, State> {
             </DisabledWarning>
           )}
 
-          <FlexRow>
+          <ActionsContainer>
             <TextButton hoverColor="warn.alt" onClick={this.onCancelClick}>
               Cancel
             </TextButton>
+            <Dropdowns>
+              {!dataExists ? (
+                <LoadingSelect />
+              ) : (
+                <RequiredSelector
+                  data-cy="composer-community-selector"
+                  onChange={this.setActiveCommunity}
+                  value={activeCommunity}
+                >
+                  <option key={-1} value="">
+                    Select community
+                  </option>
+                  {availableCommunities.map(community => {
+                    return (
+                      <option key={community.id} value={community.id}>
+                        {community.name}
+                      </option>
+                    );
+                  })}
+                </RequiredSelector>
+              )}
+              {!dataExists ? (
+                <LoadingSelect />
+              ) : (
+                <RequiredSelector
+                  data-cy="composer-channel-selector"
+                  onChange={this.setActiveChannel}
+                  value={activeChannel}
+                >
+                  <option key={-1} value="">
+                    Select channel
+                  </option>
+                  {availableChannels
+                    .filter(channel => channel.community.id === activeCommunity)
+                    .map(channel => {
+                      return (
+                        <option key={channel.id} value={channel.id}>
+                          {channel.name}
+                        </option>
+                      );
+                    })}
+                </RequiredSelector>
+              )}
+            </Dropdowns>
             <Button
               data-cy="composer-publish-button"
               onClick={this.publishThread}
               loading={isPublishing}
               disabled={
                 !title ||
                 title.trim().length === 0 ||
+                !activeCommunity ||
+                !activeChannel ||
                 isPublishing ||
                 networkDisabled
               }
               color={'brand'}
             >
               Publish
             </Button>
-          </FlexRow>
+          </ActionsContainer>
         </Actions>
       </Container>
     );

src/components/composer/style.js

@@ -1,25 +1,32 @@
 import styled from 'styled-components';
-import { hexa, Shadow, FlexRow, FlexCol, zIndex } from '../globals';
+import { hexa, FlexRow, FlexCol, zIndex } from '../globals';
 
 export const Container = styled(FlexCol)`
   background-color: ${props => props.theme.bg.default};
   display: grid;
-  grid-template-rows: 60px 1fr 64px;
+  grid-template-rows: 1fr 64px;
   grid-template-columns: 100%;
-  grid-template-areas: 'header' 'body' 'footer';
+  grid-template-areas: 'body' 'footer';
   align-self: stretch;
   flex: auto;
   overflow: hidden;
   height: calc(100vh - 48px);
 
   @media (max-width: 768px) {
     grid-template-rows: 48px 64px 1fr 64px;
-    grid-template-areas: 'title' 'header' 'body' 'footer';
+    grid-template-areas: 'title' 'body' 'body' 'footer';
     max-width: 100vw;
     height: 100vh;
   }
 `;
 
+export const ActionsContainer = styled(FlexRow)`
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-self: flex-end;
+  }
+`;
+
 export const Actions = styled(FlexCol)`
   background: ${props => props.theme.bg.wash};
   border-top: 2px solid ${props => props.theme.bg.border};
@@ -29,25 +36,19 @@ export const Actions = styled(FlexCol)`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
-  align-items: center;
   position: relative;
   grid-area: footer;
-
   @media (max-width: 768px) {
-    padding: 8px;
     z-index: ${zIndex.chrome + 1};
     border-radius: 0;
     border: 0;
     box-shadow: none;
     background-color: transparent;
-
     > div {
       width: 100%;
-
       > button:first-of-type {
         display: none;
       }
-
       > button:last-of-type {
         width: 100%;
       }
@@ -60,10 +61,7 @@ export const Dropdowns = styled(FlexRow)`
   align-items: center;
   grid-area: header;
   background-color: ${props => props.theme.bg.wash};
-  box-shadow: ${Shadow.low} ${props => hexa(props.theme.bg.reverse, 0.15)};
   z-index: ${zIndex.composer};
-  grid-area: header;
-
   span {
     font-size: 14px;
     font-weight: 500;
@@ -73,15 +71,16 @@ export const Dropdowns = styled(FlexRow)`
     vertical-align: middle;
     position: relative;
     top: 1px;
-
     @media (max-width: 768px) {
       display: none;
     }
   }
-
   @media (max-width: 768px) {
+    flex-wrap: wrap;
+    padding: 8px;
     width: 100%;
     justify-content: flex-start;
+    margin-bottom: 5%;
   }
 `;
 
@@ -102,7 +101,7 @@ const Selector = styled.select`
 
   @media (max-width: 768px) {
     flex: auto;
-    max-width: calc(50% - 12px);
+    max-width: 100%;
   }
 `;
 
@@ -112,6 +111,7 @@ export const RequiredSelector = styled(Selector)`
   border-radius: 8px;
   color: ${props => props.theme.text.default};
   background-color: ${props => props.theme.bg.default};
+  margin-right: 8px;
 `;
 
 export const OptionalSelector = styled(Selector)`
@@ -123,19 +123,21 @@ export const OptionalSelector = styled(Selector)`
 export const ThreadInputs = styled(FlexCol)`
   grid-area: body;
   overflow-y: scroll;
-  padding: 64px;
+  padding: 20px 0px 64px 64px;
   padding-left: 80px;
   background-color: ${props => props.theme.bg.default};
 
   @media (max-width: 768px) {
     max-width: 100vw;
     padding: 32px;
+    height: 100vh;
     padding-left: 48px;
   }
 
   @media (max-width: 480px) {
     max-width: 100vw;
     padding: 16px;
+    height: 100vh;
     padding-left: 48px;
   }
 `;

src/components/threadComposer/components/composer.js

@@ -763,8 +763,6 @@ class ThreadComposerWithData extends React.Component<Props, State> {
                         })}
                     </select>
                   </Dropdowns>
-                </FlexRow>
-                <FlexRow>
                   <TextButton
                     hoverColor="warn.alt"
                     onClick={this.closeComposer}