Merge current master into devmain

.github/workflows/checks.yml

@@ -12,14 +12,14 @@ on:
       - devmain
 
 jobs:
-  extraxt_branch:
+  extract_branch:
     runs-on: ubuntu-latest
     outputs:
-      currentTag: ${{ steps.extract_branch.outputs.extract_branch }}
+      branch: ${{ steps.extract_branch.outputs.branch }}
     steps:
       - name: Extract branch name
         shell: bash
-        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
+        run: echo "::set-output name=branch::$(echo ${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}})"
         id: extract_branch
 
   unit_tests_with_coverage:
@@ -66,7 +66,7 @@ jobs:
   release:
     name: Generate Release
     if: ${{ (github.event_name != 'pull_request') && (needs.extract_branch.outputs.branch == 'master') }}
-    needs: [unit_tests_with_coverage, lint_project, build_docker_image, extraxt_branch]
+    needs: [unit_tests_with_coverage, lint_project, build_docker_image, extract_branch]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
@@ -107,17 +107,32 @@ jobs:
         # a tag, update our target
         run: |
           CURRENT_TAG=$(git tag --sort=-refname --points-at ${{ github.ref }} | head -n 1)
+          echo $CURRENT_TAG
           echo "::set-output name=currentTag::$CURRENT_TAG"
 
   push_docker_image:
-    name: Build & Push Flyteconsole Image
+    name: Push to Github Registry
     needs: [check_for_tag]
-    uses: flyteorg/flytetools/.github/workflows/publish.yml@master
-    with:
-      version: ${{ needs.check_for_tag.outputs.currentTag }}
-      dockerfile: Dockerfile
-      push: true
-      repository: ${{ github.repository }}
-    secrets:
-      FLYTE_BOT_PAT: ${{ secrets.FLYTE_BOT_PAT }}
-      FLYTE_BOT_USERNAME: ${{ secrets.FLYTE_BOT_USERNAME }}
+    runs-on: ubuntu-latest
+    if: ${{ needs.check_for_tag.outputs.currentTag != '' }}
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: '0'
+      - name: Autobump version
+        env:
+          TAG: ${{ needs.check_for_tag.outputs.currentTag }}
+        run: |
+          VERSION=${TAG:1} make update_npmversion
+      - name: Push Docker Image to Github Registry
+        uses: whoan/docker-build-with-cache-action@v5
+        with:
+          username: "${{ secrets.FLYTE_BOT_USERNAME }}"
+          password: "${{ secrets.FLYTE_BOT_PAT }}"
+          image_name: flyteorg/flyteconsole
+          image_tag: latest,${{ github.sha }},${{ needs.check_for_tag.outputs.currentTag }}
+          push_git_tag: true
+          push_image_and_stages: true
+          dockerfile: Dockerfile
+          registry: ghcr.io
+          build_extra_args: "--compress=true"

.github/workflows/upgrade_automtion.yml → .github/workflows/upgrade_automation.yml

@@ -10,10 +10,11 @@ on:
         options:
           - boilerplate
           - flyteidl
+          - flyteconsole
 jobs:
   trigger-upgrade:
     name: ${{ github.event.inputs.component }} Upgrade
-    if: ${{ github.event.inputs.component  == "boilerplate" }}
+    if: ${{ github.event.inputs.component  == 'boilerplate' }}
     uses: flyteorg/flytetools/.github/workflows/flyte_automation.yml@master
     with:
       component: ${{ github.event.inputs.component }}
@@ -23,7 +24,7 @@ jobs:
   upgrade_flyteidl:
     name: Upgrade Flyteidl
     runs-on: ubuntu-latest
-    if: ${{ github.event.inputs.component  == "boilerplate" }}
+    if: ${{ github.event.inputs.component  == 'flyteidl' }}
     steps:
       - uses: actions/checkout@v2
         with:
@@ -47,7 +48,7 @@ jobs:
           signoff: true
           branch: flyte-bot-update-flyteidl
           delete-branch: true
-          title: 'Update Flyteidl version'
+          title: "Update Flyteidl version"
           body: |
             Update Flyteidl version
             - Auto-generated by [flyte-bot]
@@ -57,3 +58,4 @@ jobs:
             owners
             maintainers
           draft: false
+

.releaserc.json

@@ -9,13 +9,6 @@
             }
         ],
         ["@semantic-release/npm", { "npmPublish": false }],
-        "@semantic-release/github",
-        [
-            "@semantic-release/git",
-            {
-                "assets": ["package.json", "CHANGELOG.md"],
-                "message": "chore(release): Release ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
-            }
-        ]
+        "@semantic-release/github"
     ]
 }

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "launch generator",
+            "type": "node",
+            "request": "launch",
+            "skipFiles": ["<node_internals>/**"],
+            "program": "${workspaceFolder}/script/generator/src/index.js",
+            "console": "integratedTerminal"
+        }
+    ]
+}

CONTRIBUTING.md

@@ -22,6 +22,30 @@ a single module, you can specify that one specifically
 (ex. `localStorage.debug = 'flyte:adminEntity'` to only see decoded Flyte
 Admin API requests).
 
+## Generate new package
+
+To add a new package use a script
+
+```bash
+yarn generate:package
+```
+
+After new package is generated, you will need to update some values to be able to use it with other packages.
+For example in case if package plan to be used in `console` app
+
+Ensure to add proper webpack alias path resolutions into:
+* ./storybook/main.js -  as `'@flyteconsole/flyte-api': path.resolve(__dirname, '../packages/plugins/flyte-api/src’),`
+* packages/zapp/console/webpack.common.config.ts to alias section -  as `'@flyteconsole/flyte-api': path.resolve(__dirname, '../packages/plugins/flyte-api/src’),`
+
+To add child package usage to other package, in parent package ->
+* Add `{ "path": “../../${type}/${package-name}" }` to tsconfig.json
+* Add `{ "path": “../../${type}/${package-name}/tsconfig.build.json" }` to tsconfig.build.json (if exists)
+- Then you can import your changes as `import { getLoginUrl } from '@flyteconsole/flyte-api’;`
+
+> If you see `yarn lint` package not defined issues update `.\eslintrc.js` by adding your package to 
+    'import/core-modules': ['@clients/locale', '@clients/primitives', '@clients/theme'],
+
+
 ## Storybook
 
 This project has support for [Storybook](https://storybook.js.org/).
@@ -115,9 +139,10 @@ brew install asdf
 brew install vips
 ```
 
--   Add Yarn plugin to asdf, to manage yarn versions
+-   Add Yarn and NodeJs plugins to asdf, to manage versions
 
 ```bash
+asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
 asdf plugin-add yarn https://github.com/twuni/asdf-yarn.git
 brew install gpg
 ```

Makefile

@@ -42,3 +42,10 @@ test_unit_codecov:
 .PHONY: generate_ssl
 generate_ssl:
 	./script/generate_ssl.sh
+
+PLACEHOLDER_NPM := \"version\": \"0.0.0-develop\"
+
+.PHONY: update_npmversion
+update_npmversion:
+	grep "$(PLACEHOLDER_NPM)" "packages/zapp/console/package.json"
+	sed -i "s/$(PLACEHOLDER_NPM)/\"version\":  \"${VERSION}\"/g" "packages/zapp/console/package.json"

README.md

@@ -54,10 +54,28 @@ For help with installing dependencies look into
 
 3. Start the server (uses localhost:3000)
 
-    `yarn start`
+    `bash yarn start `
 
 4. Explore your local copy at `http://localhost:3000`
 
+### Note: Python errors with OSX
+
+Recently OSX (12.3) removed python 2.7 from default installation and this can cause build errors for some users depending on it's setup. In this repository you can experience `env: python: No such file or directory` error from gyp ([node-gyp](https://github.com/nodejs/node-gyp)).
+The easiest way to fix it:
+
+-   Install the XCode Command Line Tools standalone by running `xcode-select --install` in the terminal
+
+OR
+
+```bash
+   brew install python    # install python with brew
+   which python           # check if python path is properly defined
+   # if path not defined
+   where python3
+   # Take the version and location from above and run this command (replacing `/usr/bin/python3` with the location of your python instalation). This will symlink python to python3
+   ln -s /usr/bin/python3 /usr/local/bin/python
+```
+
 ### Environment Variables
 
 -   `ADMIN_API_URL` (default: [window.location.origin](https://developer.mozilla.org/en-US/docs/Web/API/Window/location>))
@@ -80,11 +98,15 @@ For help with installing dependencies look into
 
 -   `BASE_URL` (default: `undefined`)
 
-    This allows running the console at a prefix on the target host. This is
+    This setting allows running the console at a prefix on the target host. This is
     necessary when hosting the API and console on the same domain (with prefixes of
     `/api/v1` and `/console` for example). For local development, this is
     usually not needed, so the default behavior is to run without a prefix.
 
+-   `FLYTE_NAVIGATION` (default: `undefined`)
+    UI related. Allows you to change colors of the navigation bar and add links
+    to other internal pages or external sites. **[More info](packages/zapp/console/src/components/Navigation/Readme.md)**
+
 ### Running from docker image as localhost
 
 To run flyteconsole directly from your docker image as localhost you must set a
@@ -116,6 +138,10 @@ and start the NodeJS server on the default port (3000). All requests to the Node
 will be stalled until the bundles have finished. The application will be accessible
 at http://localhost:3000 (if using the default port).
 
+### 🎱 Using items in your own application
+
+-   Authorize your app to call flyte admin api. **[More info](packages/plugins/flyte-api/README.md)**
+
 ## 🛠 Development
 
 For continious development we are using:

boilerplate/update.cfg

@@ -1,4 +1,3 @@
 flyte/docker_build
 flyte/pull_request_template
-flyte/welcome_bot
 flyte/code_of_conduct

package.json

@@ -1,6 +1,6 @@
 {
     "name": "flyteconsole",
-    "version": "1.1.0-rc1",
+    "version": "1.3.5",
     "private": true,
     "description": "The web UI for the Flyte platform",
     "repository": {
@@ -12,14 +12,16 @@
         "packages/basics/**",
         "packages/composites/**",
         "packages/plugins/**",
-        "packages/zapp/**"
+        "packages/zapp/**",
+        "script/generator/**"
     ],
     "scripts": {
         "clean": "yarn workspace @flyteconsole/client-app clean",
         "start": "yarn workspace @flyteconsole/client-app start",
         "start:prod": "yarn workspace @flyteconsole/client-app start:prod",
         "build:prod": "yarn workspace @flyteconsole/client-app build:prod",
         "build:storybook": "build-storybook",
+        "generate:package": "yarn workspace @flyteconsole/generator start",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
         "storybook": "start-storybook -p 6006",
         "test": "NODE_ENV=test jest",
@@ -45,7 +47,9 @@
             "git add"
         ]
     },
-    "dependencies": {},
+    "dependencies": {
+        "@flyteorg/flyteidl": "1.1.16"
+    },
     "devDependencies": {
         "@storybook/addon-actions": "^6.4.19",
         "@storybook/addon-essentials": "^6.4.19",
@@ -58,9 +62,9 @@
         "@testing-library/jest-dom": "^5.5.0",
         "@testing-library/react": "^10.0.3",
         "@testing-library/react-hooks": "^7.0.2",
-        "ts-jest": "^26.3.0",
         "jest": "^26.0.0",
-        "react-hot-loader": "^4.1.2"
+        "react-hot-loader": "^4.1.2",
+        "ts-jest": "^26.3.0"
     },
     "resolutions": {
         "@babel/cli": "~7.16.0",

packages/composites/ui-atoms/src/Icons/MapCacheIcon/index.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const MapCacheIcon = React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
+  return (
+    <SvgIcon {...props} ref={ref} viewBox="0 0 17 17">
+      <g clipPath="url(#clip0_6712_89419)">
+        <path
+          d="M5.68615 2.99228L6.91566 7.15285L4.89438 6.0537C4.31136 7.12586 4.17812 8.3857 4.52399 9.55609C4.86986 10.7265 5.45103 11.4847 6.52318 12.0677C7.19695 12.4341 8.24054 12.5388 8.96464 12.5397L9.41341 14.0583C8.25879 14.1378 6.70623 14.0476 5.68964 13.4944C4.2601 12.717 3.51417 11.5513 3.05301 9.99079C2.59185 8.43027 2.76949 6.75048 3.54686 5.32094L1.52558 4.22179L5.68615 2.99228Z"
+          fill="#666666"
+        />
+        <path
+          d="M9.90614 2.76737C11.152 3.02647 12.2756 3.69438 13.0985 4.66504C13.9214 5.6357 14.3964 6.85346 14.4481 8.12494C14.4998 9.39642 14.1252 10.6487 13.3839 11.683C12.6425 12.7173 11.5768 13.4742 10.3561 13.8336L8.74374 8.35689L9.90614 2.76737Z"
+          fill="#DDDDE5"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_6712_89419">
+          <rect width="16" height="16" fill="white" transform="translate(0.406982 0.356445)" />
+        </clipPath>
+      </defs>
+    </SvgIcon>
+  );
+});

packages/composites/ui-atoms/src/Icons/MuiLaunchPlanIcon/index.tsx

@@ -0,0 +1,39 @@
+import { makeStyles } from '@material-ui/core/styles';
+import { SvgIconProps, Theme } from '@material-ui/core';
+import classnames from 'classnames';
+import * as React from 'react';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  svg: {
+    marginTop: 0,
+    marginRight: theme.spacing(2),
+    display: 'inline-block',
+    fontSize: '1.5rem',
+    transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    flexShrink: 0,
+    userSelect: 'none',
+    color: '#666666',
+  },
+}));
+
+export const MuiLaunchPlanIcon = (props: SvgIconProps): JSX.Element => {
+  const { fill, className, width = '1em', height = '1em', fontSize } = props;
+  const styles = useStyles();
+  return (
+    <svg
+      className={classnames(styles.svg, className)}
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      fontSize={fontSize}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 15V2C2 1.44772 2.44772 1 3 1H12.7391C13.2914 1 13.7391 1.44772 13.7391 2V11.4421H9.82593H9.32593V11.9421V16H3C2.44772 16 2 15.5523 2 15ZM10.3259 12.4421H13.384L10.3259 15.5002V12.4421ZM5.1307 5.93466H11.0003V4.93466H5.1307V5.93466ZM11.0004 8.83351H5.13079V7.83351H11.0004V8.83351ZM5.13079 11.732H8.02934V10.732H5.13079V11.732Z"
+        fill={fill || 'currentColor'}
+      />
+    </svg>
+  );
+};

packages/composites/ui-atoms/src/Icons/index.tsx

@@ -1,3 +1,5 @@
 export { FlyteLogo } from './FlyteLogo';
 export { InfoIcon } from './InfoIcon';
 export { RerunIcon } from './RerunIcon';
+export { MapCacheIcon } from './MapCacheIcon';
+export { MuiLaunchPlanIcon } from './MuiLaunchPlanIcon';

packages/zapp/console/env.js

@@ -39,6 +39,8 @@ const STATUS_URL = process.env.STATUS_URL;
 const ENABLE_GA = process.env.ENABLE_GA || false;
 const GA_TRACKING_ID = process.env.GA_TRACKING_ID || 'G-0QW4DJWJ20';
 
+const FLYTE_NAVIGATION = process.env.FLYTE_NAVIGATION || '';
+
 module.exports = {
   ADMIN_API_URL,
   ADMIN_API_USE_SSL,
@@ -58,5 +60,6 @@ module.exports = {
     GA_TRACKING_ID,
     NODE_ENV,
     STATUS_URL,
+    FLYTE_NAVIGATION,
   },
 };