Skip to content

chore(ui): migrate Grid, GridColumn and GridRow components to Typescript #860

chore(ui): migrate Grid, GridColumn and GridRow components to Typescript

chore(ui): migrate Grid, GridColumn and GridRow components to Typescript #860

# 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/**"
# 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