Skip to content

Commit 2e6c8da

Browse files
jaseemjaskphari-kuriakoseclaudeDeepak-Kesavan
authored
FIX ([UN-3219]: show API Hub branding on verticals pages in incognito mode (#1786)
* [FEAT] Migrate frontend from Create React App to Vite Migrate the Unstract frontend build system from Create React App (react-scripts 5.0.1) to Vite 6.0.5 for improved development experience and build performance. Key Changes: - Replace react-scripts with Vite 6.0.5 and @vitejs/plugin-react 4.3.4 - Move index.html from public/ to root directory - Replace setupProxy.js with Vite proxy configuration - Update environment variables from REACT_APP_* to VITE_* prefix - Configure esbuild to handle JSX in .js files - Add comprehensive migration documentation Build Optimizations: - Manual chunk splitting for react, antd, and pdf vendors - Dependency pre-bundling for faster cold starts - HMR with polling enabled for Docker volume compatibility Documentation: - Add VITE_MIGRATION.md with comprehensive migration guide - Update README.md with Vite-specific configuration and commands - Document environment variable migration and troubleshooting Performance Benefits: - Development server startup: 10-30s → 1-2s - Hot Module Replacement: 2-5s → <1s - Production build time: 60-120s → 30-60s 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix(frontend): Restore vite-plugin-svgr for SVG-as-React-component imports The codebase extensively uses SVG imports with ?react query syntax (39 imports in src/assets/index.js). vite-plugin-svgr is required to transform these imports into React components. Changes: - Add vite-plugin-svgr@^4.5.0 to devDependencies - Restore svgr plugin in vite.config.js - Add vite-plugin-svgr type references in vite-env.d.ts - Remove conflicting public/index.html from CRA migration Fixes white screen issue caused by SVG components failing to render. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * docs(frontend): Fix HMR configuration example to match actual implementation The README documentation showed incorrect HMR clientPort configuration using process.env instead of the env variable from loadEnv. Changes: - Update clientPort example to use env.WDS_SOCKET_PORT (not process.env) - Change from falsy coalescing to explicit conditional check - Ensure documentation matches vite.config.js implementation Addresses CodeRabbit feedback on PR #1607. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * docs(frontend): Fix proxy configuration example to match actual implementation The README proxy configuration example incorrectly used process.env instead of the env variable from loadEnv. Changes: - Update proxy target to use env.VITE_BACKEND_URL (not process.env) - Ensure documentation matches vite.config.js implementation - Maintain consistency across all Vite configuration examples Addresses CodeRabbit critical feedback on PR #1607. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * refactor: replace CommonJS require() with ES dynamic import() for Vite compatibility Converted all require() calls in frontend/src to use try/catch with top-level await import() to support Vite's native ES module system. Plugin imports remain optional via try/catch to preserve OSS compatibility where plugin files are not present. Special cases: - Pipelines.jsx: static import (non-plugin, always available) - DsSettingsCard.jsx: async IIFE inside useEffect * fix: correct PropTypes for CombinedOutput and JsonViewBody - Make selectedPrompts optional in CombinedOutput since ToolsMain does not pass it and the component handles undefined - Change llmProfiles PropType from string to array in JsonViewBody to match the actual data type * fix: correct PropTypes warnings across frontend components - Change coverageCountData from PropTypes.object to PropTypes.array in PromptCardWrapper, PromptCard, and PromptCardItems - Fix PropTypes.text (undefined) to PropTypes.string for promptKey and promptText in PromptCardItems - Change highlightData to PropTypes.oneOfType([object, array]) in DisplayPromptResult - Change apiService from PropTypes.func to PropTypes.object in ManageKeys - Change connMode from required to optional in ConfigureConnectorModal - Change type from required to optional in ListOfSources * fix: add Rollup plugin to resolve missing optional plugin imports Add optionalPluginImports() Rollup plugin to vite.config.js that resolves missing plugin paths to an empty module at build time instead of failing. This allows the existing try/catch dynamic import pattern to work during production builds when plugin files are absent. * fix: set build target to esnext for top-level await support The codebase uses top-level await for optional plugin imports, which requires es2022+. Vite's default target (es2020) does not support this, causing the build to fail. * feat: replace npm with bun for frontend package management (#1770) - Switch Dockerfile base image from node:20-alpine to oven/bun:1-alpine - Replace npm install/run commands with bun equivalents in Dockerfile - Remove engines.npm constraint, update engines.node to >=18.0.0 - Replace npm run with bun run in lint:all script - Delete package-lock.json, add bun.lock * fix: correct COPY path in frontend.Dockerfile for runtime config script * UN-3185 [MISC] : replace ESLint and Prettier with Biome for frontend (#1771) * feat: replace ESLint and Prettier with Biome for frontend linting and formatting - Add @biomejs/biome v2.3.13 as dev dependency - Create biome.json with migrated ESLint rules and formatter config - Update package.json scripts (lint, format, check) to use Biome - Remove ESLint and Prettier dependencies and .eslintrc.json - Add Biome pre-commit hook to .pre-commit-config.yaml - Fix undeclared sessionDetails variable in HeaderTitle.jsx - Fix Error() and Array() to use new keyword - Fix prismjs import order in CombinedOutput.jsx - Reformat all frontend source files with Biome * fix: skip biome-check in pre-commit CI and add robust flags - Add biome-check to ci.skip list since pre-commit.ci lacks reliable npm registry access for language:system hooks - Add --files-ignore-unknown=true and --no-errors-on-unmatched flags to the biome-check hook entry for robustness * ci: add GitHub Actions workflow for frontend Biome lint checks * ci: pin Bun version to 1.1.38 in frontend lint workflow * ci: add sticky PR comment for frontend lint report * docs: update frontend README for Biome migration - Update Node.js requirement to >= 18.0.0 - Replace ESLint/Prettier with Biome in editor setup - Update linting/formatting commands for Biome - Add biome.json to project structure - Add Biome documentation links to learning resources * docs: add Vite, Bun, and Biome badges to frontend README * docs: add Vite, Bun, and Biome badges to main README * chore(frontend): upgrade to Vite 7 and Vitest 3 - Upgrade vite from ^6.0.5 to ^7.0.0 (installed 7.3.1) - Upgrade vitest from ^2.1.8 to ^3.2.0 (installed 3.2.4) - Upgrade @vitejs/plugin-react from ^4.3.4 to ^4.4.0 - Update Node.js engine requirement from >=18.0.0 to >=20.19.0 - Modernize __dirname to import.meta.dirname in vite.config.js * docs(frontend): update README for Vite 7 upgrade - Update Vite badge from 6.x to 7.x - Update Node.js requirement from 18.0.0 to 20.19.0 * docs(frontend): update README to use Bun instead of npm - Update prerequisites to list Bun as primary package manager - Replace all npm commands with bun equivalents - Update install, dev, build, test, and lint commands * docs(frontend): update migration note with Vite 7 upgrade date * docs(frontend): update VITE_MIGRATION.md for Vite 7 and Bun - Add Vite 7 upgrade section with version updates and changes - Update all npm commands to use bun - Update package versions to current (Vite 7.3.1, Vitest 3.2.4) - Document Node.js 20.19+ requirement * fix(frontend): show API Hub branding on verticals pages in incognito mode When visiting /verticals/* in incognito, selectedProduct from localStorage is null, causing isUnstract to be true and showing the Unstract logo and setup incomplete banner instead of the API Hub layout. Add URL-based fallback to detect verticals route and set the effective product accordingly. UN-3219 --------- Signed-off-by: Jaseem Jas <89440144+jaseemjaskp@users.noreply.github.com> Signed-off-by: Deepak K <89829542+Deepak-Kesavan@users.noreply.github.com> Co-authored-by: Hari John Kuriakose <hari@zipstack.com> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Deepak K <89829542+Deepak-Kesavan@users.noreply.github.com>
1 parent 2a7ee4a commit 2e6c8da

File tree

2 files changed

+8
-3
lines changed

2 files changed

+8
-3
lines changed

‎docker/dockerfiles/frontend.Dockerfile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ RUN mkdir -p /usr/share/nginx/html/config && \
6868
RUN sed -i 's|</head>| <script src="/config/runtime-config.js"></script>\n </head>|' /usr/share/nginx/html/index.html
6969

7070
# Copy the environment script
71-
COPY ${BUILD_CONTEXT_PATH}/generate-runtime-config.sh /docker-entrypoint.d/40-env.sh
71+
COPY frontend/generate-runtime-config.sh /docker-entrypoint.d/40-env.sh
7272
RUN chmod +x /docker-entrypoint.d/40-env.sh
7373

7474
EXPOSE 80

‎frontend/src/components/navigations/top-nav-bar/TopNavBar.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,8 +174,13 @@ function TopNavBar({ isSimpleLayout, topNavBarOptions }) {
174174
return unstractSubscriptionPlan?.remainingDays <= 0;
175175
}, [unstractSubscriptionPlan]);
176176

177-
const isUnstract = !(selectedProduct && selectedProduct !== "unstract");
178-
const isAPIHub = selectedProduct && selectedProduct === "verticals";
177+
// Detect product from URL path as a fallback when selectedProduct is not set
178+
// (e.g., incognito/unauthenticated users visiting verticals pages)
179+
const isVerticalsRoute = location.pathname.startsWith("/verticals");
180+
const effectiveProduct =
181+
selectedProduct || (isVerticalsRoute ? "verticals" : null);
182+
const isUnstract = !(effectiveProduct && effectiveProduct !== "unstract");
183+
const isAPIHub = effectiveProduct === "verticals";
179184
const isStaff = sessionDetails?.isStaff || sessionDetails?.is_staff;
180185
const isOpenSource = orgName === "mock_org";
181186

0 commit comments

Comments
 (0)