From 79ab2272293e7d1961836dbd0ee4065fdbbfc86a Mon Sep 17 00:00:00 2001 From: tom Date: Thu, 19 Dec 2024 10:16:41 +0100 Subject: [PATCH] append hash to sprite file name base on its content --- .gitignore | 1 + Dockerfile | 9 +++++---- configs/app/app.ts | 2 ++ deploy/scripts/build_sprite.sh | 21 +++++++++++++++++++++ docs/BUILD-TIME_ENVS.md | 1 + package.json | 2 +- tools/scripts/dev.preset.sh | 3 ++- tools/scripts/dev.sh | 3 ++- tools/scripts/pw.sh | 2 ++ ui/shared/IconSvg.tsx | 4 +++- 10 files changed, 40 insertions(+), 8 deletions(-) create mode 100755 deploy/scripts/build_sprite.sh diff --git a/.gitignore b/.gitignore index 74d489ae6b..8c1b8b71af 100644 --- a/.gitignore +++ b/.gitignore @@ -15,6 +15,7 @@ /public/assets/envs.js /public/assets/configs /public/icons/sprite.svg +/public/icons/sprite.*.svg /public/icons/README.md /analyze diff --git a/Dockerfile b/Dockerfile index 0141bee554..7effc9156e 100644 --- a/Dockerfile +++ b/Dockerfile @@ -56,9 +56,11 @@ WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . -# Generate .env.registry with ENVs list and save build args into .env file -COPY --chmod=755 ./deploy/scripts/collect_envs.sh ./ -RUN ./collect_envs.sh ./docs/ENVS.md +# Build SVG sprite and generate .env.registry with ENVs list and save build args into .env file +RUN set -a && \ + source ./deploy/scripts/build_sprite.sh && \ + ./deploy/scripts/collect_envs.sh ./docs/ENVS.md && \ + set +a # Next.js collects completely anonymous telemetry data about general usage. # Learn more here: https://nextjs.org/telemetry @@ -66,7 +68,6 @@ RUN ./collect_envs.sh ./docs/ENVS.md # ENV NEXT_TELEMETRY_DISABLED 1 # Build app for production -RUN yarn svg:build-sprite RUN yarn build diff --git a/configs/app/app.ts b/configs/app/app.ts index b0403fc673..8debdab642 100644 --- a/configs/app/app.ts +++ b/configs/app/app.ts @@ -10,6 +10,7 @@ const baseUrl = [ appPort && ':' + appPort, ].filter(Boolean).join(''); const isDev = getEnvValue('NEXT_PUBLIC_APP_ENV') === 'development'; +const spriteHash = getEnvValue('NEXT_PUBLIC_ICON_SPRITE_HASH'); const app = Object.freeze({ isDev, @@ -18,6 +19,7 @@ const app = Object.freeze({ port: appPort, baseUrl, useProxy: getEnvValue('NEXT_PUBLIC_USE_NEXT_JS_PROXY') === 'true', + spriteHash, }); export default app; diff --git a/deploy/scripts/build_sprite.sh b/deploy/scripts/build_sprite.sh new file mode 100755 index 0000000000..0db22fd14a --- /dev/null +++ b/deploy/scripts/build_sprite.sh @@ -0,0 +1,21 @@ +#!/bin/bash + +yarn icons build -i ./icons -o ./public/icons --optimize + +# Skip hash creation and renaming for playwright environment +if [ "$NEXT_PUBLIC_APP_ENV" != "pw" ]; then + # Generate hash from the sprite file + HASH=$(md5sum ./public/icons/sprite.svg | cut -d' ' -f1 | head -c 8) + + # Remove old sprite files + rm -f ./public/icons/sprite.*.svg + + # Rename the new sprite file + mv ./public/icons/sprite.svg "./public/icons/sprite.${HASH}.svg" + + export NEXT_PUBLIC_ICON_SPRITE_HASH=${HASH} + + echo "SVG sprite created: sprite.${HASH}.svg" +else + echo "SVG sprite created: sprite.svg (hash skipped for playwright environment)" +fi \ No newline at end of file diff --git a/docs/BUILD-TIME_ENVS.md b/docs/BUILD-TIME_ENVS.md index f151a30e77..6ecaa53984 100644 --- a/docs/BUILD-TIME_ENVS.md +++ b/docs/BUILD-TIME_ENVS.md @@ -7,3 +7,4 @@ These variables are passed to the app during the image build process. They canno | NEXT_PUBLIC_GIT_COMMIT_SHA | `string` | SHA of the latest commit in the branch from which image is built | false | `29d0613e` | | NEXT_PUBLIC_GIT_TAG | `string` | Git tag of the latest commit in the branch from which image is built | true | `v1.0.0` | | NEXT_OPEN_TELEMETRY_ENABLED | `boolean` | Enables OpenTelemetry SDK | true | `true` | +| NEXT_PUBLIC_ICON_SPRITE_HASH | `string` | Hash post-fix of the SVG sprite file (generated automatically during the sprite build) | `08be4b10` | `true` | diff --git a/package.json b/package.json index 62aef0248f..30b2263e60 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "lint:envs-validator:test": "cd ./deploy/tools/envs-validator && ./test.sh", "prepare": "husky install", "svg:format": "svgo -r ./icons", - "svg:build-sprite": "icons build -i ./icons -o ./public/icons --optimize", + "svg:build-sprite": "./deploy/scripts/build_sprite.sh", "test:pw": "./tools/scripts/pw.sh", "test:pw:local": "export NODE_PATH=$(pwd)/node_modules && yarn test:pw", "test:pw:docker": "docker run --rm --ipc=host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.49.0-noble ./tools/scripts/pw.docker.sh", diff --git a/tools/scripts/dev.preset.sh b/tools/scripts/dev.preset.sh index d0a0d49e66..f9ba4c5db5 100755 --- a/tools/scripts/dev.preset.sh +++ b/tools/scripts/dev.preset.sh @@ -19,13 +19,14 @@ dotenv \ -e $config_file \ -- bash -c './deploy/scripts/download_assets.sh ./public/assets/configs' -yarn svg:build-sprite +source ./deploy/scripts/build_sprite.sh echo "" # generate envs.js file and run the app dotenv \ -v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \ -v NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \ + -v NEXT_PUBLIC_ICON_SPRITE_HASH="${NEXT_PUBLIC_ICON_SPRITE_HASH}" \ -e $config_file \ -e $secrets_file \ -- bash -c './deploy/scripts/make_envs_script.sh && next dev -p $NEXT_PUBLIC_APP_PORT' | diff --git a/tools/scripts/dev.sh b/tools/scripts/dev.sh index dea2114c22..7897742b47 100755 --- a/tools/scripts/dev.sh +++ b/tools/scripts/dev.sh @@ -8,13 +8,14 @@ dotenv \ -e .env \ -- bash -c './deploy/scripts/download_assets.sh ./public/assets/configs' -yarn svg:build-sprite +source ./deploy/scripts/build_sprite.sh echo "" # generate envs.js file and run the app dotenv \ -v NEXT_PUBLIC_GIT_COMMIT_SHA=$(git rev-parse --short HEAD) \ -v NEXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \ + -v NEXT_PUBLIC_ICON_SPRITE_HASH="${NEXT_PUBLIC_ICON_SPRITE_HASH}" \ -e .env.secrets \ -e .env.development.local \ -e .env.local \ diff --git a/tools/scripts/pw.sh b/tools/scripts/pw.sh index 0754f0be1e..259128ba7e 100755 --- a/tools/scripts/pw.sh +++ b/tools/scripts/pw.sh @@ -8,6 +8,8 @@ dotenv \ -e $config_file \ -- bash -c './deploy/scripts/make_envs_script.sh ./playwright/envs.js' +# Important to set this variable here, so the sprite will be built correctly +export NEXT_PUBLIC_APP_ENV=pw yarn svg:build-sprite # Check if the "--affected" argument is present in the script args diff --git a/ui/shared/IconSvg.tsx b/ui/shared/IconSvg.tsx index 3d5d6ef068..7c04cc5f1b 100644 --- a/ui/shared/IconSvg.tsx +++ b/ui/shared/IconSvg.tsx @@ -3,7 +3,9 @@ import { Skeleton, chakra } from '@chakra-ui/react'; import { type IconName } from 'public/icons/name'; import React from 'react'; -export const href = '/icons/sprite.svg'; +import config from 'configs/app'; + +export const href = config.app.spriteHash ? `/icons/sprite.${ config.app.spriteHash }.svg` : '/icons/sprite.svg'; export { IconName };