Dev

.github/workflows/docker-cd-dev.yml

@@ -27,4 +27,4 @@ jobs:
         context: .
         platforms: linux/amd64,linux/arm64
         push: true
-        tags: codexrems/crd-request-generator:REMSvCurrent
+        tags: codexrems/request-generator:REMSvCurrent

.github/workflows/docker-cd.yml

@@ -27,4 +27,4 @@ jobs:
         context: .
         platforms: linux/amd64,linux/arm64
         push: true
-        tags: codexrems/crd-request-generator:REMSvCurrent
+        tags: codexrems/request-generator:REMSvCurrent

.github/workflows/docker-tag-cd.yml

@@ -23,7 +23,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v4
         with:
-          images: codexrems/crd-request-generator
+          images: codexrems/request-generator
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'

.vscode/launch.json

@@ -7,11 +7,11 @@
         {
             "type": "chrome",
             "request": "launch",
-            "name": "Debug CRD-Request-Generator (Launch Docker)",
+            "name": "Debug Request-Generator (Launch Docker)",
             "url": "http://localhost:3000",
             "webRoot": "${workspaceFolder}",
             "sourceMapPathOverrides": {
-                "/home/node/app/crd-request-generator/*": "${webRoot}/*",
+                "/home/node/app/request-generator/*": "${webRoot}/*",
             },
             "runtimeArgs": [
                 "--remote-debugging-port=9222"
@@ -20,18 +20,18 @@
         {
             "type": "chrome",
             "request": "attach",
-            "name": "Debug CRD-Request-Generator (Attach Docker)",
+            "name": "Debug Request-Generator (Attach Docker)",
             "port": 9222,
             "urlFilter": "http://localhost:3000/*",
             "webRoot": "${workspaceFolder}",
             "sourceMapPathOverrides": {
-                "/home/node/app/crd-request-generator/*": "${webRoot}/*",
+                "/home/node/app/request-generator/*": "${webRoot}/*",
             }
         },
         {
             "type": "chrome",
             "request": "launch",
-            "name": "Debug CRD-Request-Generator (Launch Local)",
+            "name": "Debug Request-Generator (Launch Local)",
             "url": "http://localhost:3000",
             "webRoot": "${workspaceFolder}",
             "runtimeArgs": [
@@ -42,7 +42,7 @@
             "type": "chrome",
             "request": "attach",
             "port": 9222,
-            "name": "Debug CRD-Request-Generator (Attach Local)",
+            "name": "Debug Request-Generator (Attach Local)",
             "urlFilter": "http://localhost:3000/*",
             "webRoot": "${workspaceFolder}",
         }

Dockerfile

@@ -1,5 +1,5 @@
 FROM node:14-alpine
-WORKDIR /home/node/app/crd-request-generator
+WORKDIR /home/node/app/request-generator
 COPY --chown=node:node . .
 RUN npm install
 COPY --chown=node:node . .

Dockerfile.dev

@@ -1,5 +1,5 @@
 FROM node:14-alpine
-WORKDIR /home/node/app/crd-request-generator
+WORKDIR /home/node/app/request-generator
 COPY --chown=node:node . .
 RUN npm install
 EXPOSE 3000

README.md

@@ -1,10 +1,10 @@
-# CRD Request Generator
-This subproject provides a small web application that is capable of generating CRD requests and displaying the CDS Hooks cards that are provided as a response. This project is written in JavaScript and runs in [node.js](https://nodejs.org/en/).  
+# Request Generator
+This subproject provides a small web application that is capable of generating requests and displaying the CDS Hooks cards that are provided as a response. This project is written in JavaScript and runs in [node.js](https://nodejs.org/en/).  
 
 ## Running the request generator standalone
 1. Install node.js
 2. Clone the repository
-  * `git clone https://github.com/mcode/crd-request-generator.git`
+  * `git clone https://github.com/mcode/request-generator.git`
 3. Install the dependencies
   * `cd request-generator`
   * `npm install`

src/components/ConsoleBox/ConsoleBox.js

@@ -1,3 +1,4 @@
+import { Button } from '@mui/material';
 import React, {Component} from 'react';
 
 export default class ConsoleBox extends Component {
@@ -46,17 +47,15 @@ export default class ConsoleBox extends Component {
       let i = 0;
     return (
         <div>
-
-                <span className={this.state.headerStatus + " consoleHeader"} onClick={this.toggleConsole} >
-
-                </span>
-            <div id="your_div" className = {this.state.showStatus + " consoleMain resize"}>
-
-                {this.props.logs.map(element => {
-                    i++;
-                    return <div key = {i}> <span className={element.type}>{element.content}</span></div>
-                }) }
-            </div>
+          <Button variant='outlined' className={this.state.headerStatus + " consoleHeader"} onClick={this.toggleConsole}>
+            {this.state.showStatus === 'showConsole' ? 'Close console' : 'Open Developer console' }
+          </Button>
+          <div id="your_div" className = {this.state.showStatus + " consoleMain resize"}>
+              {this.props.logs.map(element => {
+                  i++;
+                  return <div key = {i}> <span className={element.type}>{element.content}</span></div>
+              }) }
+          </div>
         </div>
 
     )

src/components/ConsoleBox/consoleBox.css

@@ -45,22 +45,12 @@
     transition-delay: 0s;
 }
 
-.showHeader:hover{
-    color:#CCCCCC;
-}
-
 .showHeader{
     width:100%;
 }
-.showHeader::after{
-    content:"-";
-}
-.collapseHeader::after{
-    content:"+";
-}
 
 .collapseHeader{
-    width:25px;
+    width: 250px;
     color: black;
     text-align:center;
     border-width: 1px 1px 1px 1px;

src/components/DisplayBox/DisplayBox.js

@@ -1,12 +1,11 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import FHIR from "fhirclient";
-import styles from './card-list.css';
-import Button from 'terra-button';
-import TerraCard from 'terra-card';
-import Text from 'terra-text';
+import './card-list.css';
+import { Button, Card, CardActions, CardContent, Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 import axios from 'axios';
 import ReactMarkdown from 'react-markdown';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
 import { retrieveLaunchContext } from '../../util/util';
 import './displayBox.css';
 
@@ -164,8 +163,9 @@ export default class DisplayBox extends Component{
    * Prevent the source link from opening in the same tab
    * @param {*} e - Event emitted when source link is clicked
    */
-  launchSource(e) {
+  launchSource(e, link) {
     e.preventDefault();
+    window.open(link.url, '_blank');
   }
 
   exitSmart(e) {
@@ -231,23 +231,23 @@ export default class DisplayBox extends Component{
         if (!source.label) { return null; }
         let icon;
         if (source.icon) {
-          icon = <img className={styles['card-icon']} src={source.icon} alt="Could not fetch icon" width="100" height="100" />;
+          icon = <img className={'card-icon'} src={source.icon} alt="Could not fetch icon" width="100" height="100" />;
         }
         if (!this.props.isDemoCard) {
           return (
-            <div className={styles['card-source']}>
-              Source: <a className={styles['source-link']} href={source.url || '#'} onClick={e => this.launchSource(e)}>{source.label}</a>
+            <div className='card-source'>
+              Source: <a className='source-link' href={source.url || '#'} onClick={e => this.launchSource(e, source)}>{source.label}</a>
               {icon}
             </div>
           );
         }
         return (
-          <div className={styles['card-source']}>
+          <div className='card-source'>
             Source:
             <a // eslint-disable-line jsx-a11y/anchor-is-valid
-              className={styles['source-link']}
+              className='source-link'
               href="#"
-              onClick={e => this.launchSource(e)}
+              onClick={e => this.launchSource(e, source)}
             >
               {source.label}
             </a>
@@ -280,13 +280,13 @@ export default class DisplayBox extends Component{
               const card = JSON.parse(JSON.stringify(c));
 
               // -- Summary --
-              const summarySection = <Text fontSize={18} weight={700} color={summaryColors[card.indicator]}>{card.summary}</Text>;
+              const summarySection = <p>{card.summary}</p>;
 
               // -- Source --
               const sourceSection = card.source && Object.keys(card.source).length ? this.renderSource(card.source) : '';
 
               // -- Detail (ReactMarkdown supports Github-flavored markdown) --
-              const detailSection = card.detail ? <div style={{color: summaryColors.info}}><ReactMarkdown source={card.detail} /></div> : <Text color='grey'>None</Text>;
+              const detailSection = card.detail ? <div><ReactMarkdown source={card.detail} /></div> : <p style={{color: 'grey'}}>None</p>;
 
               // -- Suggestions --
               let suggestionsSection = [];
@@ -299,10 +299,9 @@ export default class DisplayBox extends Component{
                     <Button
                       key={ind}
                       onClick={() => this.takeSuggestion(item, card.serviceUrl, buttonId, card.suggestions.length, cardInd, card.selectionBehavior)}
-                      text={item.label}
-                      variant={Button.Opts.Variants.EMPHASIS}
+                      variant="contained"
                       id={buttonId}
-                    />
+                    >{item.label}</Button>
                   );
                 });
               }
@@ -311,54 +310,75 @@ export default class DisplayBox extends Component{
               let linksSection;
               if (card.links) {
                 card.links = this.modifySmartLaunchUrls(card) || card.links;
-                linksSection = card.links.map((link, ind) => (
-                  <Button
-                    key={ind}
-                    onClick={e => this.launchLink(e, link)}
-                    text={link.label}
-                    variant={Button.Opts.Variants['DE-EMPHASIS']}
-                  />
-                ));
-              }
-
-              // -- Type --
-              var typeSection = "";
-              if (card.source.hasOwnProperty("topic")) {
-                typeSection = card.source.topic.display ? <div style={{color: summaryColors.info}}><ReactMarkdown source={card.source.topic.display} /></div> : <Text color='grey'>None</Text>;
+                linksSection = card.links.map((link, ind) => {
+                  if (link.type === 'smart') {
+                    return (
+                      <Button
+                      key={ind}
+                      variant="outlined"
+                      onClick={e => this.launchLink(e, link)}
+                      >
+                        {link.label}
+                      </Button>
+                    )
+                  }
+                  const pdfIcon = <PictureAsPdfIcon />;
+                  return (
+                    <Button
+                      key={ind}
+                      onClick={e => this.launchLink(e, link)}
+                      endIcon={pdfIcon}
+                    >{link.label}</Button>)
+                  }
+                );
               }
 
               const cardSectionHeaderStyle = { marginBottom: '2px', color: 'black' };
 
               const builtCard = (
-                <TerraCard key={cardInd} className='decision-card alert-info'>
-                  <h4 style={cardSectionHeaderStyle}>Summary</h4>
-                  <div>{summarySection}</div>
-
-                  <h4 style={cardSectionHeaderStyle}>Details</h4>
-                  <div>{detailSection}</div>
-
-                  <br/>
-                  <div>{sourceSection}</div>
-
-                  <div className={styles['suggestions-section']}>
-                    {suggestionsSection}
-                  </div>
-                  <div className={styles['links-section']}>
-                    {linksSection}
-                  </div>
-                  <h4 style={cardSectionHeaderStyle}>Type</h4>
-                  <div>{typeSection}</div>
-                </TerraCard>);
+                <Card variant='outlined' key={cardInd} className='decision-card alert-info'>
+                  <React.Fragment>
+                    <CardContent>
+                      <Typography style={cardSectionHeaderStyle} gutterBottom>
+                        Summary
+                      </Typography>
+                      <Typography variant="h5" component="div">
+                        {summarySection}
+                      </Typography>
+                      <br/>
+                      <Typography style={cardSectionHeaderStyle}gutterBottom>
+                        Details
+                      </Typography>
+                      <Typography variant="div">{detailSection}</Typography>
+                      <br/>
+                      <Typography variant="div" gutterBottom>
+                        {sourceSection}
+                      </Typography>
+                    </CardContent>
+                    <CardActions className={'links-section'}>
+                      {linksSection}
+                    </CardActions>
+                  </React.Fragment>
+                </Card>);
 
               renderedCards.push(builtCard);
             });
+
+            if (renderedCards.length === 0) {
+              return <div>
+                      Nofication Cards ({renderedCards.length})
+                      </div>;
+            }
+            return <div>
+                    Nofication Cards ({renderedCards.length})
+                    <div>
+                      {renderedCards}
+                    </div>
+                  </div>;
+          } else {
+            return <div>
+                  </div>;
           }
-          if (renderedCards.length === 0) { return <div><div className='decision-card alert-warning'>No Cards</div></div>; }
-          return <div>
-                  <div>
-                  {renderedCards}
-                  </div>
-                </div>;
         }
 
         componentDidUpdate() {

src/components/DisplayBox/card-list.css

@@ -2,9 +2,10 @@
     padding: 15px;
     margin: 10px;
     background: #fcfcfc;
-    border: 2px solid #ddd;
+    border: 1px solid rgba(0, 0, 0, 0.12);
     border-radius: 4px;
     border-left-width: 3px;
+    max-width: 800px;
   }
 
   .decision-card img {
@@ -33,9 +34,9 @@
     margin: 0 0 5px;
   }
 
-  .source-link {
-    color: blue;
-    text-decoration: none;
+  .source-link:hover {
+    color: rgb(0, 121, 190); 
+    text-decoration: underline;
   }
 
   .card-summary {
@@ -56,4 +57,14 @@
 
   .alert-error {
     border-left-color: #333;
-  }
+  }
+
+  .links-section {
+    display: inline !important;
+  }
+
+  .form-link {
+    display: flex;
+    align-items: center;
+    margin-right: 5px;
+  }