Markdown & Project links (bldrs-ai#280)

* Rename IssueControl.test to match under-test IssuesControl. * comments: enhance comment display adding react-markdown support. Many new es6 module deps were introduced, which prompted a new approach for jest config. Not sure how best to handle this but works for now. * Change project link in test GitHub message to inlined markdown. Always suffix imported icons with "Icon". Remove defunct ShareMenu.jsx * More suffixing imported icons with "Icon". Fix repo log message. * css: restore link styling in issues and comments. * markdown: shrink comment body a bit to restore view showing just first two lines.
rebpbr · Jul 27, 2022 · 70c13f0 · 70c13f0
1 parent 2d23baf
commit 70c13f0
Show file tree

Hide file tree

Showing 13 changed files with 1,116 additions and 441 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,13 +1,13 @@
 module.exports = {
-  'presets': [
+  presets: [
     '@babel/preset-env',
-    '@babel/preset-react'
+    '@babel/preset-react',
   ],
-  'env': {
-    'test': {
-      'presets': [
-        ['@babel/preset-env', { 'targets': { 'node': 'current' } }],
+  env: {
+    test: {
+      presets: [
+        ['@babel/preset-env', {targets: {node: 'current'}}],
       ],
     },
-  }
+  },
 }
diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/index.js.map b/docs/index.js.map
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,61 @@
+/**
+ * TODO(pablo): this is a work-around for jest not understanding es6
+ * modules.  I don't really understand the problem, just that this
+ * works.
+ */
+const esModules = [
+  '@bldrs-ai',
+  'bail',
+  'comma-separated-tokens',
+  'decode-named-character-reference',
+  'hast-util-whitespace',
+  'is-plain-obj',
+  'mdast-util-definitions',
+  'mdast-util-from-markdown',
+  'mdast-util-to-hast',
+  'mdast-util-to-string',
+  'micromark',
+  'property-information',
+  'space-separated-tokens',
+  'remark-rehype',
+  'react-markdown',
+  'remark-parse',
+  'three',
+  'trim-lines',
+  'trough',
+  'unified',
+  'unist-builder',
+  'unist-util-generated',
+  'unist-util-is',
+  'unist-util-position',
+  'unist-util-stringify-position',
+  'unist-util-visit',
+  'vfile',
+  'vfile-message',
+  'web-ifc',
+  'web-ifc-three',
+  'web-ifc-viewer',
+].join('|')
+
+
+module.exports = {
+  verbose: false,
+  testEnvironment: 'jsdom',
+  testPathIgnorePatterns: [
+    'src/Share.test.js',
+  ],
+  transform: {
+    '\\.[jt]sx?$': 'babel-jest',
+    '^.+\\.svg$': '<rootDir>/svgTransform.js',
+  },
+  transformIgnorePatterns: [
+    `/node_modules/(?!${esModules}/)`,
+  ],
+  moduleNameMapper: {
+    '^.+\\.css$': 'identity-obj-proxy',
+  },
+  setupFilesAfterEnv: [
+    '<rootDir>/src/setupTests.js',
+    '@alex_neo/jest-expect-message',
+  ],
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r364",
+  "version": "1.0.0-r370",
   "main": "src/index.jsx",
   "homepage": "https://github.com/bldrs-ai/Share",
   "bugs": {
@@ -33,7 +33,9 @@
     "normalize.css": "^8.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-markdown": "^8.0.3",
     "react-router-dom": "^6.0.2",
+    "remark-gfm": "^3.0.1",
     "three": "^0.135",
     "web-ifc-viewer": "^1.0.184",
     "web-vitals": "^2.1.0",
@@ -78,26 +80,5 @@
     "jsdom": "^20.0.0",
     "shx": "^0.3.4",
     "storybook-addon-material-ui": "^0.9.0-alpha.24"
-  },
-  "jest": {
-    "verbose": false,
-    "testEnvironment": "jsdom",
-    "testPathIgnorePatterns": [
-      "src/Share.test.js"
-    ],
-    "transform": {
-      "\\.[jt]sx?$": "babel-jest",
-      "^.+\\.svg$": "<rootDir>/svgTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!(web-ifc|web-ifc-three|web-ifc-viewer|three|@bldrs-ai)/)"
-    ],
-    "moduleNameMapper": {
-      "^.+\\.css$": "identity-obj-proxy"
-    },
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.js",
-      "@alex_neo/jest-expect-message"
-    ]
   }
 }
diff --git a/src/Components/IssueCard.jsx b/src/Components/IssueCard.jsx
@@ -1,17 +1,18 @@
 import React, {useState, useEffect} from 'react'
+import ReactMarkdown from 'react-markdown'
 import Paper from '@mui/material/Paper'
 import {makeStyles} from '@mui/styles'
 import useStore from '../store/useStore'
 import {assertDefined} from '../utils/assert'
 import {addHashParams} from '../utils/location'
+import {isRunningLocally} from '../utils/network'
 import {TooltipIconButton} from './Buttons'
 import {ISSUE_PREFIX} from './IssuesControl'
 import {setCameraFromEncodedPosition, addCameraUrlParams, removeCameraUrlParams} from './CameraControl'
 import {useIsMobile} from './Hooks'
-import Select from '../assets/2D_Icons/Select.svg'
-import Camera from '../assets/2D_Icons/Camera.svg'
-import Share from '../assets/2D_Icons/Share.svg'
-import {isRunningLocally} from '../utils/network'
+import SelectIcon from '../assets/2D_Icons/Select.svg'
+import CameraIcon from '../assets/2D_Icons/Camera.svg'
+import ShareIcon from '../assets/2D_Icons/Share.svg'
 
 
 /**
@@ -106,6 +107,7 @@ export default function IssueCard({
     setTimeout(() => setSnackMessage(null), pauseTimeMs)
   }
 
+
   return (
     <Paper
       elevation={0}
@@ -137,7 +139,7 @@ export default function IssueCard({
         }
       </div>
       <div className={classes.body}>
-        {body}
+        <ReactMarkdown>{body}</ReactMarkdown>
       </div>
       {textOverflow &&
          <ShowMore
@@ -180,7 +182,7 @@ const CardTitle = ({avatarUrl, title, username, selected, isComment, date, onCli
             size='small'
             placement='bottom'
             onClick={onClickSelect}
-            icon={<Select/>}
+            icon={<SelectIcon/>}
           />
         </div>
         }
@@ -210,16 +212,14 @@ const CardImage = ({imageUrl}) => {
 const ShowMore = ({onClick, expandText}) => {
   const classes = useStyles()
   return (
-    <>
-      <div className={classes.showMore}
-        onClick={onClick}
-        role='button'
-        tabIndex={0}
-        onKeyPress={onClick}
-      >
-        {expandText ? 'show less' : 'show more'}
-      </div>
-    </>
+    <div className={classes.showMore}
+      onClick={onClick}
+      role='button'
+      tabIndex={0}
+      onKeyPress={onClick}
+    >
+      {expandText ? 'show less' : 'show more'}
+    </div>
   )
 }
 
@@ -238,7 +238,7 @@ const CardActions = ({onClickNavigate, onClickShare, numberOfComments, selectCar
            placement='bottom'
            onClick={onClickNavigate}
            icon={
-             <Camera
+             <CameraIcon
                className={classes.buttonNavigate}
                style={{width: '24px', height: '24px'}}
              />}
@@ -254,7 +254,7 @@ const CardActions = ({onClickNavigate, onClickShare, numberOfComments, selectCar
              setShareIssue(!shareIssue)
            }}
            icon={
-             <Share
+             <ShareIcon
                className={classes.buttonShare} style={{width: '24px', height: '24px'}}
              />}
          />
@@ -311,13 +311,18 @@ const useStyles = makeStyles((theme) => ({
     cursor: 'pointer',
   },
   body: {
-    height: (props) => props.expandText ? 'auto' : '62px',
-    margin: '5px',
-    paddingLeft: '5px',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    fontSize: '1em',
-    lineHeight: '1.3em',
+    'height': (props) => props.expandText ? 'auto' : '58px',
+    'margin': '5px',
+    'paddingLeft': '5px',
+    'overflow': 'hidden',
+    'textOverflow': 'ellipsis',
+    'fontSize': '1em',
+    'lineHeight': '1.3em',
+    // Restore link styling for issues and comments
+    '& a': {
+      color: 'green',
+      textDecoration: 'underline',
+    },
   },
   showMore: {
     cursor: 'pointer',

diff --git a/src/Components/IssueCard.test.jsx b/src/Components/IssueCard.test.jsx
@@ -15,15 +15,19 @@ test('IssueCard', () => {
 test('Number of comments', () => {
   const id = 123
   const index = 123
-  render(<ShareMock><IssueCard id={id} index={index} numberOfComments={10}/></ShareMock>)
-  expect(screen.getByText(10)).toBeInTheDocument()
+  const commentCount = 10
+  render(<ShareMock><IssueCard id={id} index={index} numberOfComments={commentCount}/></ShareMock>)
+  expect(screen.getByText(commentCount)).toBeInTheDocument()
 })
 
 
 test('Select the issue card', () => {
   const id = 123
   const index = 123
-  const rendered = render(<ShareMock><IssueCard id={id} index={index} title="Select the issue card - title"/></ShareMock>)
+  const rendered = render(
+      <ShareMock>
+        <IssueCard id={id} index={index} title="Select the issue card - title"/>
+      </ShareMock>)
   const selectIssueButton = rendered.getByTestId('test-button')
   fireEvent.click(selectIssueButton)
   expect(selectIssueButton).not.toBeInTheDocument()
@@ -33,12 +37,16 @@ test('Select the issue card', () => {
 test('Click on the card to select', () => {
   const id = 123
   const index = 123
-  const rendered = render(<ShareMock><IssueCard id={id} index={index} title="Click on the card to select"/></ShareMock>)
+  const rendered = render(
+      <ShareMock>
+        <IssueCard id={id} index={index} title="Click on the card to select"/>
+      </ShareMock>)
   const selectionContainer = rendered.getByTestId('selectionContainer')
   fireEvent.click(selectionContainer)
   expect(screen.getByText('Click on the card to select')).toBeInTheDocument()
 })
 
+
 test('Camera Position control', () => {
   const id = 123
   const index = 123

diff --git a/src/Components/IssuesControl.jsx b/src/Components/IssuesControl.jsx
@@ -1,17 +1,17 @@
 import React, {useEffect} from 'react'
 import {makeStyles, useTheme} from '@mui/styles'
 import Paper from '@mui/material/Paper'
+import useStore from '../store/useStore'
 import {getIssues, getComments} from '../utils/GitHub'
 import debug from '../utils/debug'
 import {addHashParams, removeHashParams} from '../utils/location'
-import useStore from '../store/useStore'
 import IssueCard from './IssueCard'
 import {TooltipIconButton} from './Buttons'
 import {setCameraFromEncodedPosition, addCameraUrlParams, removeCameraUrlParams} from './CameraControl'
 import CloseIcon from '../assets/2D_Icons/Close.svg'
-import Back from '../assets/2D_Icons/Back.svg'
-import Next from '../assets/2D_Icons/NavNext.svg'
-import Previous from '../assets/2D_Icons/NavPrev.svg'
+import BackIcon from '../assets/2D_Icons/Back.svg'
+import NextIcon from '../assets/2D_Icons/NavNext.svg'
+import PreviousIcon from '../assets/2D_Icons/NavPrev.svg'
 
 
 /** The prefix to use for issue id in the Url hash. */
@@ -72,22 +72,22 @@ export function IssuesNavBar() {
                  removeHashParams(window.location, ISSUE_PREFIX)
                  setSelectedIssueId(null)
                }}
-               icon={<Back style={{width: '30px', height: '30px'}}/>}
+               icon={<BackIcon style={{width: '30px', height: '30px'}}/>}
              />
              <>
                <TooltipIconButton
                  title='Previous Comment'
                  placement='bottom'
                  size='small'
                  onClick={() => selectIssue('previous')}
-                 icon={<Previous style={{width: '20px', height: '20px'}}/>}
+                 icon={<PreviousIcon style={{width: '20px', height: '20px'}}/>}
                />
                <TooltipIconButton
                  title='Next Comment'
                  size='small'
                  placement='bottom'
                  onClick={() => selectIssue('next')}
-                 icon={<Next style={{width: '20px', height: '20px'}}/>}
+                 icon={<NextIcon style={{width: '20px', height: '20px'}}/>}
                />
              </>
            </>

diff --git a/src/Components/IssueControl.test.jsx → src/Components/IssuesControl.test.jsx b/src/Components/IssueControl.test.jsx → src/Components/IssuesControl.test.jsx