Merge pull request #5026 from withspectrum/3.1.4

3.1.4

Author: brianlovin

api/apollo-server.js

@@ -46,6 +46,11 @@ class ProtectedApolloServer extends ApolloServer {
 }
 
 let connections = 0;
+
+setInterval(() => {
+  statsd.gauge('websocket.connections.count', connections);
+}, 5000);
+
 const server = new ProtectedApolloServer({
   schema,
   formatError: createErrorFormatter(),
@@ -78,15 +83,15 @@ const server = new ProtectedApolloServer({
   subscriptions: {
     path: '/websocket',
     onDisconnect: rawSocket => {
-      statsd.gauge('ws.connections', (connections -= 1));
+      connections--;
       return getUserIdFromReq(rawSocket.upgradeReq)
         .then(id => id && setUserOnline(id, false))
         .catch(err => {
           console.error(err);
         });
     },
     onConnect: (connectionParams, rawSocket) => {
-      statsd.gauge('ws.connections', (connections += 1));
+      connections++;
       return getUserIdFromReq(rawSocket.upgradeReq)
         .then(id => (id ? setUserOnline(id, true) : null))
         .then(user => {

api/package.json

@@ -1,7 +1,4 @@
 {
-  "engines": {
-    "node": "^10.0.0"
-  },
   "dependencies": {
     "algoliasearch": "^3.32.1",
     "apollo-local-query": "^0.3.1",
@@ -109,7 +106,7 @@
     "react-router": "^4.0.0-beta.7",
     "react-router-dom": "^4.0.0-beta.7",
     "react-textarea-autosize": "^4.0.5",
-    "react-transition-group": "^2.7.1",
+    "react-transition-group": "^2.8.0",
     "react-trend": "^1.2.4",
     "recompose": "^0.23.1",
     "redis-tag-cache": "^1.2.1",
@@ -142,4 +139,4 @@
   "scripts": {
     "start": "NODE_ENV=production node main.js"
   }
-}
+}

api/yarn.lock

@@ -8072,10 +8072,10 @@ react-textarea-autosize@^4.0.5:
   dependencies:
     prop-types "^15.5.8"
 
-react-transition-group@^2.7.1:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.7.1.tgz#1fe6d54e811e8f9dfd329aa836b39d9cd16587cb"
-  integrity sha512-b0VJTzNRnXxRpCuxng6QJbAzmmrhBn1BZJfPPnHbH2PIo8msdkajqwtfdyGm/OypPXZNfAHKEqeN15wjMXrRJQ==
+react-transition-group@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.8.0.tgz#d6d8f635d81a0955b67348be5d017cff77d6c75f"
+  integrity sha512-So23a1MPn8CGoW5WNU4l0tLiVkOFmeXSS1K4Roe+dxxqqHvI/2XBmj76jx+u96LHnQddWG7LX8QovPAainSmWQ==
   dependencies:
     dom-helpers "^3.3.1"
     loose-envify "^1.4.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Spectrum",
-  "version": "3.1.3",
+  "version": "3.1.4",
   "license": "BSD-3-Clause",
   "devDependencies": {
     "@babel/preset-flow": "^7.0.0",

shared/generate-meta-info.js

@@ -90,7 +90,7 @@ function generateMetaInfo(input /*: Input */) /*: Meta */ {
   switch (type) {
     case 'explore': {
       return {
-        title: 'Explore · Spectrum',
+        title: 'Explore',
         description: 'Explore some of the communities on Spectrum',
       };
     }
@@ -107,13 +107,13 @@ function generateMetaInfo(input /*: Input */) /*: Meta */ {
           ? toPlainText(JSON.parse(data.body))
           : data.body);
       return setDefault({
-        title: data && data.title + ' · ' + data.communityName + ' community',
+        title: data && data.title + ' · ' + data.communityName,
         description: body,
       });
     }
     case 'user': {
       return setDefault({
-        title: data && data.name + ' (@' + data.username + ')',
+        title: data && data.name + ' · @' + data.username,
         description: data && data.description,
       });
     }
@@ -139,6 +139,12 @@ function generateMetaInfo(input /*: Input */) /*: Meta */ {
         description: data && data.description,
       });
     }
+    case 'notifications': {
+      return setDefault({
+        title: 'Notifications',
+        description: 'Notifications on Spectrum',
+      });
+    }
     default: {
       return DEFAULT_META;
     }

src/components/composer/index.js

@@ -16,6 +16,7 @@ import uploadImage, {
   type UploadImageInput,
   type UploadImageType,
 } from 'shared/graphql/mutations/uploadImage';
+import Head from 'src/components/head';
 import { TextButton } from 'src/components/button';
 import { PrimaryButton } from 'src/components/button';
 import Tooltip from 'src/components/tooltip';
@@ -481,6 +482,7 @@ class ComposerWithData extends React.Component<Props, State> {
 
     return (
       <Wrapper data-cy="thread-composer-wrapper">
+        <Head title={'New post'} description={'Write a new post'} />
         <Overlay
           isModal={isModal}
           onClick={this.discardDraft}

src/components/entities/profileCards/community.js

@@ -6,7 +6,6 @@ import { CommunityActions } from './components/communityActions';
 import { CommunityMeta } from './components/communityMeta';
 import { ProfileContainer, CoverPhoto, ProfileAvatarContainer } from './style';
 import type { CommunityInfoType } from 'shared/graphql/fragments/community/communityInfo';
-import type { CommunityMetaDataType } from 'shared/graphql/fragments/community/communityMetaData';
 
 type Props = {
   community: CommunityInfoType,

src/components/entities/profileCards/components/communityMeta.js

@@ -1,8 +1,6 @@
 // @flow
 import React from 'react';
 import { Link } from 'react-router-dom';
-import type { CommunityInfoType } from 'shared/graphql/fragments/community/communityInfo';
-import type { CommunityMetaDataType } from 'shared/graphql/fragments/community/communityMetaData';
 import renderTextWithLinks from 'src/helpers/render-text-with-markdown-links';
 import addProtocolToString from 'shared/normalize-url';
 import Icon from 'src/components/icon';

src/components/entities/profileCards/style.js

@@ -100,6 +100,15 @@ export const Description = styled.p`
   line-height: 1.4;
   color: ${theme.text.secondary};
   word-break: break-word;
+
+  a {
+    color: ${theme.text.default};
+    font-weight: 500;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 `;
 
 export const MetaLinksContainer = styled.div`

src/components/titlebar/actions.js

@@ -27,14 +27,15 @@ export const MobileCommunityAction = (props: CommunityProps) => {
 
   if (isMember) {
     return (
-      <WhiteIconButton
+      <OutlineButton
+        size={'small'}
         to={{
           pathname,
           search,
         }}
       >
-        <Icon glyph={'post'} size={32} />
-      </WhiteIconButton>
+        New post
+      </OutlineButton>
     );
   }
 
@@ -64,14 +65,15 @@ export const MobileChannelAction = (props: ChannelProps) => {
 
   if (isMember) {
     return (
-      <WhiteIconButton
+      <OutlineButton
+        size={'small'}
         to={{
           pathname,
           search,
         }}
       >
-        <Icon glyph={'post'} size={32} />
-      </WhiteIconButton>
+        New post
+      </OutlineButton>
     );
   }
 

src/helpers/render-text-with-markdown-links.js

@@ -1,12 +1,21 @@
 // @flow
 import * as React from 'react';
 import replace from 'string-replace-to-array';
+import { Link } from 'react-router-dom';
 const MARKDOWN_LINK = /(?:\[(.*?)\]\((.*?)\))/g;
+import { SPECTRUM_URLS } from 'shared/regexps';
 
 export default (text: string) => {
-  return replace(text, MARKDOWN_LINK, (fullLink, text, url) => (
-    <a href={url} target="_blank" rel="noopener noreferrer" key={url}>
-      {text}
-    </a>
-  ));
+  return replace(text, MARKDOWN_LINK, (fullLink, text, url) => {
+    const regexp = new RegExp(SPECTRUM_URLS, 'ig');
+    const match = regexp.exec(url);
+
+    if (match && match[0] && match[1]) return <Link to={match[1]}>{text}</Link>;
+
+    return (
+      <a href={url} target="_blank" rel="noopener noreferrer" key={url}>
+        {text}
+      </a>
+    );
+  });
 };

src/views/channel/index.js

@@ -98,6 +98,22 @@ class ChannelView extends React.Component<Props> {
 
   componentDidUpdate(prevProps) {
     const { dispatch } = this.props;
+    if (!prevProps.data.channel && this.props.data.channel) {
+      const { channel } = this.props.data;
+      dispatch(
+        setTitlebarProps({
+          title: `# ${channel.name}`,
+          titleIcon: (
+            <CommunityAvatar
+              isClickable={false}
+              community={channel.community}
+              size={24}
+            />
+          ),
+          rightAction: <MobileChannelAction channel={channel} />,
+        })
+      );
+    }
 
     if (
       this.props.data.channel &&

src/views/channelSettings/index.js

@@ -6,6 +6,7 @@ import { connect } from 'react-redux';
 import { getChannelByMatch } from 'shared/graphql/queries/channel/getChannel';
 import type { GetChannelType } from 'shared/graphql/queries/channel/getChannel';
 import { addToastWithTimeout } from 'src/actions/toasts';
+import Head from 'src/components/head';
 import { Upsell404Channel } from 'src/components/upsell';
 import viewNetworkHandler from 'src/components/viewNetworkHandler';
 import togglePendingUserInChannelMutation from 'shared/graphql/mutations/channel/toggleChannelPendingUser';
@@ -185,17 +186,25 @@ class ChannelSettings extends React.Component<Props> {
       };
 
       return (
-        <ViewGrid>
-          <View>
-            <Header
-              subheading={subheading}
-              heading={`${channel.name} Settings ${
-                channel.isArchived ? '(Archived)' : ''
-              }`}
-            />
-            <ActiveView />
-          </View>
-        </ViewGrid>
+        <React.Fragment>
+          <Head
+            title={`${channel.name} settings`}
+            description={`Settings for the ${channel.name} channel in ${
+              channel.community.name
+            }`}
+          />
+          <ViewGrid>
+            <View>
+              <Header
+                subheading={subheading}
+                heading={`${channel.name} Settings ${
+                  channel.isArchived ? '(Archived)' : ''
+                }`}
+              />
+              <ActiveView />
+            </View>
+          </ViewGrid>
+        </React.Fragment>
       );
     }
 

src/views/communitySettings/index.js

@@ -99,15 +99,8 @@ class CommunitySettings extends React.Component<Props> {
         community,
       };
 
-      const activeItem = subnavItems.find(
-        ({ activeLabel }) => activeLabel === activeTab
-      );
-      let title = community.name;
-      if (activeItem && activeItem.label !== 'Settings') {
-        title += ` ${activeItem.label} Settings`;
-      } else {
-        title += ' Settings';
-      }
+      let title = community.name + ' settings';
+
       return (
         <React.Fragment>
           <Head title={title} />

src/views/directMessages/components/header.js

@@ -16,7 +16,14 @@ const Header = ({ thread, currentUser }) => {
   );
 
   // don't show the header in a 1:1 dm because we already have the titlebar
-  if (trimmedUsers.length === 1) return null;
+  if (trimmedUsers.length === 1) {
+    return (
+      <Head
+        title={`Conversation with ${trimmedUsers[0].name}`}
+        description={`Conversation with ${trimmedUsers[0].name}`}
+      />
+    );
+  }
 
   const photos = trimmedUsers.map(user => (
     <PhotoWrapper key={user.id}>

src/views/directMessages/components/threadsList.js

@@ -140,7 +140,8 @@ class ThreadsList extends React.Component<Props, State> {
 
     if (!dmDataExists && dmData.loading) {
       return (
-        <div>
+        <ThreadsListScrollContainer>
+          <DesktopTitlebar title={'Messages'} />
           <LoadingDM />
           <LoadingDM />
           <LoadingDM />
@@ -152,7 +153,7 @@ class ThreadsList extends React.Component<Props, State> {
           <LoadingDM />
           <LoadingDM />
           <LoadingDM />
-        </div>
+        </ThreadsListScrollContainer>
       );
     }
 

src/views/directMessages/containers/index.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { connect } from 'react-redux';
 import type { Dispatch } from 'redux';
 import type { Match } from 'react-router';
+import Head from 'src/components/head';
 import ThreadsList from '../components/threadsList';
 import ExistingThread from './existingThread';
 import { PrimaryOutlineButton } from 'src/components/button';
@@ -76,6 +77,7 @@ class DirectMessages extends React.Component<Props, State> {
               <ExistingThread id={activeThreadId} match={match} />
             ) : (
               <NoCommunitySelected>
+                <Head title={'Messages'} />
                 <div>
                   <NoCommunityHeading>
                     No conversation selected

src/views/navigation/communityList.js

@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import compose from 'recompose/compose';
 import { Route, type History } from 'react-router-dom';
 import Tooltip from 'src/components/tooltip';
+import { MIN_WIDTH_TO_EXPAND_NAVIGATION } from 'src/components/layout';
 import viewNetworkHandler from 'src/components/viewNetworkHandler';
 import { ErrorBoundary } from 'src/components/error';
 import {
@@ -40,8 +41,15 @@ const CommunityListItem = props => {
 
   const appControlSymbol = '⌘';
 
+  const isWideViewport =
+    window && window.innerWidth > MIN_WIDTH_TO_EXPAND_NAVIGATION;
+
   return (
-    <Tooltip content={community.name} placement={'left'}>
+    <Tooltip
+      content={community.name}
+      placement={'left'}
+      isEnabled={!isWideViewport}
+    >
       <AvatarGrid isActive={isActive}>
         <AvatarLink
           to={`/${community.slug}?tab=posts`}