fnndsc / chris_store_ui

UI for the ChRIS Store

ChRIS_store_ui

UI for the ChRIS Store.

Quickstart

First, get the ChRIS store backend running. Assuming the backend is on http://localhost:8010/api/v1/:

docker run --rm -d --name chris_store_ui -p 3000:3000 -e REACT_APP_STORE_URL=http://localhost:8010/api/v1/ fnndsc/chris_store_ui:latest

Preconditions

Install latest Docker. Currently tested platforms:

• Ubuntu 16.04+
• MAC OS X 10.11+
• Fedora 31+ (Additional instructions for Fedora)

Optionally get the backend services up so you can fully test the UI against actual data

• Install latest Docker Compose
• On a Linux machine make sure to add your computer user to the docker group

Then open a terminal and fire the backend services up:

$ git clone https://github.com/FNNDSC/ChRIS_store.git
$ cd ChRIS_store
$ ./make.sh up

You can later remove all the backend containers and release storage volumes with:

$ cd ChRIS_store
$ ./make.sh down

Start UI development server

Using node and yarn package manager directly on the metal

Open a new terminal and type:

$ git clone https://github.com/FNNDSC/ChRIS_store_ui.git
$ cd ChRIS_store_ui
$ yarn install
$ yarn start

Using docker

Open a new terminal and type:

$ git clone https://github.com/FNNDSC/ChRIS_store_ui.git
$ cd ChRIS_store_ui
$ docker run --rm -it -v "$(pwd):/home/localuser" -p 3000:3000 -u $(id -u):$(id -g) --name chris_store_ui fnndsc/chris_store_ui:dev

Open http://localhost:3000 to view it in the browser.

Precommit

Before each commit, a precommit script is run automatically to ensure all tests pass and all JavaScript code follows the Airbnb style guide.

Please note that if you are using the docker commands then you need to run git inside the container. For instance open a new terminal and type:

$ docker exec -it chris_store_ui git status

Notes:

1. Add .env.local, .env.local, .env.development.local, .env.test.local, .env.production.local file at root to change any local settings

Additional Notes from Create React App:

This project was bootstrapped with Create React App.

Run the interactive tests

Using node and yarn package manager directly on the metal

Open a new terminal and type:

$ yarn test

Using docker

Open a new terminal and type:

$ docker exec -it chris_store_ui yarn test

Launches the test runner in the interactive watch mode.

See the section about running tests for more information.

Build the ChRIS Store UI app for production

$ cd ChRIS_store_ui
$ docker build -t local/chris_store_ui .

It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Deploy and serve the ChRIS Store UI app

$ docker run --name chris_store_ui -p <desired port>:3000 -d local/chris_store_ui

Development and deployment of the ChRIS Store UI directly on the metal

Consult the Wiki here.

Learn More

Interested in contributing? https://chrisproject.org/join-us

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

chris_store_ui's Issues

Add link to readme which gives a walkthrough to the project

Description

Add this link under the resources heading which gives a walkthrough about the project so that new contributors can know more about the project.

Group plugins by the same name (but different versions) in the search results

Minimum effort solution: show version next to the name.

Best solution: group versions of the same plugin under the name.

Footer stuff

• footer nav links are... not links
• copyright message outdated
• footer not expanded to bottom of page if main content is too small

Add Modify Plugin

Add the ability to modify a plugin once its created. Use @jbernal0019 's backend js api for modifiable fields.

Sorting of plugin search results

ChRIS_store_ui/src/components/Plugins/Plugins.js

Line 218 in ca45de4

title="Sort By"

Some sorts could be:

• alphabetical, by author
• alphabetical, by name
• chronological, by date created

are you sure?

provide are you sure? for delete action in dashboard page

A “copy url button” should be added to the plugin’s detail page.

Protected routes solution for pages that require credentials needed

In the Chris UI we have a protected routes solution that we can also use here in the store. https://github.com/rebecabkerr/ChRIS_ui/blob/feature/feed/src/components/common/PrivateRoute.tsx

https://github.com/rebecabkerr/ChRIS_ui/blob/feature/feed/src/routes.tsx

TODO: ChRIS Store fit & finish - a lot of minor fixes like replacing non-functional front page icons, filling it developer call to action copy

ChRIS Store: Implement HTML/CSS for redesigned plugin details page so it is ready for wiring with React.

We need HTML/CSS implementation of the mockups in #81

This issue is for @mindreeper2420 - waiting for team access to properly assign it.

More descriptive error messages in the UI

Render error messages per-field instead of per-form so that users know which fields are incorrect.

Replace sample data with data from the ChRIS store API

Developer Signup page seems to be broken

Developer Signup page seems to be broken in ChRIS_store_ui after merge of pull request for #44
The fields to signup have become immutable

Update quickstart page

The accurate documentation is here: https://github.com/FNNDSC/cookiecutter-chrisapp/wiki/Quickstart

Recoding the provided documentation onto this site would work. Below, two more advanced implementations are described:

a) The documentation is in ASCIIDoc format. It is possible to create an ASCIIDoc to JSX converter.

b) develop interactive features, such as having a terminal you can type in, or clicking on a terminal command to expand out help on what the command does.

Correct the placeholder text on chrisstore.co/create

Where it says

⭐ 10k+ 🕙 Last modified 1 hour ago

OpenSearch, aka Add (custom) Search Engine to Firefox or Chrome

Implement the OpenSearch specification so that https://chrisstore.co can be registered as a custom search engine to popular web browsers.

https://developer.mozilla.org/en-US/docs/Web/OpenSearch

TODO: ChRIS Store - add ability in UI to add additional admins per plugin.

ChRIS Store: Update plugin details page design to account for README display, parameters, and version listing

(@mairin)

getPlugins method performs an excessive amount of requests

See FNNDSC/fnndsc#13.

Plugin’s version should be taken from the backend as it is. So instead of v1.0.6 just 1.0.6.

Change create user flow

Developer page should Not have the form for creating an account
dashboard should keep the current behavior of appearing only once a dev has logged in.
Creating a dev account should be on a new page:
Should only show the signup form (currently on the Developers page)

@jbernal0019 @rudolphpienaar

Replace lorem ipsum with actual plugin documentation

Two possibilities:

• documentation should be fetched from the plugin's repo, or
• store documentation in ChRIS store backend

A clickable star button should be added to the plugins list and detail pages. The user will need to be logged in to be able to click that button. It can only be clicked once per user.

Re-enable auth tests

After updating the login flow auth tests do not work because an email address is the format for the username. Checking with @jbernal0019 to see how we can change the cube username to use an email format. See SignIn.test.js

Post-login destination

Same issue as described here
FNNDSC/ChRIS_ui#225

Do we need a background image for dashboard empty state ?

@mairin do we still need the bg image for the dashboard empty state my plugins card or does the css look ok?

Fuzzy queries must be possible for plugin's name.

See FNNDSC/ChRIS_store#2.

TODO: Upgrade ChRIS Store from PF3 to PF4

Apps available section doesn't do anything

The "Apps available" section on the homepage doesn't do anything. The app icons don't take you to the page related to the plugin and the down-arrow button doesn't open more plugins.

Expected Behavior

• The icons should open the page related to the plugin.
• The down arrow should either open a list or take you to the /plugins page

Travis Integration?

It might be helpful to have a Travis CI integration in order to run the unit tests.
I'm thinking that it would be nice to be able to see the status of the tests for each pull request.
Would you be interested in me adding this @jcaianirh?

Upgrade to latest chris store api

Upgrade to @jbernal0019 's updated chris store api where the plugins use index as the key instead of name.

404 page error on singin page

When the user clicks create account on the singin page, they are taken to a 404 page error.

Update to js client v1.1.5

Remove recompose dependency in favor of react hooks

https://github.com/acdlite/recompose#a-note-from-the-author-acdlite-oct-25-2018

Refreshing dashboard with multiple plugins causes duplication of name

Step 1 . create 3 plugins in the dashboard
step 2. delete a plugin
step 3. view existing plugins. there are duplicate plugins listed in the dashboard. though the deleted plugin is gone.

Alignment on validation patterns

We validate slightly differently on the create plugin form vs the create user form. Do we have a preference?

Show failed network requests in the UI

Error messages should exist somewhere in the UI to inform the user if the page has trouble loading.

Generate project badge after upload

e.g.

https://img.shields.io/badge/dynamic/json?color=blue&label=chrisstore.co&query=$.results%5B0%5D.version&url=https%3A%2F%2Fchrisstore.co%2Fapi%2Fv1%2F2%2Fplugins%2F

Use these assets to generate a badge in Markdown or ReStructuredText
https://github.com/FNNDSC/cookiecutter-chrisapp/tree/master/doc/assets/badge

e.g.

[![chrisstore.co](docs/chrisstore-badge.png)](https://chrisstore.co/plugin/72)

Optimize for internet explorer using polyfills and updated CSS

Add parameters to plugin details page.

Add parameters to plugin details page according to design here: https://github.com/FNNDSC/cube-design/blob/master/ChRIS-Store/mockups/plugin-details_parameters.1.png

Search remains on page navigation

After searching in the navbar and then clicking on a different page, the search term remains.

Change Developer nav to Quick Start

Plugin Creation with existing name

There is an unexpected behaviour of Plugin creation when a new plugin with an already existing name is created. These are the observations as of now:

• API rejects the request for a plugin creation with an existing name.

• Everything seems to be fine in the UI, but error messages can be seen on the console.

• As of now, the suspect is the state of the React component.

More investigation is needed.

Page keeps scroll position when navigating to a new page

prerender routes

Server side validation when adding developer account to store.

The store api provides pretty good feedback when returning a failed account creation which we should be taking advantage of in the ui to provide fine tune errors if a specific control value caused the rejection.

Fix broken navbar at 780px width

Add service class and redux to share server side data

We are currently making server requests per component, but will need to organize this data into service classes and allow sharing the data with redux.

Show warning when docker image ends with ":latest"

It is bad practice to use the :latest docker images, because the app (e.g. its command-line options) are subject to change in later versions.

The warning message might briefly explain why it's a bad practice, and suggest a remedy:

docker tag user/pl-mything:latest user/pl-mything:1.0.1
docker push user/pl-mything:1.0.1

Plugin’s detail page should also expose the plugin’s id