Big refactor: ts/ directory for all typescript, including react

Split out test-specific and general utility react components too.

And moved our test/legacy* files for the Style Guide into a styleguide/
subdirectory of test/.

I think we'll be able to live in this directory structure for a while.

.eslintignore

@@ -14,7 +14,7 @@ test/views/*.js
 /*.js
 
 # typescript-generated files
-js/react/**/*.js
+ts/**/*.js
 
 
 # ES2015+ files

.gitignore

@@ -24,4 +24,4 @@ test/test.js
 libtextsecure/test/test.js
 
 # React / TypeScript
-js/react/**/*.js
+ts/**/*.js

Gruntfile.js

@@ -107,7 +107,6 @@ module.exports = function(grunt) {
         '!js/logging.js',
         '!js/modules/**/*.js',
         '!js/Mp3LameEncoder.min.js',
-        '!js/react/**/*.js',
         '!js/signal_protocol_store.js',
         '!js/views/conversation_search_view.js',
         '!js/views/debug_log_view.js',
@@ -162,7 +161,6 @@ module.exports = function(grunt) {
         '!js/libtextsecure.js',
         '!js/modules/**/*.js',
         '!js/Mp3LameEncoder.min.js',
-        '!js/react/**/*.js',
         '!js/WebAudioRecorderMp3.js',
         'test/**/*.js',
         '!test/blanket_mocha.js',
@@ -193,7 +191,7 @@ module.exports = function(grunt) {
         tasks: ['jscs']
       },
       transpile: {
-        files: ['./js/react/**/*.js'],
+        files: ['./ts/**/*.js'],
         tasks: ['exec:transpile']
       }
     },

background.html

@@ -20,6 +20,12 @@
   <title>Signal</title>
   <link href='images/icon_128.png' rel='shortcut icon'>
   <link href="stylesheets/manifest.css" rel="stylesheet" type="text/css" />
+
+  <!-- When making changes to these templates, be sure to update these two places:
+    1) test/styleguide/legacy_templates.js
+    2) test/index.html
+  -->
+
   <script type='text/x-tmpl-mustache' id='app-migration-screen'>
     <div class='content'>
       <img src='images/icon_128.png'>

package.json

@@ -41,15 +41,14 @@
     "test-server": "mocha --recursive test/server",
     "test-server-coverage": "nyc --reporter=lcov --reporter=text mocha --recursive test/server",
     "eslint": "eslint .",
-    "tslint": "tslint ./js/react/**/*.{ts,tsx}",
+    "tslint": "tslint ts/**/*.{ts,tsx}",
     "transpile": "tsc",
-    "clean-transpile": "rimraf js/react/**/*.js js/react/*.js",
+    "clean-transpile": "rimraf ts/**/*.js ts/*.js",
     "open-coverage": "open coverage/lcov-report/index.html",
     "styleguide": "styleguidist server"
   },
   "dependencies": {
     "@sindresorhus/is": "^0.8.0",
-    "@types/qs": "^6.5.1",
     "archiver": "^2.1.1",
     "blob-util": "^1.3.0",
     "blueimp-canvas-to-blob": "^3.14.0",
@@ -92,6 +91,7 @@
     "websocket": "^1.0.25"
   },
   "devDependencies": {
+    "@types/qs": "^6.5.1",
     "@types/react": "^16.3.1",
     "@types/react-dom": "^16.0.4",
     "arraybuffer-loader": "^1.0.3",

styleguide.config.js

@@ -10,17 +10,22 @@ module.exports = {
     {
       name: 'Conversation',
       description: 'Everything necessary to render a conversation',
-      components: 'js/react/conversation/*.tsx',
+      components: 'ts/components/conversation/*.tsx',
     },
     {
       name: 'Utility',
-      description: 'Utility components only used for testing',
+      description: 'Utility components used across the application',
-      components: 'js/react/util/*.tsx',
+      components: 'ts/components/utility/*.tsx',
+    },
+    {
+      name: 'Test',
+      description: 'Components only used for testing',
+      components: 'ts/test/**/*.tsx',
     },
   ],
   context: {
     // Exposes necessary utilities in the global scope for all readme code snippets
-    util: 'js/react/util',
+    util: 'ts/test/StyleGuideUtil',
   },
   // We don't want one long, single page
   pagePerSection: true,
@@ -42,7 +47,7 @@ module.exports = {
       // Mirrors the order used in background.js.
       scripts: [
         {
-          src: 'test/legacy_bridge.js',
+          src: 'test/styleguide/legacy_bridge.js',
         },
         {
           src: 'node_modules/moment/min/moment-with-locales.min.js',
@@ -123,7 +128,7 @@ module.exports = {
         },
         // Hacky way of including templates for Backbone components
         {
-          src: 'test/legacy_templates.js',
+          src: 'test/styleguide/legacy_templates.js',
         },
       ],
     },

test/styleguide/legacy_bridge.js

@@ -1,5 +1,6 @@
+/* global window: false */
 
-// Because we aren't hosting the styleguide in Electron, we can't rely on preload.js
+// Because we aren't hosting the Style Guide in Electron, we can't rely on preload.js
 //   to set things up for us. This gives us the minimum bar shims for everything it
 //   provdes.
 //
@@ -17,14 +18,14 @@ window.Signal.Migrations = {
   getPlaceholderMigrations: () => {},
 };
 
-window.Signal.React = window.Signal.React = {};
+window.Signal.React = {};
 
 window.EmojiConvertor = function EmojiConvertor() {};
 window.EmojiConvertor.prototype.init_colons = () => {};
 window.EmojiConvertor.prototype.signalReplace = html => html;
 window.EmojiConvertor.prototype.replace_unified = string => string;
 window.EmojiConvertor.prototype.img_sets = {
-  apple: {}
+  apple: {},
 };
 
 window.i18n = () => '';

test/styleguide/legacy_templates.js

@@ -1,20 +1,27 @@
+/* global window: false */
 
 // Taken from background.html.
-// Templates are here solely to support the Backbone views rendered in the styleguide.
+// Templates are here solely to support the Backbone views rendered in the Style Guide.
+
+// Note: Any change here must be reflected in background.html to be reflected in the app
+//   and test/index.html to be reflected in the unit tests.
 
 window.Whisper.View.Templates = {
   hasRetry: `
-    {{ messageNotSent }}
+    {{ messageNotSent }} <span href='#' class='retry'>{{ resend }}</span>
-    <span href='#' class='retry'>{{ resend }}</span>
   `,
   'some-failed': `
     {{ someFailed }}
   `,
   keychange: `
-    <span class='content' dir='auto'><span class='shield icon'></span> {{ content }}</span>
+    <span class='content' dir='auto'>
+      <span class='shield icon'></span> {{ content }}
+    </span>
   `,
   'verified-change': `
-    <span class='content' dir='auto'><span class='{{ icon }} icon'></span> {{ content }}</span>
+    <span class='content' dir='auto'>
+      <span class='{{ icon }} icon'></span> {{ content }}
+    </span>
   `,
   message: `
     {{> avatar }}
@@ -41,5 +48,5 @@ window.Whisper.View.Templates = {
   `,
   expirationTimerUpdate: `
     <span class='content'><span class='icon clock'></span> {{ content }}</span>
-  `
+  `,
 };

ts/components/utility/BackboneWrapper.tsx

@@ -18,7 +18,7 @@ interface BackboneViewConstructor {
 }
 
 /**
- * Allows Backbone Views to be rendered inside of React (primarily for the styleguide)
+ * Allows Backbone Views to be rendered inside of React (primarily for the Style Guide)
  * while we slowly replace the internals of a given Backbone view with React.
  */
 export class BackboneWrapper extends React.Component<Props, {}> {

ts/test/ConversationContext.tsx

@@ -10,7 +10,7 @@ interface Props {
 
 /**
  * Provides the parent elements necessary to allow the main Signal Desktop stylesheet to
- * apply (with no changes) to messages in this context.
+ * apply (with no changes) to messages in the Style Guide.
  */
 export class ConversationContext extends React.Component<Props, {}> {
   public render() {

ts/test/StyleGuideUtil.ts

@@ -5,16 +5,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 
-// Helper components used in the styleguide, exposed at 'util' in the global scope via the
+// Helper components used in the Style Guide, exposed at 'util' in the global scope via
-//   context option in react-styleguidist.
+//   the 'context' option in react-styleguidist.
 
 export { ConversationContext } from './ConversationContext';
-export { BackboneWrapper } from './BackboneWrapper';
+export { BackboneWrapper } from '../components/utility/BackboneWrapper';
 
 // Here we can make things inside Webpack available to Backbone views like preload.js.
 
-import { Message } from '../conversation/Message';
+import { Message } from '../components/conversation/Message';
-import { Reply } from '../conversation/Reply';
+import { Reply } from '../components/conversation/Reply';
 
 
 // TypeScript wants two things when you import:
@@ -23,13 +23,13 @@ import { Reply } from '../conversation/Reply';
 // Anything else will raise an error, that it can't find the module. And so, we ignore...
 
 // @ts-ignore
-import gif from '../../../fixtures/giphy-GVNvOUpeYmI7e.gif';
+import gif from '../../fixtures/giphy-GVNvOUpeYmI7e.gif';
 // @ts-ignore
-import mp3 from '../../../fixtures/incompetech-com-Agnus-Dei-X.mp3';
+import mp3 from '../../fixtures/incompetech-com-Agnus-Dei-X.mp3';
 // @ts-ignore
-import txt from '../../../fixtures/lorem-ipsum.txt';
+import txt from '../../fixtures/lorem-ipsum.txt';
 // @ts-ignore
-import mp4 from '../../../fixtures/pixabay-Soap-Bubble-7141.mp4';
+import mp4 from '../../fixtures/pixabay-Soap-Bubble-7141.mp4';
 
 export {
   mp3,
@@ -48,10 +48,10 @@ const theme = urlOptions.theme || 'android';
 const locale = urlOptions.locale || 'en';
 
 // @ts-ignore
-import localeMessages from '../../../_locales/en/messages.json';
+import localeMessages from '../../_locales/en/messages.json';
 
 // @ts-ignore
-import { setup } from '../../modules/i18n';
+import { setup } from '../../js/modules/i18n';
 
 const i18n = setup(locale, localeMessages);
 

tsconfig.json

@@ -11,7 +11,7 @@
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     // "outDir": "./",                        /* Redirect output structure to the directory. */
-    "rootDir": "./js/react",                  /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    "rootDir": "./ts",                        /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
     // "removeComments": true,                /* Do not emit comments to output. */
     // "noEmit": true,                        /* Do not emit outputs. */
     // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */