Merge pull request #4956 from withspectrum/unified-sidebar

Unified community sidebar

Author: brianlovin

cypress/integration/channel/settings/edit_spec.js

@@ -40,8 +40,6 @@ describe('edit a channel', () => {
       .click();
 
     cy.visit(`/${community.slug}/${channel.slug}`);
-    cy.get('[data-cy="channel-profile-card"]').should('be.visible');
-    cy.get('[data-cy="channel-profile-card"]').contains(NEW_NAME);
-    cy.get('[data-cy="channel-profile-card"]').contains(NEW_DESCRIPTION);
+    cy.contains(NEW_NAME);
   });
 });

cypress/integration/channel/view/membership_spec.js

@@ -8,10 +8,6 @@ const community = data.communities.find(
   community => community.id === publicChannel.communityId
 );
 
-const { userId: ownerInChannelId } = data.usersChannels.find(
-  ({ channelId, isOwner }) => channelId === publicChannel.id && isOwner
-);
-
 const { userId: memberInChannelId } = data.usersChannels.find(
   ({ channelId, isMember, isOwner }) =>
     channelId === publicChannel.id && isMember && !isOwner
@@ -33,14 +29,14 @@ const leave = () => {
     .last()
     .click();
 
-  cy.get('[data-cy="channel-join-button"]').contains(`Join channel`);
+  cy.get('[data-cy="channel-join-button"]').contains(`Join`);
 };
 
 const join = () => {
   cy.get('[data-cy="channel-join-button"]')
     .last()
     .should('be.visible')
-    .contains('Join channel');
+    .contains('Join');
 
   cy.get('[data-cy="channel-join-button"]')
     .last()
@@ -54,8 +50,8 @@ describe('logged out channel membership', () => {
     cy.visit(`/${community.slug}/${publicChannel.slug}`);
   });
 
-  it('should render join button that links to login view', () => {
-    cy.get('[data-cy="channel-login-join-button"]').should('be.visible');
+  it('should render community join button that links to login view', () => {
+    cy.get('[data-cy="profile-join-button"]').should('be.visible');
   });
 });
 
@@ -79,23 +75,8 @@ describe('channel profile as non-member', () => {
     );
   });
 
-  it('should render join channel button', () => {
-    join();
-    leave();
-  });
-});
-
-describe('channel profile as owner', () => {
-  beforeEach(() => {
-    cy.auth(ownerInChannelId).then(() =>
-      cy.visit(`/${community.slug}/${publicChannel.slug}`)
-    );
-  });
-
-  it('should render settings button', () => {
-    cy.get('[data-cy="channel-settings-button"]')
-      .should('be.visible')
-      .contains('Settings');
+  it('should render join community button', () => {
+    cy.get('[data-cy="profile-join-button"]').should('be.visible');
   });
 });
 

cypress/integration/channel/view/notifications_spec.js

@@ -19,7 +19,10 @@ describe('channel notification preferences logged out', () => {
   it('should not render notifications settings', () => {
     cy.get('[data-cy="channel-view"]').should('be.visible');
 
-    cy.get('[data-cy="notifications-checkbox"]').should('not.be.visible');
+    cy.get('[data-cy="channel-notifications-muted"]').should('not.be.visible');
+    cy.get('[data-cy="channel-notifications-enabled"]').should(
+      'not.be.visible'
+    );
   });
 });
 
@@ -33,13 +36,21 @@ describe('channel notification preferences as member', () => {
   it('should render notification settings', () => {
     cy.get('[data-cy="channel-view"]').should('be.visible');
 
-    cy.get('[data-cy="notifications-checkbox-checked"]')
-      .should('be.visible')
-      .click();
+    cy.get('[data-cy="channel-notifications-enabled"]').should($p => {
+      expect($p).to.have.length(2);
+    });
 
-    cy.get('[data-cy="notifications-checkbox-unchecked"]')
-      .should('be.visible')
+    cy.get('[data-cy="channel-notifications-enabled"]')
+      .first()
       .click();
+
+    cy.get('[data-cy="channel-notifications-enabled"]').should($p => {
+      expect($p).to.have.length(1);
+    });
+
+    cy.get('[data-cy="channel-notifications-muted"]').should($p => {
+      expect($p).to.have.length(1);
+    });
   });
 });
 
@@ -53,7 +64,8 @@ describe('channel profile as non-member', () => {
   it('should not render notifications settings', () => {
     cy.get('[data-cy="channel-view"]').should('be.visible');
 
-    cy.get('[data-cy="notifications-checkbox-checked"]').should(
+    cy.get('[data-cy="channel-notifications-muted"]').should('not.be.visible');
+    cy.get('[data-cy="channel-notifications-enabled"]').should(
       'not.be.visible'
     );
   });

cypress/integration/channel/view/profile_spec.js

@@ -39,13 +39,6 @@ describe('public channel', () => {
   it('should render profile', () => {
     cy.get('[data-cy="channel-view"]').should('be.visible');
   });
-
-  it('should contain channel metadata', () => {
-    cy.get('[data-cy="channel-profile-card"]').should('be.visible');
-    cy.contains(community.name);
-    cy.contains(publicChannel.description);
-    cy.contains(publicChannel.name);
-  });
 });
 
 describe('public channel in private community signed out', () => {
@@ -96,11 +89,6 @@ describe('archived channel', () => {
   it('should render profile', () => {
     cy.get('[data-cy="channel-view"]').should('be.visible');
   });
-
-  it('should contain archived tag', () => {
-    cy.get('[data-cy="channel-profile-card"]').should('be.visible');
-    cy.contains('Archived');
-  });
 });
 
 describe('deleted channel', () => {

cypress/integration/thread/view_spec.js

@@ -48,11 +48,6 @@ describe('sidebar components on thread view', () => {
 
       // loaded join button which directs to login
       cy.get('[data-cy="profile-join-button"]').should('be.visible');
-
-      // loaded more conversations component
-      cy.get('[data-cy="trending-conversations"]')
-        .scrollIntoView()
-        .should('be.visible');
     });
   });
 
@@ -73,11 +68,6 @@ describe('sidebar components on thread view', () => {
       cy.get('[data-cy="profile-join-button"]')
         .scrollIntoView()
         .should('be.visible');
-
-      // loaded more conversations component
-      cy.get('[data-cy="trending-conversations"]')
-        .scrollIntoView()
-        .should('be.visible');
     });
   });
 
@@ -98,11 +88,6 @@ describe('sidebar components on thread view', () => {
       cy.get('[data-cy="community-profile-card"]')
         .scrollIntoView()
         .should('be.visible');
-
-      // loaded more conversations component
-      cy.get('[data-cy="trending-conversations"]')
-        .scrollIntoView()
-        .should('be.visible');
     });
   });
 });

cypress/integration/user/new_user_spec.js

@@ -98,7 +98,6 @@ describe('post username creation redirects', () => {
     setUsernameIsVisible();
     saveUsername();
     cy.url().should('include', '/spectrum/general');
-    cy.get('[data-cy="channel-profile-card"]').should('be.visible');
   });
 
   it('should redirect to previously viewed page 3', () => {
@@ -130,7 +129,6 @@ describe('post username creation redirects', () => {
     setUsernameIsVisible();
     saveUsername();
     cy.url().should('include', '/payments/private');
-    cy.get('[data-cy="channel-profile-card"]').should('be.visible');
   });
 
   it('should take user to explore if no previously viewed page', () => {

cypress/integration/user_spec.js

@@ -14,11 +14,8 @@ const publicAuthoredThreads = threads.filter(thread => {
 });
 
 describe('User View', () => {
-  beforeEach(() => {
-    cy.visit(`/users/${user.username}`);
-  });
-
   it('should render', () => {
+    cy.visit(`/users/${user.username}`);
     cy.get('[data-cy="user-view"]').should('be.visible');
     cy.contains(user.username);
     cy.contains(user.name);
@@ -31,6 +28,8 @@ describe('User View', () => {
   });
 
   it('should list the public communities a user is a member of, including their rep in that community', () => {
+    cy.visit(`/users/${user.username}`);
+    cy.get('[data-cy="user-view"]').should('be.visible');
     const usersCommunities = data.usersCommunities.filter(
       ({ userId }) => userId === user.id
     );

shared/graphql/fragments/channel/channelInfo.js

@@ -1,7 +1,9 @@
 // @flow
 import gql from 'graphql-tag';
 import communityInfoFragment from '../community/communityInfo';
+import communityMetaFragment from '../community/communityMetaData';
 import type { CommunityInfoType } from '../community/communityInfo';
+import type { CommunityMetaDataType } from '../community/communityMetaData';
 
 export type ChannelInfoType = {
   id: string,
@@ -21,6 +23,7 @@ export type ChannelInfoType = {
   },
   community: {
     ...$Exact<CommunityInfoType>,
+    ...$Exact<CommunityMetaDataType>,
   },
 };
 
@@ -43,7 +46,9 @@ export default gql`
     }
     community {
       ...communityInfo
+      ...communityMetaData
     }
   }
   ${communityInfoFragment}
+  ${communityMetaFragment}
 `;

src/components/communitySidebar/index.js

@@ -0,0 +1,36 @@
+// @flow
+import React from 'react';
+import { SidebarSection } from 'src/views/community/style';
+import { TeamMembersList } from 'src/views/community/components/teamMembersList';
+import { ChannelsList } from 'src/views/community/components/channelsList';
+import { CommunityProfileCard } from 'src/components/entities';
+import { ErrorBoundary } from 'src/components/error';
+
+type Props = {
+  community: Object,
+};
+
+export default ({ community }: Props) => (
+  <React.Fragment>
+    <SidebarSection>
+      <CommunityProfileCard community={community} />
+    </SidebarSection>
+
+    <ErrorBoundary>
+      <SidebarSection>
+        <ChannelsList id={community.id} communitySlug={community.slug} />
+      </SidebarSection>
+    </ErrorBoundary>
+
+    <ErrorBoundary>
+      <SidebarSection>
+        <TeamMembersList
+          community={community}
+          id={community.id}
+          first={100}
+          filter={{ isModerator: true, isOwner: true }}
+        />
+      </SidebarSection>
+    </ErrorBoundary>
+  </React.Fragment>
+);

src/components/entities/listItems/channel.js

@@ -20,10 +20,18 @@ type Props = {
   description?: ?string,
   currentUser: ?Object,
   children?: React$Node,
+  isActive?: boolean,
 };
 
 const Channel = (props: Props) => {
-  const { channel, name, description, children, currentUser } = props;
+  const {
+    channel,
+    name,
+    description,
+    children,
+    currentUser,
+    isActive = false,
+  } = props;
   const [isHoveringNotifications, setIsHoveringNotifications] = useState(false);
   if (!channel) return null;
 
@@ -116,7 +124,7 @@ const Channel = (props: Props) => {
   return (
     <ErrorBoundary>
       <Link to={`/${channel.community.slug}/${channel.slug}`}>
-        <Row>
+        <Row isActive={isActive}>
           <Content>
             {name && (
               <Label title={name}>