Merge pull request #317 from zenml-io/UAT

Latest release

Author: htahir1

.env

@@ -1,2 +1,3 @@
-REACT_APP_BASE_API_URL=https://appserver.zenml.io/api/v1
+REACT_APP_BASE_API_URL="https://appserver.zenml.io/api/v1"
+REACT_APP_HUB_API_URL="https://hubapi.zenml.io"
 REACT_APP_VERSION=$npm_package_version

.github/workflows/release.yml

@@ -26,6 +26,7 @@ jobs:
           yarn install
           yarn build
         env:
+          REACT_APP_HUB_API_URL: "https://hubapi.zenml.io"
           REACT_APP_BASE_API_URL: "/api/v1"
           REACT_APP_MOCKAPI_RESPONSE: false
           REACT_APP_VERSION: ${{ steps.get_version.outputs.VERSION }}

.gitignore

@@ -40,6 +40,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+.yarn/
 
 # TypeScript v1 declaration files
 typings/
@@ -85,6 +86,9 @@ typings/
 .nuxt
 dist
 
+# CRA build output
+build/
+
 # Gatsby files
 .cache/
 # Comment in the public line in if your workspace uses Gatsby and *not* Next.js

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    // '@storybook/addon-links',
+    // '@storybook/addon-essentials',
+    // '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+    '@storybook/preset-scss',
+  ],
+  framework: '@storybook/react',
+};

.storybook/preview.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import '../src/index.css';
+import '../src/App.css';
+import '../src/ui/default.css';
+
+export const decorators = [
+  (Story) => (
+    <Router>
+      <Story />
+    </Router>
+  ),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

global.d.ts

@@ -4,6 +4,8 @@ type TId = string;
 
 type TToasterTypes = 'success' | 'failure';
 
+type DateString = string;
+
 interface TApiActionsTypes {
   request: string;
   success: string;
@@ -42,7 +44,19 @@ interface TUser {
   email_opted_in: any;
   emailOptedIn: any;
   roles: Array<any>;
-  created: any
+  created: any;
+}
+
+interface THubUser {
+  id: string;
+  email: string;
+  is_active: boolean;
+  is_superuser: boolean;
+  is_verified: boolean;
+  username: string;
+  avatar_url?: string;
+  bio: string;
+  website: string;
 }
 
 interface TOrganization {
@@ -192,6 +206,9 @@ interface TabPage {
   text: string;
   Component: React.FC;
   path: string;
+  externalPath?: string;
+  locked?: boolean;
+  lockedClickHandler?: () => void;
 }
 
 interface TBilling {
@@ -243,3 +260,58 @@ interface TInvoice {
 }
 
 type TInvoiceStatus = 'draft' | 'open' | 'paid' | 'uncollectible';
+
+interface TPlugin {
+  id: TId;
+  name: name;
+  author: name;
+  // from the plugin's Readme
+  description?: string;
+  version: name;
+  tags: string[];
+  logo_url?: string;
+  index_url?: string;
+  package_name: string;
+  created: DateString;
+  updated: DateString;
+  user: { id: string; username: string };
+  // upvotes: string;
+  // downloads: string;
+  // popularity: string;
+}
+
+interface TPluginDetail extends TPlugin {
+  plugin_id: TId;
+  version_id: string;
+  logo_url?: string;
+  index_url?: string;
+  canonical_url: string;
+  release_notes: string | null;
+  repository_url: string;
+  repository_subdirectory?: string;
+  repository_branch?: string;
+  repository_commit?: string;
+  build_logs: string;
+}
+
+interface TPluginVersion {
+  id: TId;
+  version: string;
+  plugin_id: TId;
+  author: string;
+  status: 'pending' | 'failed' | 'available' | 'yanked';
+  repository_url: string;
+  repository_subdirectory?: string;
+  repository_branch?: string;
+  repository_commit?: string;
+  canonical_url: string;
+  readme_url?: string;
+  logo_url?: string;
+  index_url?: string;
+  release_notes: string | null;
+  package_name: string;
+  requirements: string[];
+  build_logs?: string;
+  created: DateString;
+  updated: DateString;
+}

package.json

@@ -15,7 +15,6 @@
     "@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",
     "@types/react": "^16.9.44",
     "@types/react-datepicker": "^4.4.2",
@@ -25,6 +24,7 @@
     "@types/react-router-dom": "^5.1.5",
     "@types/react-scroll": "^1.5.5",
     "@types/react-syntax-highlighter": "^11.0.4",
+    "@types/react-vis": "^1.11.11",
     "@types/redux-logger": "^3.0.8",
     "@types/styled-components": "^5.1.26",
     "axios": "^0.19.2",
@@ -41,6 +41,8 @@
     "i18next-browser-languagedetector": "^5.0.0",
     "json2yaml": "^1.1.0",
     "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "moment": "^2.29.4",
     "node-sass": "^4.14.1",
     "query-string": "^6.13.1",
@@ -52,6 +54,7 @@
     "react-flow-renderer": "^10.3.16",
     "react-joyride": "^2.5.3",
     "react-json-pretty": "^2.2.0",
+    "react-markdown": "^8.0.6",
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
@@ -60,6 +63,7 @@
     "react-syntax-highlighter": "^13.3.1",
     "react-tooltip": "^4.2.10",
     "react-tooltip-lite": "^1.12.0",
+    "react-vis": "^1.11.12",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
@@ -77,7 +81,9 @@
     "lint": "eslint './src/**/*.ts*'",
     "fix-lint": "eslint './src/**/*.ts*' --fix",
     "tslint": "tsc",
-    "all": "eslint './src/**/*.ts*' & react-scripts test --all & tsc"
+    "all": "eslint './src/**/*.ts*' & react-scripts test --all & tsc",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "browserslist": {
     "production": [
@@ -92,6 +98,7 @@
     ]
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.192",
     "@typescript-eslint/eslint-plugin": "^3.7.1",
     "@typescript-eslint/parser": "^3.7.1",
     "autoprefixer": "^10.4.8",

src/App.css

@@ -21,6 +21,24 @@ body,
   -webkit-tap-highlight-color: transparent;
 }
 
+::-webkit-scrollbar {
+  height: 11px; 
+  width: 11px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {  
+  background: rgba(168, 168, 168, 0.5); 
+  border-radius: 6px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: rgba(217, 217, 217, 0.5);
+  border-radius: 6px;
+}
+
+
 html {
   font-size: 62.5%;
   box-sizing: border-box;

src/api/constants.ts

@@ -6,7 +6,8 @@ export const httpMethods = {
   delete: 'DELETE',
 };
 
-export const BASE_API_URL = process.env.REACT_APP_BASE_API_URL;
+export const BASE_API_URL = process.env.REACT_APP_BASE_API_URL as string;
+export const HUB_API_URL = process.env.REACT_APP_HUB_API_URL as string;
 
 // https://appserver.zenml.io/api/v1
-// http://localhost:8080/api/v1
+// http://localhost:8080/api/v1