copy from RedHatInsights/insights-frontend-starter-app template

Copied removing unused parts, and includes some initial changes.

.babelrc

@@ -0,0 +1,13 @@
+{
+    "presets": [
+        "@babel/env",
+        "@babel/react",
+        "@babel/flow"
+    ],
+    "plugins": [
+        "@babel/plugin-transform-runtime",
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-proposal-object-rest-spread",
+        "lodash"
+    ]
+}

.eslintrc.yml

@@ -0,0 +1,121 @@
+parser: babel-eslint
+env:
+  browser: true
+  node: true
+  es6: true
+settings:
+  react:
+    version: '16.0'
+extends:
+  - 'eslint:recommended'
+  - 'prettier'
+  - 'plugin:react/recommended'
+parserOptions:
+  ecmaVersion: 7
+  sourceType: module
+globals:
+  beforeAll: true
+  describe: true
+  expect: true
+  global: true
+  insights: true
+  it: true
+  mount: true
+  process: true
+  render: true
+  shallow: true
+  React: true
+rules:
+  array-bracket-spacing:
+    - error
+    - always
+    - objectsInArrays: false
+  comma-dangle: 0
+  comma-spacing:
+    - 2
+    - after: true
+  comma-style: 2
+  camelcase: 0
+  curly:
+    - error
+    - all
+  dot-notation: 2
+  eol-last: 2
+  eqeqeq: 2
+  func-names:
+    - error
+    - never
+  indent:
+    - error
+    - 4
+    - SwitchCase: 1
+      MemberExpression: 0
+      ImportDeclaration: 1
+      ObjectExpression: 1
+  react/jsx-curly-spacing:
+    - error
+    - always
+    - allowMultiline: false
+    - spacing:
+      - objectLiterals:
+        - never
+    - children: true
+  key-spacing: 2
+  keyword-spacing: 2
+  linebreak-style:
+    - error
+    - unix
+  max-len:
+    - 2
+    - 150
+  new-cap: 2
+  no-bitwise: 2
+  no-caller: 2
+  no-mixed-spaces-and-tabs: 2
+  no-multiple-empty-lines:
+    - error
+    - max: 1
+  no-trailing-spaces: 2
+  no-use-before-define:
+    - error
+    - functions: false
+  no-undef: 2
+  no-unused-vars: 2
+  no-var: 2
+  no-with: 2
+  object-shorthand: 2
+  object-curly-spacing:
+    - error
+    - always
+    - objectsInObjects: false
+      arraysInObjects: false
+  one-var:
+    - error
+    - never
+  padding-line-between-statements:
+    - error
+    - blankLine: always
+      prev: block-like
+      next: "*"
+  quote-props:
+    - error
+    - as-needed
+  quotes:
+    - error
+    - single
+    - allowTemplateLiterals: true
+  semi:
+    - error
+    - always
+  space-before-blocks: 2
+  space-in-parens: 2
+  space-infix-ops: 2
+  space-unary-ops:
+    - error
+    - words: false
+      nonwords: false
+  vars-on-top: 2
+  wrap-iife: 2
+  yoda:
+    - error
+    - never

.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# vscode config
+.vscode/
+
+# ide config
+.idea/
+
+# dependencies
+node_modules
+
+# production
+dist
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.DS_Store
+coverage
+
+*~

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-recommended-scss"
+}

.travis.yml

@@ -0,0 +1,19 @@
+language: node_js
+sudo: required
+notifications:
+node_js:
+- '10'
+install:
+- npm ci
+- npm install -g codecov
+script:
+  - npm run travis:verify
+after_success:
+  - codecov
+  - curl -sSL https://raw.githubusercontent.com/RedHatInsights/insights-frontend-builder-common/master/src/bootstrap.sh | bash -s
+env:
+  global:
+  - REPO="git@github.com:gundersanne/osbuild-installer-frontend-build"
+  - REPO_DIR="osbuild-installer-frontend-build"
+  - BRANCH=${TRAVIS_PULL_REQUEST_BRANCH:-$TRAVIS_BRANCH}
+  - NODE_OPTIONS="--max-old-space-size=4096 --max_old_space_size=4096"

config/dev.webpack.config.js

@@ -0,0 +1,14 @@
+
+const { resolve } = require('path');
+const config = require('@redhat-cloud-services/frontend-components-config');
+const { config: webpackConfig, plugins } = config({
+    rootFolder: resolve(__dirname, '../'),
+    debug: true,
+    https: false,
+    port: 8002,
+});
+
+module.exports = {
+    ...webpackConfig,
+    plugins
+};

config/prod.webpack.config.js

@@ -0,0 +1,11 @@
+
+const { resolve } = require('path');
+const config = require('@redhat-cloud-services/frontend-components-config');
+const { config: webpackConfig, plugins } = config({
+    rootFolder: resolve(__dirname, '../')
+});
+
+module.exports = {
+    ...webpackConfig,
+    plugins
+};

config/setupTests.js

@@ -0,0 +1,10 @@
+import { configure, mount, render, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import React from 'react';
+
+configure({ adapter: new Adapter() });
+
+global.shallow = shallow;
+global.render = render;
+global.mount = mount;
+global.React = React;

config/test.webpack.config.js

@@ -0,0 +1,11 @@
+
+const { resolve } = require('path');
+const config = require('@redhat-cloud-services/frontend-components-config');
+const { config: webpackConfig, plugins } = config({
+    rootFolder: resolve(__dirname, '../')
+});
+
+module.exports = {
+    ...webpackConfig,
+    plugins
+};

package.json

@@ -0,0 +1,85 @@
+{
+  "name": "osbuild-installer",
+  "version": "1.1.0",
+  "private": false,
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@patternfly/patternfly": "^2.62.0",
+    "@patternfly/react-core": "3.134.2",
+    "@patternfly/react-table": "^2.25.6",
+    "@redhat-cloud-services/frontend-components": "1.0.2",
+    "@redhat-cloud-services/frontend-components-utilities": "1.0.0",
+    "classnames": "^2.2.6",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
+    "react-router-dom": "^5.1.2",
+    "redux": "^4.0.5",
+    "redux-logger": "^3.0.6",
+    "redux-promise-middleware": "^6.1.2"
+  },
+  "jest": {
+    "coverageDirectory": "./coverage/",
+    "collectCoverage": true,
+    "collectCoverageFrom": [
+      "src/**/*.js",
+      "!src/**/stories/*"
+    ],
+    "setupFiles": [
+      "<rootDir>/config/setupTests.js"
+    ],
+    "roots": [
+      "<rootDir>/src/"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-flow": "^7.8.3",
+    "@babel/preset-react": "^7.8.3",
+    "@redhat-cloud-services/frontend-components-config": "1.0.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.3",
+    "babel-jest": "^25.1.0",
+    "babel-plugin-dual-import": "^1.2.1",
+    "babel-plugin-lodash": "^3.3.4",
+    "css-loader": "^3.4.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.4",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.10.0",
+    "eslint-loader": "^3.0.3",
+    "eslint-plugin-react": "^7.18.3",
+    "jest": "^25.1.0",
+    "npm-run-all": "^4.1.5",
+    "prop-types": "^15.7.2",
+    "stylelint": "^13.1.0",
+    "stylelint-config-recommended-scss": "^4.2.0",
+    "stylelint-scss": "^3.14.2",
+    "webpack": "^4.41.6",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "^3.3.11"
+  },
+  "scripts": {
+    "build": "webpack --config config/prod.webpack.config.js",
+    "build:prod": "NODE_ENV=production webpack --config config/prod.webpack.config.js",
+    "test": "jest --verbose",
+    "lint": "npm-run-all lint:*",
+    "lint:js": "eslint config src",
+    "lint:js:fix": "eslint config src --fix",
+    "lint:sass": "stylelint 'src/**/*.scss' --config .stylelintrc.json",
+    "start": "NODE_ENV=development webpack-dev-server --config config/dev.webpack.config.js",
+    "travis:verify": "npm-run-all build lint test",
+    "verify": "npm run travis:verify"
+  },
+  "insights": {
+    "appname": "osbuild-installer"
+  }
+}

profiles/local-frontend-and-api.js

@@ -0,0 +1,15 @@
+/*global module*/
+
+const SECTION = 'apps';
+const APP_ID = 'osbuild-installer';
+const FRONTEND_PORT = 8002;
+const API_PORT = 8086;
+const routes = {};
+
+routes[`/beta/${SECTION}/${APP_ID}`] = { host: `http://localhost:${FRONTEND_PORT}` };
+routes[`/${SECTION}/${APP_ID}`]      = { host: `http://localhost:${FRONTEND_PORT}` };
+routes[`/beta/apps/${APP_ID}`]       = { host: `http://localhost:${FRONTEND_PORT}` };
+routes[`/apps/${APP_ID}`]            = { host: `http://localhost:${FRONTEND_PORT}` };
+routes[`/api/${APP_ID}`]             = { host: `http://localhost:${API_PORT}` };
+
+module.exports = { routes };

profiles/local-frontend.js

@@ -0,0 +1,13 @@
+/*global module*/
+
+const SECTION = 'apps';
+const APP_ID = 'osbuild-installer';
+const FRONTEND_PORT = 8002;
+const routes = {};
+
+routes[`/beta/${SECTION}/${APP_ID}`] = { host: `http://localhost:${FRONTEND_PORT}` };
+routes[`/${SECTION}/${APP_ID}`]      = { host: `http://localhost:${FRONTEND_PORT}` };
+routes[`/beta/apps/${APP_ID}`]       = { host: `http://localhost:${FRONTEND_PORT}` };
+routes[`/apps/${APP_ID}`]            = { host: `http://localhost:${FRONTEND_PORT}` };
+
+module.exports = { routes };

src/App.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+import { connect } from 'react-redux';
+import { Routes } from './Routes';
+import './App.scss';
+
+class App extends Component {
+    constructor() {
+        super();
+
+        this.state = {};
+    }
+
+    componentDidMount () {
+        insights.chrome.init();
+        insights.chrome.identifyApp('osbuild-installer');
+        this.appNav = insights.chrome.on('APP_NAVIGATION', event => this.props.history.push(`/${event.navId}`));
+        insights.chrome.auth.getUser().then(data => {
+            this.setState({ identity: data.identity });
+        });
+    }
+
+    componentWillUnmount () {
+        this.appNav();
+    }
+
+    render () {
+        return (
+            <Routes childProps={ this.props } />
+        );
+    }
+}
+
+App.propTypes = {
+    history: PropTypes.object
+};
+
+/**
+ * withRouter: https://reacttraining.com/react-router/web/api/withRouter
+ * connect: https://github.com/reactjs/react-redux/blob/master/docs/api.md
+ *          https://reactjs.org/docs/higher-order-components.html
+ */
+export default withRouter (connect()(App));

src/App.scss

@@ -0,0 +1,3 @@
+// Importing Global Variables
+@import "~@redhat-cloud-services/frontend-components-utilities/files/Utilities/_all";
+@import "~@redhat-cloud-services/frontend-components/index.css";

src/Routes.js

@@ -0,0 +1,28 @@
+import { Route, Switch, Redirect } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import React from 'react';
+import asyncComponent from './Utilities/asyncComponent';
+
+const LandingPage = asyncComponent(() => import('./SmartComponents/LandingPage/LandingPage'));
+
+const InsightsRoute = ({ component: Component, rootClass, ...rest }) => {
+    const root = document.getElementById('root');
+    root.removeAttribute('class');
+    root.classList.add(`page__${rootClass}`, 'pf-c-page__main');
+    root.setAttribute('role', 'main');
+    return (<Route { ...rest } component={ Component } />);
+};
+
+InsightsRoute.propTypes = {
+    component: PropTypes.func,
+    rootClass: PropTypes.string
+};
+
+export const Routes = () => {
+    return (
+        <Switch>
+            <InsightsRoute exact path='/landing' component={ LandingPage } rootClass='landingpage'/>
+            <Redirect to='/landing'/>
+        </Switch>
+    );
+};

src/SmartComponents/LandingPage/CreateImageCard.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+
+import {
+    Button,
+    Card,
+    CardHeader,
+    CardBody,
+    Flex,
+    FlexModifiers,
+    Form,
+    FormGroup,
+    FormSelect,
+    FormSelectOption,
+} from '@patternfly/react-core';
+
+import { DefaultApi } from '@redhat-cloud-services/osbuild-installer';
+
+class CreateImageCard extends Component {
+    constructor(props) {
+        super(props);
+
+        this.buildImage = this.buildImage.bind(this);
+    }
+
+    buildImage() {
+        let request = {
+            image_builds: [
+                {
+                    distribution: 'fedora-31',
+                    architecture: 'x86_64',
+                    image_type: 'qcow2',
+                    repositories: [{ baseurl: 'http://download.fedoraproject.org/pub/fedora/linux/releases/30/Everything/x86_64/os/' }],
+                }]
+        };
+        let api = new DefaultApi();
+        api.osbuildInstallerViewsV1BuildImage(request).then(x => {
+            console.log('response', x);
+            alert('composing ' + x.data.compose_id);
+        });
+    }
+
+    render() {
+        return (
+            <Card>
+                <CardHeader>Create a new image</CardHeader>
+                <CardBody>
+                    <FormGroup label="Release" fieldId="release-select">
+                        <FormSelect aria-label="FormSelect Input">
+                            {[ '8-2', '8-1' ].map((option, index) => (
+                                <FormSelectOption key={ index } value={ option } label={ option } />
+                            ))}
+                        </FormSelect>
+                    </FormGroup>
+                </CardBody>
+                <CardBody>
+                    <Form>
+                        <FormGroup label="Package set" fieldId="package-set">
+                            <Flex breakpointMods={ [{ modifier: FlexModifiers.column }] }>
+                                <Button variant="secondary">Web server</Button>
+                                <Button variant="secondary">SQL server</Button>
+                                <Button variant="secondary">General database server</Button>
+                                <Button variant="secondary">Performance sensitive workload</Button>
+                                <Button variant="secondary">Show more options</Button>
+                                <Button  onClick={ () => this.buildImage() } variant="Primary">Build image (this one actually works)</Button>
+                            </Flex>
+                        </FormGroup>
+                    </Form>
+                </CardBody>
+            </Card>);
+    }
+}
+
+export default CreateImageCard;

src/SmartComponents/LandingPage/LandingPage.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+import { Flex, FlexItem, FlexModifiers } from '@patternfly/react-core';
+import {
+    Main,
+    PageHeader,
+    PageHeaderTitle
+} from '@redhat-cloud-services/frontend-components';
+
+import CreateImageCard from './CreateImageCard';
+
+/**
+ * A smart component that handles all the api calls and data needed by the dumb components.
+ * Smart components are usually classes.
+ *
+ * https://reactjs.org/docs/components-and-props.html
+ * https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43
+ */
+class LandingPage extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <PageHeader>
+                    <PageHeaderTitle title='Image Builder' />
+                </PageHeader>
+                <Main>
+                    <Flex>
+                        <FlexItem breakpointMods={ [{ modifier: FlexModifiers.column }, { modifier: FlexModifiers['flex-1'] }] }>
+                            <CreateImageCard />
+                        </FlexItem>
+                    </Flex>
+                </Main>
+            </React.Fragment>
+        );
+    }
+}
+
+export default withRouter(LandingPage);

src/Utilities.scss

@@ -0,0 +1,3 @@
+// Sass Imports
+
+@import "~@redhat-cloud-services/frontend-components-utilities/files/Utilities/_all";

src/Utilities/asyncComponent.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import { Skeleton } from '@redhat-cloud-services/frontend-components';
+
+/**
+ * Webpack allows loading components asynchronously by using import().
+ *
+ *      Ex) const Component = asyncComponent(() => import('component');
+ *
+ *          class aClass extends React.Component {
+ *              render() {
+ *                  return (<Component prop1="prop1" prop2="prop2" ... />);
+ *              }
+ *          }
+ *
+ *  https://reactjs.org/docs/higher-order-components.html
+ *
+ * @param importComponent a function that contains and async import statement
+ *      Ex) () => import('react-component')
+ *
+ * @returns {AsyncComponent} The imported component or can return a loading
+ */
+export default function asyncComponent(importComponent) {
+    class AsyncComponent extends Component {
+        constructor(props) {
+            super(props);
+
+            this.state = {
+                component: null
+            };
+        }
+
+        async componentDidMount() {
+            const { default: component } = await importComponent();
+
+            this.setState({
+                component
+            });
+        }
+
+        render() {
+            const C = this.state.component;
+
+            return C ? <C { ...this.props } /> : <Skeleton />;
+        }
+    }
+
+    return AsyncComponent;
+}

src/Utilities/getBaseName.js

@@ -0,0 +1,15 @@
+function getBaseName(pathname) {
+    let release = '/';
+    const pathName = pathname.split('/');
+
+    pathName.shift();
+
+    if (pathName[0] === 'beta') {
+        pathName.shift();
+        release = `/beta/`;
+    }
+
+    return `${release}${pathName[0]}/${pathName[1] || ''}`;
+}
+
+export default getBaseName;

src/entry-dev.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { init } from './store';
+import App from './App';
+import logger from 'redux-logger';
+import getBaseName from './Utilities/getBaseName';
+
+ReactDOM.render(
+    <Provider store={ init(logger).getStore() }>
+        <Router basename={ getBaseName(window.location.pathname) }>
+            <App/>
+        </Router>
+    </Provider>,
+
+    document.getElementById('root')
+);

src/entry.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { init } from './store';
+import App from './App';
+import getBaseName from './Utilities/getBaseName';
+
+ReactDOM.render(
+    <Provider store={ init().getStore() }>
+        <Router basename={ getBaseName(window.location.pathname) }>
+            <App />
+        </Router>
+    </Provider>,
+
+    document.getElementById('root')
+);

src/entry.test.js

@@ -0,0 +1,13 @@
+import getBaseName from './Utilities/getBaseName';
+
+describe('Utilities/getBaseName', () => {
+    it('should find the right base name on Stable ', () => {
+        expect(getBaseName('/insights/foo/bar/baz')).toEqual('/insights/foo');
+        expect(getBaseName('/rhcs/bar/bar/baz')).toEqual('/rhcs/bar');
+    });
+
+    it('should find the right base name on Beta ', () => {
+        expect(getBaseName('/beta/insights/foo/bar/baz')).toEqual('/beta/insights/foo');
+        expect(getBaseName('/beta/test/fff/bar/baz')).toEqual('/beta/test/fff');
+    });
+});

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="UTF-8">
+        <title>Starter App</title>
+        <esi:include src="/@@env/chrome/snippets/head.html"/>
+    </head>
+    <body>
+        <esi:include src="/@@env/chrome/snippets/body.html"/>
+    </body>
+</html>

src/store/index.js

@@ -0,0 +1,25 @@
+import ReducerRegistry from '@redhat-cloud-services/frontend-components-utilities/files/ReducerRegistry';
+import promiseMiddleware from 'redux-promise-middleware';
+
+let registry;
+
+export function init (...middleware) {
+    if (registry) {
+        throw new Error('store already initialized');
+    }
+
+    registry = new ReducerRegistry({}, [
+        promiseMiddleware,
+        ...middleware
+    ]);
+
+    return registry;
+}
+
+export function getStore () {
+    return registry.getStore();
+}
+
+export function register (...args) {
+    return registry.register(...args);
+}