Merge remote-tracking branch 'origin/release/next-userspace' into lf/chromatic

pkg/interface/.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
-  extends: '@urbit'
+  extends: '@urbit',
+  env: {
+    'jest': true
+  }
 };

pkg/interface/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/typescript', '@babel/preset-react'],
+  plugins: [
+    '@babel/transform-runtime',
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-optional-chaining',
+    '@babel/plugin-proposal-class-properties',
+    'react-hot-loader/babel'
+  ]
+};

pkg/interface/jest.config.js

@@ -0,0 +1,194 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/en/configuration.html
+ */
+
+module.exports = {
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "/private/var/folders/7w/hvrpvq7978bbb9kwkbhsn6rr0000gn/T/jest_dx",
+
+  // Automatically clear mock calls and instances between every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  // collectCoverage: false,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: undefined,
+
+  // The directory where Jest should output its coverage files
+  coverageDirectory: 'coverage'
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // Indicates which provider should be used to instrument code for coverage
+  // coverageProvider: "babel",
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {},
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  // moduleFileExtensions: [
+  //   "js",
+  //   "json",
+  //   "jsx",
+  //   "ts",
+  //   "tsx",
+  //   "node"
+  // ],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  // moduleNameMapper: {},
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  // preset: undefined,
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state between every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state between every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  // setupFilesAfterEnv: [],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  // testEnvironment: "jest-environment-jsdom",
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  // testMatch: [
+  //   "**/__tests__/**/*.[jt]s?(x)",
+  //   "**/?(*.)+(spec|test).[tj]s?(x)"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  // testPathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jasmine2",
+
+  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+  // testURL: "http://localhost",
+
+  // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+  // timers: "real",
+
+  // A map from regular expressions to paths to transformers
+  // transform: undefined,
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  // transformIgnorePatterns: [
+  //   "/node_modules/",
+  //   "\\.pnp\\.[^\\/]+$"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  // verbose: undefined,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};

pkg/interface/package.json

@@ -83,6 +83,7 @@
     "@urbit/eslint-config": "file:../npm/eslint-config",
     "@welldone-software/why-did-you-render": "^6.1.0",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-root-import": "^6.6.0",
@@ -94,6 +95,7 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^4.5.1",
     "husky": "^6.0.0",
+    "jest": "^26.6.3",
     "lint-staged": "^11.0.0",
     "loki": "^0.28.1",
     "moment-locales-webpack-plugin": "^1.2.0",
@@ -115,7 +117,7 @@
     "build:dev": "cross-env NODE_ENV=development webpack --config config/webpack.dev.js",
     "build:prod": "cd ../npm/api && npm ci && cd ../../interface && cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
     "start": "webpack-dev-server --config config/webpack.dev.js",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "prepare": "cd ../.. && husky install pkg/interface/.husky",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",

pkg/interface/src/logic/lib/tokenizeMessage.js

@@ -1,121 +1,85 @@
 import urbitOb from 'urbit-ob';
 import { parsePermalink, permalinkToReference } from '~/logic/lib/permalinks';
 
-const URL_REGEX = new RegExp(String(/^(([\w\-\+]+:\/\/)[-a-zA-Z0-9:@;?&=\/%\+\.\*!'\(\),\$_\{\}\^~\[\]`#|]+\w)/.source));
+const URL_REGEX = new RegExp(String(/^([^[\]]*?)(([\w\-\+]+:\/\/)[-a-zA-Z0-9:@;?&=\/%\+\.\*!'\(\),\$_\{\}\^~\[\]`#|]+[\w/])([\s\S]*)/.source));
 
-const GROUP_REGEX = new RegExp(String(/^~[-a-z_]+\/[-a-z]+/.source));
+const PATP_REGEX = /^([\s\S]*?)(~[a-z_-]+)([\s\S]*)/;
 
-const isUrl = (string) => {
+const GROUP_REGEX = new RegExp(String(/^([\s\S ]*?)(~[-a-z_]+\/[-a-z]+)([\s\S]*)/.source));
+
+const convertToGroupRef = group => `web+urbitgraph://group/${group}`;
+
+export const isUrl = (str) => {
   try {
-    return URL_REGEX.test(string);
+    return URL_REGEX.test(str);
   } catch (e) {
     return false;
   }
 };
 
-const isRef = (str) => {
-  return isUrl(str) && str.startsWith('web+urbitgraph://');
-};
-
-const isGroup = str => {
-  try {
-    return GROUP_REGEX.test(str);
-  } catch (e) {
-    return false;
-  }
-}
-
-const convertToGroupRef = (group) => `web+urbitgraph://group/${group}`;
-
 const tokenizeMessage = (text) => {
-  let messages = [];
+  const messages = [];
   // by line
-  let currTextBlock = [];
-  let isInCodeBlock = false;
-  let endOfCodeBlock = false;
-  text.split(/\r?\n/).forEach((line, index) => {
-    // by space
-    let currTextLine = [];
-    // A line of backticks enters and exits a codeblock
-    if (line.trim().startsWith('```')) {
-      // But we need to check if we've ended a codeblock
-      endOfCodeBlock = isInCodeBlock;
-      isInCodeBlock = (!isInCodeBlock);
+  let blocks = [];
+  let currBlock = [];
+  const foo = text.split('`');
+  foo.forEach((str, index) => {
+    const isCode = index % 2 === 1;
+    if(isCode) {
+      blocks.push(str);
+      return;
+    }
+    if(str.length === 0) {
+      blocks.push('');
+      return;
+    }
+    while(str.length > 0) {
+      const resetAndPush = (content) => {
+        blocks.push(currBlock.join(''));
+        messages.push({ text: blocks.join('`') });
+        currBlock = [];
+        blocks = [];
+        messages.push(content);
+      };
+      const link = str.match(URL_REGEX);
+      if(link) {
+        const [,pfix, url, protocol, sfix] = link;
+        const perma = parsePermalink(url);
+        currBlock.push(pfix);
+        if(protocol === 'web+urbitgraph://' && perma) {
+          resetAndPush(permalinkToReference(perma));
         } else {
-      endOfCodeBlock = false;
+          resetAndPush({ url });
         }
-
-    if (isInCodeBlock || endOfCodeBlock) {
-      currTextLine = [line];
-    } else {
-      const words = line.split(/\s/);
-      words.forEach((word, idx) => {
-        const str = isGroup(word) ?  convertToGroupRef(word) : word;
-
-        const last = words.length - 1 === idx;
-        if (
-          (str.startsWith('`') && str !== '`')
-          || (str === '`' && !isInCodeBlock)
-        ) {
-          isInCodeBlock = true;
+        str = sfix;
+        continue;
       }
-        if(isRef(str) && !isInCodeBlock) {
-          if (currTextLine.length > 0 || currTextBlock.length > 0) {
-            // If we're in the middle of a message, add it to the stack and reset
-            currTextLine.push('');
-            messages.push({ text: currTextBlock.join('\n') + currTextLine.join(' ') });
-            currTextBlock = last ? [''] : [];
-            currTextLine = [];
+      const groupRef = str.match(GROUP_REGEX);
+      if(groupRef) {
+        const [,pfix, group, sfix] = groupRef;
+        currBlock.push(pfix);
+        const perma = parsePermalink(convertToGroupRef(group));
+        resetAndPush(permalinkToReference(perma));
+        str = sfix;
+        continue;
       }
-          const link = parsePermalink(str);
-          if(!link) {
-            messages.push({ url: str });
-          } else {
-            const reference = permalinkToReference(link);
-            messages.push(reference);
+      const patp = str.match(PATP_REGEX);
+      if(Boolean(patp) && urbitOb.isValidPatp(patp[2])) {
+        const [,pfix, mention, sfix] = patp;
+        currBlock.push(pfix);
+        resetAndPush({ mention });
+        str = sfix;
+        continue;
       }
-          currTextLine = [];
-        } else if (isUrl(str) && !isInCodeBlock) {
-          if (currTextLine.length > 0 || currTextBlock.length > 0) {
-            // If we're in the middle of a message, add it to the stack and reset
-            currTextLine.push('');
-            messages.push({ text: currTextBlock.join('\n') + currTextLine.join(' ') });
-            currTextBlock = last ? [''] : [];
-            currTextLine = [];
+      currBlock.push(str);
+      str = '';
     }
-          messages.push({ url: str });
-          currTextLine = [];
-        } else if(urbitOb.isValidPatp(str) && !isInCodeBlock) {
-          if (currTextLine.length > 0 || currTextBlock.length > 0) {
-            // If we're in the middle of a message, add it to the stack and reset
-            currTextLine.push('');
-            messages.push({ text: currTextBlock.join('\n') + currTextLine.join(' ') });
-            currTextBlock = last ? [''] : [];
-            currTextLine = [];
-          }
-          messages.push({ mention: str });
-          currTextLine = [];
-
-        } else {
-          currTextLine.push(str);
-        }
-        if (
-          (str.endsWith('`') && str !== '`')
-          || (str === '`' && isInCodeBlock)
-        ) {
-          isInCodeBlock = false;
-        }
-
+    blocks.push(currBlock.join(''));
+    currBlock = [];
   });
-    }
-    currTextBlock.push(currTextLine.join(' '))
-  });
-
-  if (currTextBlock.length) {
-    // Add any remaining message
-    messages.push({ text: currTextBlock.join('\n') });
-  }
+  messages.push({ text: blocks.join('`') });
+  console.log(messages);
   return messages;
 };
 
-export { tokenizeMessage as default, isUrl, URL_REGEX };
+export { tokenizeMessage as default, URL_REGEX };

pkg/interface/src/logic/lib/tokenizeMessage.test.js

@@ -0,0 +1,68 @@
+/* eslint-disable max-lines-per-function */
+import tokenizeMessage from './tokenizeMessage';
+
+describe('tokenizeMessage', () => {
+  it('should find mention with punctuation', () => {
+    const [before, mention, after] = tokenizeMessage('hi ~hastuc-dibtux!');
+
+    expect(before.text).toEqual('hi ');
+    expect(mention.mention).toEqual('~hastuc-dibtux');
+    expect(after.text).toEqual('!');
+  });
+  it('should not parse mention inside inline code', () => {
+    const example = 'hi `~hastuc-dibtux`';
+    const [first] = tokenizeMessage(example);
+    expect(first.text).toEqual(example);
+    const secondExample = 'foo`~hastuc-dibtux`bar`baz`~hastuc-dibtux';
+
+    const [{ text }, { mention }] = tokenizeMessage(secondExample);
+    expect(text).toEqual('foo`~hastuc-dibtux`bar`baz`');
+    expect(mention).toEqual('~hastuc-dibtux');
+  });
+  it('should parse urls', () => {
+    const example = 'this is a url: http://tlon.io/';
+    const [{ text }, { url }] = tokenizeMessage(example);
+    expect(text).toEqual('this is a url: ');
+    expect(url).toEqual('http://tlon.io/');
+  });
+  it('should ignore urls in codemode', () => {
+    const example = 'some urls `http://ignore.me` http://urbit.org';
+    const [{ text }, { url }] = tokenizeMessage(example);
+    expect(text).toEqual('some urls `http://ignore.me` ');
+    expect(url).toEqual('http://urbit.org');
+  });
+
+  it('should autoexpand group references', () => {
+    const example = 'test ~bitbet-bolbel/urbit-community foo';
+    const [{ text }, { reference }, { text: foo }] = tokenizeMessage(example);
+    expect(text).toEqual('test ');
+    expect(reference.group).toEqual('/ship/~bitbet-bolbel/urbit-community');
+    expect(foo).toEqual(' foo');
+  });
+
+  it('should preserve trailing newlines and spaces', () => {
+    const example = 'test \n \n foo \n \n \n';
+    const [{ text }] = tokenizeMessage(example);
+    expect(text).toEqual(example);
+  });
+
+  it('should handle multiline messages with references', () => {
+    const example = 'web+urbitgraph://group/~fabled-faster/interface-testing-facility/graph/~hastuc-dibtux/test-book-7531/170141184505064871297992714192687202304\n\nlol here [is a link](https://urbit.org)';
+    const [{ text }, { reference }, { text: text2 }] = tokenizeMessage(example);
+    expect(text).toEqual('');
+    expect(reference.graph.graph).toEqual('/ship/~hastuc-dibtux/test-book-7531');
+    expect(reference.graph.index).toEqual('/170141184505064871297992714192687202304');
+    expect(text2).toEqual('\n\nlol here [is a link](https://urbit.org)');
+  });
+
+  it('should handle links on newlines after references', () => {
+    const example = 'web+urbitgraph://group/~fabled-faster/interface-testing-facility/graph/~hastuc-dibtux/test-book-7531/170141184505064871297992714192687202304\n\nhttps://urbit.org a link is here!';
+    const [{ text }, { reference }, { text: text2 }, { url }, { text: text3 }] = tokenizeMessage(example);
+    expect(text).toEqual('');
+    expect(reference.graph.graph).toEqual('/ship/~hastuc-dibtux/test-book-7531');
+    expect(reference.graph.index).toEqual('/170141184505064871297992714192687202304');
+    expect(text2).toEqual('\n\n');
+    expect(url).toEqual('https://urbit.org');
+    expect(text3).toEqual(' a link is here!');
+  });
+});

pkg/interface/src/views/apps/chat/components/ChatInput.tsx

@@ -178,7 +178,14 @@ export class ChatInput extends Component<ChatInputProps, ChatInputState> {
           changeEvent={this.eventHandler}
           placeholder='Message...'
         />
-        <Box mx='12px' flexShrink={0} height='16px' width='16px' flexBasis='16px'>
+        <Box
+          mx='12px'
+          mr={this.props.canUpload ? '12px' : 3}
+          flexShrink={0}
+          height='16px'
+          width='16px'
+          flexBasis='16px'
+        >
           <Icon
             icon='Dojo'
             cursor='pointer'
@@ -186,9 +193,16 @@ export class ChatInput extends Component<ChatInputProps, ChatInputState> {
             color={state.inCodeMode ? 'blue' : 'black'}
           />
         </Box>
-        <Box ml='12px' mr={3} flexShrink={0} height='16px' width='16px' flexBasis='16px'>
         {this.props.canUpload ? (
-            this.props.uploading ? (
+          <Box
+            ml='12px'
+            mr={3}
+            flexShrink={0}
+            height='16px'
+            width='16px'
+            flexBasis='16px'
+          >
+            {this.props.uploading ? (
               <LoadingSpinner />
             ) : (
               <Icon
@@ -200,9 +214,9 @@ export class ChatInput extends Component<ChatInputProps, ChatInputState> {
                   this.props.promptUpload().then(this.uploadSuccess)
                 }
               />
-            )
-          ) : null}
+            )}
           </Box>
+        ) : null}
         {MOBILE_BROWSER_REGEX.test(navigator.userAgent) ?
           <Box
             ml={2}

pkg/interface/src/views/components/CommentItem.tsx

@@ -3,8 +3,7 @@ import { Group } from '@urbit/api';
 import { GraphNode } from '@urbit/api/graph';
 import bigInt from 'big-integer';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { Link, useHistory } from 'react-router-dom';
-import styled from 'styled-components';
+import { Link } from 'react-router-dom';
 import GlobalApi from '~/logic/api/global';
 import { roleForShip } from '~/logic/lib/group';
 import { getPermalinkForGraph } from '~/logic/lib/permalinks';
@@ -14,11 +13,6 @@ import useMetadataState from '~/logic/state/metadata';
 import Author from '~/views/components/Author';
 import { GraphContent } from '../landscape/components/Graph/GraphContent';
 
-const ClickBox = styled(Box)`
-  cursor: pointer;
-  padding-left: ${p => p.theme.space[2]}px;
-`;
-
 interface CommentItemProps {
   pending?: boolean;
   comment: GraphNode;
@@ -60,7 +54,8 @@ export function CommentItem(props: CommentItemProps) {
   };
 
   const ourMention = post?.contents?.some((e) => {
-    if (!('mention' in e)) return false;
+    if (!('mention' in e))
+return false;
     return e?.mention && e?.mention === window.ship;
   });
 
@@ -98,7 +93,6 @@ export function CommentItem(props: CommentItemProps) {
       ref.current.scrollIntoView({ block: 'center' });
     }
   }, [ref, props.highlighted]);
-  const history = useHistory();
 
   const { copyDisplay, doCopy } = useCopy(
     getPermalinkForGraph(
@@ -109,7 +103,7 @@ export function CommentItem(props: CommentItemProps) {
     'Copy Link'
   );
 
-  if (!post || typeof post === 'string') {
+  if (!post || typeof post === 'string' || typeof comment.post === 'string') {
     return (
       <Box width="100%" textAlign="left" py="3">
         <Text gray>This comment has been deleted.</Text>