INTLY-3042 UI changes to CRUD App

[KevFan]

Description

To improve the overall user experience of the solution web explorer, the UI of the CRUD app from walkthrough 1 should be updated

This includes:

• Centering the layout
• Moving over to the Patternfly framework
• Adding information component explaining the concept behind the legacy app
• Clearing fields after submit for snappy UI feel
• Any other design changes to improve look & feel of the app

Verification

• With an openshift 4 cluster, install integreatly using operator source

  apiVersion: operators.coreos.com/v1
  kind: OperatorSource
  metadata:
  name: integreatly-operators
  namespace: openshift-marketplace
  spec:
  authorizationToken: {}
  displayName: Integreatly Operators
  endpoint: 'https://quay.io/cnr'
  publisher: Integreatly Publisher
  registryNamespace: integreatly
  type: appregistry

• Create Installation CR that points to your own cluster following this example:

  apiVersion: integreatly.org/v1alpha1
  kind: Installation
  metadata:
  name: example-installation
  spec:
  type: workshop
  namespacePrefix: integreatly-
  routingSubdomain: apps.example.com
  masterUrl: http://console.apps.example.com
  selfSignedCerts: true

• Browse to solution web explorer after installation and go through walkthrough 1 to integrate the CRUD app with the node js messaging app
• Find the deployment config of the CRUD app
  • should be named crud in a namespace like opentlc-mgr-tuto-xxxx
• Update the crud deployment config yaml container image to quay.io/kevfan/fruit-crud-app:latest
• Save deployment config change and wait for pod to be deployed.
• Refresh/Visit route to the CRUD application
• Verify the application, now uses the updated UI
• Verify fruit can still be created
• Verify fruit can still be deleted
• Verify there is now a footer with the following content:

  Basic CRUD application that represents a legacy system.

• Verify that integration still works correctly via creating fruit via node js messaging app

Screenshots

Mobile View

Desktop View

[dimitraz]

:eyes:

[aidenkeating]

@KevFan We'll need to bump the version in package.json and package-lock.json with this update

[KevFan]

@KevFan We'll need to bump the version in package.json and package-lock.json with this update

@aidenkeating Thanks! Didn't catch that, version has been bumped up now

[aidenkeating]

@tiffanynolan We are attempting an effort to update the UI of the apps that are deployed as part of Walkthrough 1A.

Although they're not part of the solution explorer itself, it'd be great to have UXD input on this, so we'd have some general guidelines on keeping apps looking good and consistent.

Would you mind taking a look when you get the chance?

[tiffanynolan]

@aidenkeating Sorry, I was on PTO. If it's not too late, I'll take a look today/tomorrow.

[tiffanynolan]

All set from UXD side. Thanks!

[aidenkeating]

@KevFan Let's merge this and create a new 1.0.2 tag on the repo. This should perform an automated quay build. Once the image is ready we can bump:

• https://github.com/integr8ly/tutorial-web-app-walkthroughs/blob/master/walkthroughs/1A-integrate-event-and-api-driven-apps/walkthrough.json#L79

and ensure the template update @R-Lawton has made in the OpenShift 3 installation repo points to the new 1.0.2 tag of the crud app image

[KevFan]

@KevFan Let's merge this and create a new 1.0.2 tag on the repo. This should perform an automated quay build. Once the image is ready we can bump:

• https://github.com/integr8ly/tutorial-web-app-walkthroughs/blob/master/walkthroughs/1A-integrate-event-and-api-driven-apps/walkthrough.json#L79

and ensure the template update @R-Lawton has made in the OpenShift 3 installation repo points to the new 1.0.2 tag of the crud app image

@aidenkeating Cool, sounds good to me, going to merge this now so