- }
- onClick={onClose}
+
+ {t('message.welcome-screen-message')}
+
+
+
+ {canAddService && (
+
+ )}
+
+
+
+
+
);
};
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/WelcomeScreen/WelcomeScreen.constants.ts b/openmetadata-ui/src/main/resources/ui/src/components/MyData/WelcomeScreen/WelcomeScreen.constants.ts
new file mode 100644
index 000000000000..d024b44470e3
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/WelcomeScreen/WelcomeScreen.constants.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2026 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Figma 15448:9083: a radial glow rising into the brand colour along the bottom
+// 65% of the panel; dark mode keeps it faint. `--tw-*` is the runtime name of
+// the core theme variables, and it follows the configured brand colour.
+const GLOW_SHAPE = 'ellipse 168% 168% at 56% -31%';
+const BRAND = 'var(--tw-color-brand-500)';
+
+const brandMix = (percent: number) =>
+ `color-mix(in srgb, ${BRAND} ${percent}%, transparent)`;
+
+export const WELCOME_GLOW_LIGHT = `radial-gradient(${GLOW_SHAPE}, ${[
+ 'transparent 55%',
+ `${brandMix(50)} 77.5%`,
+ `${brandMix(75)} 88.75%`,
+ BRAND,
+].join(', ')})`;
+
+export const WELCOME_GLOW_DARK = `radial-gradient(${GLOW_SHAPE}, ${[
+ 'transparent 47%',
+ `${brandMix(8)} 60%`,
+ `${brandMix(20)} 73%`,
+ brandMix(20),
+].join(', ')})`;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/WelcomeScreen/WelcomeScreenGate.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/WelcomeScreen/WelcomeScreenGate.test.tsx
new file mode 100644
index 000000000000..f7bace85d301
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/WelcomeScreen/WelcomeScreenGate.test.tsx
@@ -0,0 +1,113 @@
+/*
+ * Copyright 2026 Collate.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+import { LOGGED_IN_USER_STORAGE_KEY } from '../../../constants/constants';
+import { RouteVisibilityProvider } from '../../../context/RouteVisibilityProvider/RouteVisibilityProvider';
+import WelcomeScreenGate from './WelcomeScreenGate';
+
+const mockTour = { isTourPage: false };
+const mockWelcome = { isWelcomeVisible: true };
+
+jest.mock('../../../hooks/useApplicationStore', () => ({
+ useApplicationStore: () => ({ currentUser: { name: 'alex' } }),
+}));
+
+jest.mock('../../../hooks/useWelcomeStore', () => ({
+ useWelcomeStore: () => mockWelcome,
+}));
+
+jest.mock('../../../context/TourProvider/TourProvider', () => ({
+ useTourProvider: () => mockTour,
+}));
+
+jest.mock('./WelcomeScreen.component', () =>
+ jest.fn(({ onClose }) => (
+
+ ))
+);
+
+const renderGate = () =>
+ render(
+
+
+
+ })
-
-
-
-
- 
-
-
-
-
- {t('message.welcome-screen-message')}
-
-
-
- {t('message.take-quick-product-tour')}
-
-
+
+
+
-
- {t('message.hi-user-welcome-to', {
- user: userName || t('label.user'),
- })}
-
-
- {`${title}! 🎉`}
-
-
-
+
+
-
+
+ {`${greeting} 👋`}
+
+
home
+ home
+ + {`${t('message.look-like-upgraded-om')} ✨`} +
+
+
+
);
}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/BrandData/BrandClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/utils/BrandData/BrandClassBase.ts
index 2d8189341e73..d2ff1b03aa44 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/BrandData/BrandClassBase.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/BrandData/BrandClassBase.ts
@@ -10,11 +10,16 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import WelcomeScreenSrc from '../../assets/img/welcome-screen.png';
+import UpgradeScreenDarkSrc from '../../assets/img/upgrade-screen-dark.svg';
+import UpgradeScreenLightSrc from '../../assets/img/upgrade-screen-light.svg';
+import WelcomeScreenDarkSrc from '../../assets/img/welcome-screen-dark.svg';
+import WelcomeScreenLightSrc from '../../assets/img/welcome-screen-light.svg';
import MonogramSrc, {
ReactComponent as Monogram,
} from '../../assets/svg/logo-monogram.svg';
import LogoSrc, { ReactComponent as Logo } from '../../assets/svg/logo.svg';
+import { Theme } from '../../context/UntitledUIThemeProvider/theme-provider.interface';
+import { t } from '../i18next/LocalUtil';
class BrandClassBase {
public getMonogram() {
@@ -55,8 +60,17 @@ class BrandClassBase {
return 'https://blog.open-metadata.org/announcing-openmetadata-1-13-123d66609468';
}
- public getWelcomeScreenImg() {
- return WelcomeScreenSrc;
+ public getWelcomeScreenImg(theme: Theme) {
+ return theme === 'dark' ? WelcomeScreenDarkSrc : WelcomeScreenLightSrc;
+ }
+
+ public getUpgradeScreenImg(theme: Theme) {
+ return theme === 'dark' ? UpgradeScreenDarkSrc : UpgradeScreenLightSrc;
+ }
+
+ /** Product name in the welcome screen's "Your {{platform}} is ready". */
+ public getPlatformName() {
+ return t('label.context-platform');
}
}