Merge branch 'dev' into talha/feedback-fixes

Author: talhainvenxion

.prettierrc.js

@@ -1,6 +1,7 @@
-module.exports =  {
-  semi:  true,
-  trailingComma:  'all',
-  singleQuote:  true,
-  tabWidth:  2,
-};
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  tabWidth: 2,
+  endOfLine: 'auto',
+};

README.md

@@ -32,7 +32,7 @@
     ·
     <a href="#-meet-the-team">Meet the Team</a>
     <br />
-    🎉 Version 0.0.1 is out. Check out the release notes
+    🎉 Version 0.1.0 is out. Check out the release notes
     <a href="https://github.com/zenml-io/zenml-dashboard/releases">here</a>.
     <br />
     <br />
@@ -45,6 +45,36 @@
   </p>
 </div>
 
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>🏁 Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#-getting-started">⚡ Getting Started</a>
+      <ul>
+        <li><a href="#-installation">🔋 Installation</a></li>
+        <li><a href="#-relationship-with-zenml">👨‍👦 Relationship with ZenML</a></li>
+        <li><a href="#-deploying-the-dashboard">🪐 Deploying the dashboard</a></li>
+      </ul>
+    </li>
+    <li>
+    <a href="#-user-experience">🏄 User Experience</a>
+    <ul>
+        <li><a href="#-log-in">🔐 Log In</a></li>
+        <li><a href="#-home-page">🏠 Home Page</a></li>
+        <li><a href="#-pipelines-stacks-and-components">🗂 Pipelines, Stacks, and Components</a></li>
+      </ul>
+    </li>
+    <li><a href="#-contributing">🙌 Contributing</a></li>
+    <li><a href="#-meet-the-team">👩‍👩‍👧‍👦 Meet the Team</a></li>
+    <li><a href="#-getting-help">🆘 Getting Help</a></li>
+    <li><a href="#-license">📜 License</a></li>
+  </ol>
+</details>
+
+<br />
+
+
 # ⚡ Getting Started
 
 ## 🔋 Installation
@@ -91,21 +121,23 @@ Which will serve the dashboard with the server at `http://localhost:8080`, with
 
 ## 👨‍👦 Relationship with ZenML
 
-The ZenML Dashboard is a Javascript React-based application that lives inside this repository, which is a sister repository of the main [ZenML Python package repo](https://github.com/zenml-io/zenml).
+The ZenML Dashboard is a Javascript React-based application that lives inside this repository, which is a sister repository of the main [ZenML Python package repo](https://github.com/zenml-io/zenml). 
+
+> **Note** - The ZenML Dashboard is meant to be used with the ZenML Server as a backend and cannot be used standalone.
 
 The dashboard build files come bundled into the [ZenML PyPi package](https://pypi.org/project/zenml/) and can be [served locally](https://docs.zenml.io/getting-started/deploying-zenml/using-cli.md) and/or [deployed on the cloud](https://docs.zenml.io/getting-started/deploying-zenml/deployment.md) through the main ZenML python package.
 
-Basically, each ZenML python package comes with the build files (generated by `yarn build`) of a certain version of this dashboard (all build files of the dashboard can be seen in the releases section of this github). Therefore, each ZenML pypi package has bundled in it a corresponding version of this dashboard.
+Basically, each ZenML `Python` package comes with the build files (generated by `yarn build`) of a certain version of this dashboard (all build files of the dashboard can be seen in the [releases](https://github.com/zenml-io/zenml-dashboard/releases) section of this GitHub repo). Therefore, each ZenML PyPi package has bundled in it a corresponding version of this dashboard.
 
-With the python package, you can then serve these static build files by doing:
+With the `Python` package, you can then serve these static build files by doing:
 
 ```
 zenml up
 ```
 
 ![img](./assets/zenml-up.gif)
 
-Which creates a local daemon that serves the files in a FastAPI server!
+Which creates a local daemon that serves the files in a [FastAPI](https://github.com/tiangolo/fastapi) server!
 
 ## 🪐 Deploying the dashboard
 
@@ -121,16 +153,16 @@ However, the option to deploy standalone is also available. `yarn build` creates
 
 Just don't forget to the set the `REACT_APP_BASE_API_URL` environment variable!
 
-# :bowtie: User Experience
+# 🏄 User Experience
 
-## Log In
+## 🔐 Log In
 
 ![img](./assets/screenshot-login.png)
 
-## Home Page
+## 🏠 Home Page
 ![img](./assets/screenshot-home.png)
 
-## Pipelines, Stacks and Components
+## 🗂 Pipelines, Stacks and Components
 ![img](./assets/dashboard.gif)
 
 
@@ -148,20 +180,12 @@ Guide](CONTRIBUTING.md) for all relevant details.
 
 ![Meet the Team](./assets/community_meetup.png)
 
-Have a question that's too hard to express on our Slack? Is it just too much effort to say everything on a 
-long GitHub issue? Or are you just curious about what ZenML has been up to in the past week? 
-
-Well, register now for the ZenML Meet the Community session to get your answers!
-It's free and open to everyone.
-
 Every week, the ZenML [core team](https://zenml.io/company#CompanyTeam) will pop in for 30 minutes to interact directly with the community. 
 Sometimes we'll be presenting a feature, other times we'll take questions and have fun. 
 
-Join us if you are curious about ZenML, or just want to talk shop about MLOps.
+[Register now](https://zenml.io/meet) for the ZenML Meet the Community session. It's free and open to everyone.
 
-We will host the gathering every Wednesday 8:30AM PT (5:30PM CET). 
-Register now through [this link](https://www.eventbrite.com/e/zenml-meet-the-community-tickets-354426688767), 
-or subscribe to the [public events calendar](https://calendar.google.com/calendar/u/0/r?cid=Y19iaDJ0Zm44ZzdodXBlbnBzaWplY3UwMmNjZ0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t) to get notified 
+Or subscribe to our [public events calendar](https://calendar.google.com/calendar/u/0/r?cid=Y19iaDJ0Zm44ZzdodXBlbnBzaWplY3UwMmNjZ0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t) to get notified 
 before every community gathering.
 
 # 🆘 Getting Help
@@ -173,7 +197,7 @@ By far the easiest and fastest way to get a response is to:
 
 # 📜 License
 
-`zenml-dashboard` is distributed under the terms of the Apache License Version 2.0. 
+ZenML Dashboard is distributed under the terms of the Apache License Version 2.0. 
 A complete version of the license is available in the [LICENSE](LICENSE) file in
 this repository. Any contribution made to this project will be licensed under
 the Apache License Version 2.0.

package.json

@@ -11,6 +11,7 @@
     "@testing-library/user-event": "^12.1.0",
     "@types/classnames": "^2.2.10",
     "@types/country-list": "^2.1.0",
+    "@types/dagre": "^0.7.48",
     "@types/jest": "^26.0.8",
     "@types/lodash": "^4.14.158",
     "@types/node": "^14.0.27",
@@ -28,6 +29,7 @@
     "bootstrap": "^4.5.0",
     "classnames": "^2.2.6",
     "country-list": "^2.2.0",
+    "dagre": "^0.8.5",
     "date-fns": "^2.15.0",
     "eslint-import-resolver-babel-module": "^5.1.2",
     "eslint-plugin-react-hooks": "^4.0.8",
@@ -41,6 +43,7 @@
     "react-bootstrap": "^1.3.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^16.13.1",
+    "react-flow-renderer": "^10.3.16",
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
@@ -81,12 +84,14 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
+    "autoprefixer": "^10.4.8",
     "babel-plugin-inline-react-svg": "^1.1.1",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.5",
     "eslint-plugin-redux-saga": "^1.1.3",
+    "postcss": "^8.4.16",
     "prettier": "^2.0.5",
     "react-hooks-testing-library": "^0.6.0",
     "react-test-renderer": "^16.13.1"

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.css

@@ -13,7 +13,10 @@
   src: url('./ui/assets/SourceCodePro-Regular.ttf') format('truetype');
 }
 
-html  , #root, body, .App {
+html,
+#root,
+body,
+.App {
   height: 100%;
   -webkit-tap-highlight-color: transparent;
 }
@@ -23,11 +26,13 @@ html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
 .container-fluid {
   padding-left: 0;
   padding-right: 0;
-}
+}

src/index.css

@@ -1,53 +1,134 @@
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
 }
 
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
 }
 body {
-	line-height: 1;
+  line-height: 1;
 }
-ol, ul {
-	list-style: none;
+ol,
+ul {
+  list-style: none;
 }
-blockquote, q {
-	quotes: none;
+blockquote,
+q {
+  quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
 }
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 html {
-	font-size: 8px;
+  font-size: 8px;
 }
 
 .__PrivateStripeElement {
-	top: 50%;
-	transform: translateY(-50%);
-}
+  top: 50%;
+  transform: translateY(-50%);
+}

src/routes/appRoutesConfig.tsx

@@ -394,4 +394,4 @@ const routes = [
   },
 ];
 
-export const appRoutesConfig = [...routes] as RouteInterface[];
+export const appRoutesConfig = [...routes] as RouteInterface[];