Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-11 00:08:30 +01:00
Code Issues Projects Releases Wiki Activity

feat: connect welcome to sdk dialog (#8078)

Browse Source 
Now welcome screen is connected to sdk dialog.
This commit is contained in:
Jaanus Sellin 2024-09-04 13:19:08 +03:00 committed by GitHub
parent d220aaec0f
commit 48ddd255d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 41 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useMemo } from 'react';
import { useCallback, useMemo, useState } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { PageContent } from 'component/common/PageContent/PageContent';
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@ -67,6 +67,7 @@ export const ProjectFeatureToggles = ({
const onboardingUIEnabled = useUiFlag('onboardingUI');
const projectId = useRequiredPathParam('projectId');
const { project } = useProjectOverview(projectId);
const [connectSdkOpen, setConnectSdkOpen] = useState(false);
const {
features,
@ -402,7 +403,12 @@ export const ProjectFeatureToggles = ({
onboardingUIEnabled &&
project.onboardingStatus.status !== 'onboarded'
}
show={<ProjectOnboarding projectId={projectId} />}
show={
<ProjectOnboarding
projectId={projectId}
setConnectSdkOpen={setConnectSdkOpen}
/>
}
/>
<PageContent
disableLoading
@ -497,8 +503,10 @@ export const ProjectFeatureToggles = ({
{featureToggleModals}
<ConnectSdkDialog
open={false}
onClose={() => {}}
open={connectSdkOpen}
onClose={() => {
setConnectSdkOpen(false);
}}
project={projectId}
environments={environments}
/>

11
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/ProjectOnboarding.tsx
View File

@ -3,6 +3,7 @@ import { WelcomeToProject } from './WelcomeToProject';
interface IProjectOnboardingProps {
projectId: string;
setConnectSdkOpen: (open: boolean) => void;
}
const Container = styled('div')(({ theme }) => ({
@ -18,10 +19,16 @@ const SdkExample = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,
}));
export const ProjectOnboarding = ({ projectId }: IProjectOnboardingProps) => {
export const ProjectOnboarding = ({
projectId,
setConnectSdkOpen,
}: IProjectOnboardingProps) => {
return (
<Container>
<WelcomeToProject projectId={projectId} />
<WelcomeToProject
projectId={projectId}
setConnectSdkOpen={setConnectSdkOpen}
/>
<SdkExample>View SDK example</SdkExample>
</Container>
);

14
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/WelcomeToProject.test.tsx
View File

@ -17,7 +17,12 @@ test('Project can start onboarding', async () => {
<Routes>
<Route
path={'/projects/:projectId'}
element={<WelcomeToProject projectId={projectId} />}
element={
<WelcomeToProject
projectId={projectId}
setConnectSdkOpen={() => {}}
/>
}
/>
</Routes>,
{
@ -39,7 +44,12 @@ test('Project can connect SDK', async () => {
<Routes>
<Route
path={'/projects/:projectId'}
element={<WelcomeToProject projectId={projectId} />}
element={
<WelcomeToProject
projectId={projectId}
setConnectSdkOpen={() => {}}
/>
}
/>
</Routes>,
{

10
frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/WelcomeToProject.tsx
View File

@ -12,6 +12,7 @@ import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
interface IWelcomeToProjectProps {
projectId: string;
setConnectSdkOpen: (open: boolean) => void;
}
interface IExistingFlagsProps {
@ -81,7 +82,10 @@ const StyledLink = styled(Link)({
justifyContent: 'center',
});
export const WelcomeToProject = ({ projectId }: IWelcomeToProjectProps) => {
export const WelcomeToProject = ({
projectId,
setConnectSdkOpen,
}: IWelcomeToProjectProps) => {
const { project } = useProjectOverview(projectId);
const isFirstFlagCreated =
project.onboardingStatus.status === 'first-flag-created';
@ -117,7 +121,9 @@ export const WelcomeToProject = ({ projectId }: IWelcomeToProjectProps) => {
We have not detected any connected SDKs on this project.
</Typography>
<ResponsiveButton
onClick={() => {}}
onClick={() => {
setConnectSdkOpen(true);
}}
maxWidth='200px'
projectId={projectId}
Icon={Add}