Merge pull request #5 from opendatahub-io/prettier

Adding prettier automatic code formatting

frontend/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 100
+}

frontend/package.json

@@ -14,13 +14,20 @@
     "react-scripts": "3.4.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "EXTEND_ESLINT=true react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "plugin:prettier/recommended"
+    ],
+    "rules": {
+      "prettier/prettier": "warn"
+    }
   },
   "browserslist": {
     "production": [
@@ -33,5 +40,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "prettier": "^2.0.5"
   }
 }

frontend/src/App.js

@@ -1,23 +1,20 @@
-import React from 'react';
-import '@patternfly/react-core/dist/styles/base.css';
-import {
-  Page,
-} from '@patternfly/react-core';
-import Launcher from './Launcher/Launcher.js'
-import Header from './Header.js'
+import React from "react";
+import "@patternfly/react-core/dist/styles/base.css";
+import { Page } from "@patternfly/react-core";
+import Launcher from "./Launcher/Launcher.js";
+import Header from "./Header.js";
 
-  /**
-   * This function wraps up the output from Launcher.js into a React Fragment and returns to the index page
-   */
+/**
+ * This function wraps up the output from Launcher.js into a React Fragment and returns to the index page
+ */
 function App() {
   return (
     <React.Fragment>
-    <Page
-          header={Header}
-        >
-    <Launcher />      
-    </Page>
+      <Page header={Header}>
+        <Launcher />
+      </Page>
     </React.Fragment>
-      )}
+  );
+}
 
 export default App;

frontend/src/Header.js

@@ -1,18 +1,10 @@
-    import React from 'react';
-    import {
-        PageHeader,
-        Brand
-    } from '@patternfly/react-core';
-    import imgLogo from './images/opendatahub.png'
-
-
-    /**
-     * It provides Page Header on top of the page
-     */
-    const Header = (
-        <PageHeader
-        logo={<Brand src={imgLogo} alt="ODH Logo" className = "header"/>}
-        />
-    );
+import React from "react";
+import { PageHeader, Brand } from "@patternfly/react-core";
+import imgLogo from "./images/opendatahub.png";
 
-    export default Header;
+/**
+ * It provides Page Header on top of the page
+ */
+const Header = <PageHeader logo={<Brand src={imgLogo} alt="ODH Logo" className="header" />} />;
+
+export default Header;

frontend/src/Launcher/Launcher.js

@@ -1,87 +1,100 @@
-  import React from 'react';
-  import {
-  PageSection,
-  PageSectionVariants,
-  Grid,
-  GridItem
-  } from '@patternfly/react-core';
-  import OdhAppCard from './components/OdhAppCard';
-  import imgOpenShift from '../images/openshift.svg'
-  import imgJupyter from '../images/jupyterhub.svg'
-  import imgSpark from '../images/spark.png'
-  import imgKubeFlow from '../images/kubeflow.png'
-  import imgGrafana from '../images/grafana.png'
-  import imgAirflow from '../images/airflow.png'
-  import imgArgo from '../images/argo.png'
-  import imgSeldon from '../images/seldon.jpg'
+import React from "react";
+import { PageSection, PageSectionVariants, Grid, GridItem } from "@patternfly/react-core";
+import OdhAppCard from "./components/OdhAppCard";
+import imgOpenShift from "../images/openshift.svg";
+import imgJupyter from "../images/jupyterhub.svg";
+import imgSpark from "../images/spark.png";
+import imgKubeFlow from "../images/kubeflow.png";
+import imgGrafana from "../images/grafana.png";
+import imgAirflow from "../images/airflow.png";
+import imgArgo from "../images/argo.png";
+import imgSeldon from "../images/seldon.jpg";
 
-  const odhApps = [
+const odhApps = [
   {
-  img: imgJupyter,
-  altName: 'JupyterHub logo',
-  link: 'https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login',
-  description: 'Jupyter Notebooks provide a way of creating and sharing documents containing live code, visualisations',
-  buttonName: 'Launch Jupyter'
+    img: imgJupyter,
+    altName: "JupyterHub logo",
+    link: "https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login",
+    description:
+      "Jupyter Notebooks provide a way of creating and sharing documents containing live code, visualisations",
+    buttonName: "Launch Jupyter",
   },
   {
     img: imgSpark,
-    altName: 'Spark logo',
-    link: 'https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login',
-    description: 'Apache Spark is an open-source distributed general-purpose cluster-computing framework written in Scala',
-    buttonName: 'Launch Spark'
+    altName: "Spark logo",
+    link: "https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login",
+    description:
+      "Apache Spark is an open-source distributed general-purpose cluster-computing framework written in Scala",
+    buttonName: "Launch Spark",
   },
   {
     img: imgKubeFlow,
-    altName: 'Kubeflow logo',
-    link: 'https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login',
-    description: 'The Kubeflow project is dedicated to making deployments of machine learning (ML) workflows on Kubernetes developed by Google in 2017',
-    buttonName: 'Launch KubeFlow'
+    altName: "Kubeflow logo",
+    link: "https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login",
+    description:
+      "The Kubeflow project is dedicated to making deployments of machine learning (ML) workflows on Kubernetes developed by Google in 2017",
+    buttonName: "Launch KubeFlow",
   },
   {
     img: imgOpenShift,
-    altName: 'Openshift logo',
-    link: 'https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login',
-    description: 'OpenShift is a family of containerization software developed by Red Hat - flagship product is the OpenShift Container Platform',
-    buttonName: 'Launch Openshift'
+    altName: "Openshift logo",
+    link: "https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login",
+    description:
+      "OpenShift is a family of containerization software developed by Red Hat - flagship product is the OpenShift Container Platform",
+    buttonName: "Launch Openshift",
   },
   {
     img: imgGrafana,
-    altName: 'Grafana logo',
-    link: 'https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login',
-    description: 'Grafana is a multi-platform open source analytics and interactive visualization web application written in Go',
-    buttonName: 'Launch Grafana'
+    altName: "Grafana logo",
+    link: "https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login",
+    description:
+      "Grafana is a multi-platform open source analytics and interactive visualization web application written in Go",
+    buttonName: "Launch Grafana",
   },
   {
     img: imgAirflow,
-    altName: 'Airflow logo',
-    link: 'https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login',
-    description: 'Apache Airflow is a workflow automation and scheduling system that can be used to manage data pipelines',
-    buttonName: 'Launch AirFlow'
+    altName: "Airflow logo",
+    link: "https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login",
+    description:
+      "Apache Airflow is a workflow automation and scheduling system that can be used to manage data pipelines",
+    buttonName: "Launch AirFlow",
   },
   {
     img: imgArgo,
-    altName: 'Argo logo',
-    link: 'http://argo-portal-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/workflows',
-    description: 'Argo Workflows is an open source container-native workflow engine for orchestrating parallel jobs on Kubernetes',
-    buttonName: 'Launch Argo'
+    altName: "Argo logo",
+    link: "http://argo-portal-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/workflows",
+    description:
+      "Argo Workflows is an open source container-native workflow engine for orchestrating parallel jobs on Kubernetes",
+    buttonName: "Launch Argo",
   },
   {
     img: imgSeldon,
-    altName: 'Seldon logo',
-    link: 'https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login',
-    description: 'The Seldon orchestrates all ML deployments providing functionality for monitoring and operations of ML systems',
-    buttonName: 'Launch Seldon'
-  }
-
-  ];
+    altName: "Seldon logo",
+    link: "https://jupyterhub-odhdemo.apps.hmf.q7z3.p1.openshiftapps.com/hub/login",
+    description:
+      "The Seldon orchestrates all ML deployments providing functionality for monitoring and operations of ML systems",
+    buttonName: "Launch Seldon",
+  },
+];
 
-  function Launcher() {
+function Launcher() {
   return (
     <PageSection variant={PageSectionVariants.light}>
-    <Grid hasGutter className="gridItem">
-      {odhApps.map(a => <GridItem span={12} sm={12} md={6} lg={4} xl={3} key={a.altName}><OdhAppCard img={a.img} link={a.link} description={a.description} buttonName={a.buttonName} altName={a.altName}/></GridItem>)}
-    </Grid>          
+      <Grid hasGutter className="gridItem">
+        {odhApps.map((a) => (
+          <GridItem span={12} sm={12} md={6} lg={4} xl={3} key={a.altName}>
+            <OdhAppCard
+              img={a.img}
+              link={a.link}
+              description={a.description}
+              buttonName={a.buttonName}
+              altName={a.altName}
+            />
+          </GridItem>
+        ))}
+      </Grid>
     </PageSection>
-      )}
+  );
+}
 
-  export default Launcher;
+export default Launcher;