New feature flag with ability to migrate GV1 groups

ts/components/conversation/GroupV1DisabledActions.stories.tsx

@@ -0,0 +1,29 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import {
+  GroupV1DisabledActions,
+  PropsType as GroupV1DisabledActionsPropsType,
+} from './GroupV1DisabledActions';
+import { setup as setupI18n } from '../../../js/modules/i18n';
+import enMessages from '../../../_locales/en/messages.json';
+
+const i18n = setupI18n('en', enMessages);
+
+const createProps = (): GroupV1DisabledActionsPropsType => ({
+  i18n,
+  onStartGroupMigration: action('onStartGroupMigration'),
+});
+
+const stories = storiesOf(
+  'Components/Conversation/GroupV1DisabledActions',
+  module
+);
+
+stories.add('Default', () => {
+  return <GroupV1DisabledActions {...createProps()} />;
+});

ts/components/conversation/GroupV1DisabledActions.tsx

@@ -0,0 +1,49 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+import { Intl } from '../Intl';
+import { LocalizerType } from '../../types/Util';
+
+export type PropsType = {
+  i18n: LocalizerType;
+  onStartGroupMigration: () => unknown;
+};
+
+export const GroupV1DisabledActions = ({
+  i18n,
+  onStartGroupMigration,
+}: PropsType): JSX.Element => {
+  return (
+    <div className="module-group-v1-disabled-actions">
+      <p className="module-group-v1-disabled-actions__message">
+        <Intl
+          i18n={i18n}
+          id="GroupV1--Migration--disabled"
+          components={{
+            learnMore: (
+              <a
+                href="https://support.signal.org/hc/articles/360007319331"
+                target="_blank"
+                rel="noreferrer"
+                className="module-group-v1-disabled-actions__message__learn-more"
+              >
+                {i18n('MessageRequests--learn-more')}
+              </a>
+            ),
+          }}
+        />
+      </p>
+      <div className="module-group-v1-disabled-actions__buttons">
+        <button
+          type="button"
+          onClick={onStartGroupMigration}
+          tabIndex={0}
+          className="module-group-v1-disabled-actions__buttons__button"
+        >
+          {i18n('MessageRequests--continue')}
+        </button>
+      </div>
+    </div>
+  );
+};

ts/components/conversation/GroupV1Migration.tsx

@@ -55,9 +55,6 @@ export function GroupV1Migration(props: PropsType): React.ReactElement {
             hasMigrated
             i18n={i18n}
             invitedMembers={invitedMembers}
-            learnMore={() =>
-              window.log.warn('GroupV1Migration: Modal called learnMore()')
-            }
             migrate={() =>
               window.log.warn('GroupV1Migration: Modal called migrate()')
             }

ts/components/conversation/Timeline.stories.tsx

@@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
 
 import { setup as setupI18n } from '../../../js/modules/i18n';
 import enMessages from '../../../_locales/en/messages.json';
-import { Props, Timeline } from './Timeline';
+import { PropsType, Timeline } from './Timeline';
 import { TimelineItem, TimelineItemType } from './TimelineItem';
 import { LastSeenIndicator } from './LastSeenIndicator';
 import { TimelineLoadingRow } from './TimelineLoadingRow';
@@ -278,7 +278,7 @@ const renderTypingBubble = () => (
   />
 );
 
-const createProps = (overrideProps: Partial<Props> = {}): Props => ({
+const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   i18n,
 
   haveNewest: boolean('haveNewest', overrideProps.haveNewest !== false),

ts/components/conversation/Timeline.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { debounce, get, isNumber } from 'lodash';
+import classNames from 'classnames';
 import React, { CSSProperties } from 'react';
 import {
   AutoSizer,
@@ -44,6 +45,8 @@ type PropsHousekeepingType = {
   id: string;
   unreadCount?: number;
   typingContact?: unknown;
+  isGroupV1AndDisabled?: boolean;
+
   selectedMessageId?: string;
 
   i18n: LocalizerType;
@@ -82,7 +85,9 @@ type PropsActionsType = {
 } & MessageActionsType &
   SafetyNumberActionsType;
 
-export type Props = PropsDataType & PropsHousekeepingType & PropsActionsType;
+export type PropsType = PropsDataType &
+  PropsHousekeepingType &
+  PropsActionsType;
 
 // from https://github.com/bvaughn/react-virtualized/blob/fb3484ed5dcc41bffae8eab029126c0fb8f7abc0/source/List/types.js#L5
 type RowRendererParamsType = {
@@ -120,7 +125,7 @@ type VisibleRowsType = {
   };
 };
 
-type State = {
+type StateType = {
   atBottom: boolean;
   atTop: boolean;
   oneTimeScrollRow?: number;
@@ -133,7 +138,7 @@ type State = {
   areUnreadBelowCurrentPosition: boolean;
 };
 
-export class Timeline extends React.PureComponent<Props, State> {
+export class Timeline extends React.PureComponent<PropsType, StateType> {
   public cellSizeCache = new CellMeasurerCache({
     defaultHeight: 64,
     fixedWidth: true,
@@ -153,7 +158,7 @@ export class Timeline extends React.PureComponent<Props, State> {
 
   public loadCountdownTimeout: NodeJS.Timeout | null = null;
 
-  constructor(props: Props) {
+  constructor(props: PropsType) {
     super(props);
 
     const { scrollToIndex } = this.props;
@@ -170,7 +175,10 @@ export class Timeline extends React.PureComponent<Props, State> {
     };
   }
 
-  public static getDerivedStateFromProps(props: Props, state: State): State {
+  public static getDerivedStateFromProps(
+    props: PropsType,
+    state: StateType
+  ): StateType {
     if (
       isNumber(props.scrollToIndex) &&
       (props.scrollToIndex !== state.prevPropScrollToIndex ||
@@ -646,7 +654,10 @@ export class Timeline extends React.PureComponent<Props, State> {
     return itemsCount + extraRows;
   }
 
-  public fromRowToItemIndex(row: number, props?: Props): number | undefined {
+  public fromRowToItemIndex(
+    row: number,
+    props?: PropsType
+  ): number | undefined {
     const { items } = props || this.props;
 
     // We will always render either the hero row or the loading row
@@ -666,7 +677,7 @@ export class Timeline extends React.PureComponent<Props, State> {
     return index;
   }
 
-  public getLastSeenIndicatorRow(props?: Props): number | undefined {
+  public getLastSeenIndicatorRow(props?: PropsType): number | undefined {
     const { oldestUnreadIndex } = props || this.props;
     if (!isNumber(oldestUnreadIndex)) {
       return;
@@ -785,7 +796,7 @@ export class Timeline extends React.PureComponent<Props, State> {
     window.unregisterForActive(this.updateWithVisibleRows);
   }
 
-  public componentDidUpdate(prevProps: Props): void {
+  public componentDidUpdate(prevProps: PropsType): void {
     const {
       id,
       clearChangedMessages,
@@ -1052,7 +1063,7 @@ export class Timeline extends React.PureComponent<Props, State> {
   };
 
   public render(): JSX.Element | null {
-    const { i18n, id, items } = this.props;
+    const { i18n, id, items, isGroupV1AndDisabled } = this.props;
     const {
       shouldShowScrollDownButton,
       areUnreadBelowCurrentPosition,
@@ -1067,7 +1078,10 @@ export class Timeline extends React.PureComponent<Props, State> {
 
     return (
       <div
-        className="module-timeline"
+        className={classNames(
+          'module-timeline',
+          isGroupV1AndDisabled ? 'module-timeline--disabled' : null
+        )}
         role="presentation"
         tabIndex={-1}
         onBlur={this.handleBlur}