feat(ui): add PopupMenu #1275
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Run it locally with act | |
| # 1. Install act: | |
| # `brew install act` | |
| # 2. Create a .secret file with the following content: | |
| # `GITHUB_TOKEN=your_github_token` | |
| # PULL REQUEST | |
| # 1. Create a act_pull_request.json file in case of a pull request with the following content: | |
| # `{"pull_request": {"number": <PR number>, "head": {"ref": "<PR branch name>", "sha": "PR commit sha"}, "base": {"ref": "main"}}, "repository": {"name": "juno", "owner": {"login": "cloudoperators"}}}` | |
| # 2. Run the following command: | |
| # `act pull_request --container-architecture linux/amd64 -P default=catthehacker/ubuntu:act-latest -e act_pull_request.json -W .github/workflows/deploy-pr-preview.yaml` | |
| name: PR Preview Deployment 🚀 | |
| on: | |
| pull_request: | |
| types: | |
| - opened | |
| - reopened | |
| - synchronize | |
| - closed | |
| paths: | |
| - "packages/ui-components/**" | |
| - "apps/supernova/**" | |
| - "apps/heureka/**" | |
| - "apps/doop/**" | |
| - "apps/carbon/**" | |
| - "apps/greenhouse/**" | |
| - "apps/example/**" | |
| # Limit the concurrency of entire workflow | |
| concurrency: deploy-pr-preview-${{ github.ref }} | |
| env: | |
| DEPLOY_PATH: tmp | |
| jobs: | |
| run-detect-changes: | |
| uses: ./.github/workflows/shared-detect-pkg-changes.yaml | |
| with: | |
| paths: "packages apps" | |
| runs-on: default | |
| build-deploy: | |
| needs: [run-detect-changes] | |
| runs-on: [default] | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - name: Precompile ENVs | |
| if: github.event.action != 'closed' | |
| id: compile-envs | |
| run: | | |
| #setup ENVs for each app to preview | |
| echo "IS_STORYBOOK_CHANGED=${{ contains(needs.run-detect-changes.outputs.changes, 'ui-components') }}" >> $GITHUB_ENV | |
| echo "IS_SUPERNOVA_CHANGED=${{ contains(needs.run-detect-changes.outputs.changes, 'supernova') }}" >> $GITHUB_ENV | |
| echo "IS_HEUREKA_CHANGED=${{ contains(needs.run-detect-changes.outputs.changes, 'heureka') }}" >> $GITHUB_ENV | |
| echo "IS_DOOP_CHANGED=${{ contains(needs.run-detect-changes.outputs.changes, 'doop') }}" >> $GITHUB_ENV | |
| echo "IS_CARBON_CHANGED=${{ contains(needs.run-detect-changes.outputs.changes, 'carbon') }}" >> $GITHUB_ENV | |
| echo "IS_GREENHOUSE_CHANGED=${{ contains(needs.run-detect-changes.outputs.changes, 'greenhouse') }}" >> $GITHUB_ENV | |
| echo "IS_EXAMPLE_CHANGED=${{ contains(needs.run-detect-changes.outputs.changes, 'example') || contains(needs.run-detect-changes.outputs.changes, 'ui-components') }}" >> $GITHUB_ENV | |
| - uses: actions/setup-node@v4 | |
| if: github.event.action != 'closed' | |
| with: | |
| node-version: "20.x" | |
| - name: Install dependencies | |
| if: github.event.action != 'closed' | |
| run: | | |
| npm install --force | |
| - name: Create a folder with all compiled apps and pkgs | |
| if: github.event.action != 'closed' | |
| run: | | |
| mkdir -p ${{ env.DEPLOY_PATH }} | |
| - name: Build STORYBOOK if changes detected | |
| id: build-storybook | |
| if: github.event.action != 'closed' && env.IS_STORYBOOK_CHANGED == 'true' | |
| run: | | |
| npm -w @cloudoperators/juno-ui-components run build-storybook | |
| cp -r ${{ env.PACKAGE_PATH }}/storybook-static ${{ env.DEPLOY_PATH }}/${{ env.TARGET_FOLDER }} | |
| env: | |
| PACKAGE_PATH: packages/ui-components | |
| TARGET_FOLDER: storybook | |
| continue-on-error: true | |
| - name: Build SUPERNOVA if changes detected | |
| id: build-supernova | |
| if: github.event.action != 'closed' && env.IS_SUPERNOVA_CHANGED == 'true' | |
| run: | | |
| ./.github/scripts/build-vite-app.sh | |
| env: | |
| PACKAGE_PATH: apps/supernova | |
| TARGET_FOLDER: supernova | |
| APP_PROPS_BASE64: ${{ secrets.SUPERNOVA_APP_PROPS_BASE64 }} | |
| continue-on-error: true | |
| - name: Build HEUREKA if changes detected | |
| id: build-heureka | |
| if: github.event.action != 'closed' && env.IS_HEUREKA_CHANGED == 'true' | |
| run: ./.github/scripts/build-vite-app.sh | |
| env: | |
| PACKAGE_PATH: apps/heureka | |
| TARGET_FOLDER: heureka | |
| APP_PROPS_BASE64: ${{ secrets.HEUREKA_APP_PROPS_BASE64 }} | |
| continue-on-error: true | |
| - name: Build DOOP if changes detected | |
| id: build-doop | |
| if: github.event.action != 'closed' && env.IS_DOOP_CHANGED == 'true' | |
| run: ./.github/scripts/build-vite-app.sh | |
| env: | |
| PACKAGE_PATH: apps/doop | |
| TARGET_FOLDER: doop | |
| APP_PROPS_BASE64: ${{ secrets.DOOP_APP_PROPS_BASE64 }} | |
| continue-on-error: true | |
| - name: Build CARBON if changes detected | |
| id: build-carbon | |
| if: github.event.action != 'closed' && env.IS_CARBON_CHANGED == 'true' | |
| run: ./.github/scripts/build-vite-app.sh | |
| env: | |
| PACKAGE_PATH: apps/carbon | |
| TARGET_FOLDER: carbon | |
| continue-on-error: true | |
| - name: Build GREENHOUSE if changes detected | |
| id: build-greenhouse | |
| if: github.event.action != 'closed' && env.IS_GREENHOUSE_CHANGED == 'true' | |
| run: | | |
| ./.github/scripts/build-vite-app.sh | |
| # Specific changes for greenhouse | |
| sed -i 's|/appProps.json?%VERSION%|./appProps.json|g' "$DEPLOY_PATH/$TARGET_FOLDER/index.html" | |
| sed -i "s|/index.js?%VERSION%|./$entry_file_escaped|g" "$DEPLOY_PATH/$TARGET_FOLDER/index.html" | |
| env: | |
| PACKAGE_PATH: apps/greenhouse | |
| TARGET_FOLDER: greenhouse | |
| APP_PROPS_BASE64: ${{ secrets.GREENHOUSE_APP_PROPS_BASE64 }} | |
| continue-on-error: true | |
| - name: Build EXAMPLE if changes detected | |
| id: build-example | |
| if: github.event.action != 'closed' && env.IS_EXAMPLE_CHANGED == 'true' | |
| run: ./.github/scripts/build-vite-app.sh | |
| env: | |
| PACKAGE_PATH: apps/example | |
| TARGET_FOLDER: example | |
| continue-on-error: true | |
| - name: Generate index.html for Deployed Apps | |
| if: github.event.action != 'closed' | |
| env: | |
| STORYBOOK_OUTCOME: "${{ steps.build-storybook.outcome }}" | |
| SUPERNOVA_OUTCOME: "${{ steps.build-supernova.outcome }}" | |
| HEUREKA_OUTCOME: "${{ steps.build-heureka.outcome }}" | |
| DOOP_OUTCOME: "${{ steps.build-doop.outcome }}" | |
| CARBON_OUTCOME: "${{ steps.build-carbon.outcome }}" | |
| GREENHOUSE_OUTCOME: "${{ steps.build-greenhouse.outcome }}" | |
| EXAMPLE_OUTCOME: "${{ steps.build-example.outcome }}" | |
| run: | | |
| echo "<!DOCTYPE html><head><title>PR Preview</title></head><html><body><h1>Deployed Packages for PR ${GITHUB_HEAD_REF}</h1><ul>" > ${{ env.DEPLOY_PATH }}/index.html | |
| # components name should map to the IS_<component>_CHANGED | |
| COMPONENTS=("storybook" "supernova" "heureka" "doop" "carbon" "example" "greenhouse") | |
| for component in "${COMPONENTS[@]}"; do | |
| CHANGED_VAR="IS_${component^^}_CHANGED" # Make it uppercase for the env var | |
| CHANGED="${!CHANGED_VAR}" # Get the value of the environment variable | |
| if [ "$CHANGED" = "true" ]; then | |
| OUTCOME_VAR="${component^^}_OUTCOME" # Make it uppercase for the env var | |
| echo "==OUTCOME_VAR==" | |
| echo $OUTCOME_VAR | |
| echo "===" | |
| BUILD_OUTCOME="${!OUTCOME_VAR}" # Get the value of the environment variable | |
| echo "==BUILD_OUTCOME==" | |
| echo $BUILD_OUTCOME | |
| echo "===" | |
| if [ "$BUILD_OUTCOME" == "success" ]; then | |
| echo "<li><a href='./${component}/index.html' target="_blank">${component^} <span style='color:green;'>✓ Success</span></a></li>" >> ${{ env.DEPLOY_PATH }}/index.html | |
| else | |
| echo "<li>${component^} <span style='color:red;'>✗ Failed</span></li>" >> ${{ env.DEPLOY_PATH }}/index.html | |
| fi | |
| fi | |
| done | |
| echo "</ul></body></html>" >> ${{ env.DEPLOY_PATH }}/index.html | |
| - uses: rossjrw/pr-preview-action@v1 | |
| with: | |
| source-dir: ${{ env.DEPLOY_PATH }}/ | |
| preview-branch: gh-pages | |
| umbrella-dir: pr-preview | |
| action: auto |