chore: move onboarding flow and dialog under same location (#8272)

It is mostly moving the onboarding folders under same directory for more
clear project structure.

frontend/src/component/onboarding/dialog/CodeRenderer.tsx

@@ -1,7 +1,7 @@
 import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
 import type { FC } from 'react';
 import copy from 'copy-to-clipboard';
-import useToast from '../../hooks/useToast';
+import useToast from 'hooks/useToast';
 import { IconButton, styled, Tooltip } from '@mui/material';
 import CopyIcon from '@mui/icons-material/FileCopy';
 import type { SdkName } from './sharedTypes';

frontend/src/component/onboarding/dialog/GenerateApiKey.tsx

@@ -11,13 +11,13 @@ import {
     useMediaQuery,
     useTheme,
 } from '@mui/material';
-import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
+import { SingleSelectConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useEffect } from 'react';
 import { SectionHeader, StepperBox } from './SharedComponents';
 import { Stepper } from './Stepper';
-import { Badge } from '../common/Badge/Badge';
+import { Badge } from 'component/common/Badge/Badge';
 
 const ChooseEnvironment = ({
     environments,

frontend/src/component/onboarding/dialog/SdkConnected.tsx

@@ -4,7 +4,7 @@ import { SectionHeader, StepperBox } from './SharedComponents';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import type { Sdk } from './sharedTypes';
 import { Stepper } from './Stepper';
-import { Badge } from '../common/Badge/Badge';
+import { Badge } from 'component/common/Badge/Badge';
 import { Markdown } from 'component/common/Markdown/Markdown';
 import { CodeRenderer, codeRenderSnippets } from './CodeRenderer';
 

frontend/src/component/onboarding/dialog/SdkConnection.tsx

@@ -1,5 +1,5 @@
 import { Suspense } from 'react';
-import Loader from '../common/Loader/Loader';
+import Loader from 'component/common/Loader/Loader';
 import TestSdkConnection from './TestSdkConnection';
 import type { Sdk } from './sharedTypes';
 import { SdkConnected } from './SdkConnected';

frontend/src/component/onboarding/dialog/SelectSdk.tsx

@@ -4,7 +4,7 @@ import { formatAssetPath } from 'utils/formatPath';
 import { SectionHeader, StepperBox } from './SharedComponents';
 import { clientSdks, type Sdk, serverSdks } from './sharedTypes';
 import { Stepper } from './Stepper';
-import { Badge } from '../common/Badge/Badge';
+import { Badge } from 'component/common/Badge/Badge';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),

frontend/src/component/onboarding/dialog/TestSdkConnection.tsx

@@ -3,9 +3,9 @@ import { Avatar, Box, Link, styled, Typography } from '@mui/material';
 import { SectionHeader, StepperBox } from './SharedComponents';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { allSdks, type Sdk } from './sharedTypes';
-import { formatAssetPath } from '../../utils/formatPath';
+import { formatAssetPath } from 'utils/formatPath';
 import { Stepper } from './Stepper';
-import { Badge } from '../common/Badge/Badge';
+import { Badge } from 'component/common/Badge/Badge';
 import { Markdown } from 'component/common/Markdown/Markdown';
 import { CodeRenderer, codeRenderSnippets } from './CodeRenderer';
 

frontend/src/component/onboarding/dialog/UnleashConcepts.tsx

@@ -1,5 +1,5 @@
 import { Box, styled, type Theme } from '@mui/material';
-import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import CodeIcon from '@mui/icons-material/Code';
 

frontend/src/component/onboarding/dialog/sharedTypes.ts

@@ -1,18 +1,18 @@
-import node from '../../assets/icons/sdks/Logo-node.svg';
-import go from '../../assets/icons/sdks/Logo-go.svg';
-import ruby from '../../assets/icons/sdks/Logo-ruby.svg';
-import php from '../../assets/icons/sdks/Logo-php.svg';
-import rust from '../../assets/icons/sdks/Logo-rust.svg';
-import dotnet from '../../assets/icons/sdks/Logo-net.svg';
-import java from '../../assets/icons/sdks/Logo-java.svg';
-import python from '../../assets/icons/sdks/Logo-python.svg';
-import javascript from '../../assets/icons/sdks/Logo-javascript.svg';
-import react from '../../assets/icons/sdks/Logo-react.svg';
-import vue from '../../assets/icons/sdks/Logo-vue.svg';
-import svelte from '../../assets/icons/sdks/Logo-svelte.svg';
-import swift from '../../assets/icons/sdks/Logo-swift.svg';
-import android from '../../assets/icons/sdks/Logo-android.svg';
-import flutter from '../../assets/icons/sdks/Logo-flutter.svg';
+import node from '../../../assets/icons/sdks/Logo-node.svg';
+import go from '../../../assets/icons/sdks/Logo-go.svg';
+import ruby from '../../../assets/icons/sdks/Logo-ruby.svg';
+import php from '../../../assets/icons/sdks/Logo-php.svg';
+import rust from '../../../assets/icons/sdks/Logo-rust.svg';
+import dotnet from '../../../assets/icons/sdks/Logo-net.svg';
+import java from '../../../assets/icons/sdks/Logo-java.svg';
+import python from '../../../assets/icons/sdks/Logo-python.svg';
+import javascript from '../../../assets/icons/sdks/Logo-javascript.svg';
+import react from '../../../assets/icons/sdks/Logo-react.svg';
+import vue from '../../../assets/icons/sdks/Logo-vue.svg';
+import svelte from '../../../assets/icons/sdks/Logo-svelte.svg';
+import swift from '../../../assets/icons/sdks/Logo-swift.svg';
+import android from '../../../assets/icons/sdks/Logo-android.svg';
+import flutter from '../../../assets/icons/sdks/Logo-flutter.svg';
 
 export type SdkType = 'client' | 'frontend';
 export type Sdk = { name: SdkName; type: SdkType };

frontend/src/component/onboarding/dialog/snippets/vue.md

@@ -4,17 +4,18 @@ npm install @unleash/proxy-client-vue
 ```
 
 2\. Initialize Unleash
+
 ```js
-import { createApp } from 'vue'
+import { createApp } from 'frontend/src/component/onboarding/dialog/snippets/vue'
 import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
 // import the root component App from a single-file component.
 import App from './App.vue'
 
 const config = {
-  url: '<YOUR_API_URL>',
-  clientKey: '<YOUR_API_TOKEN>',
-  refreshInterval: 15,
-  appName: 'unleash-onboarding-vue',
+    url: '<YOUR_API_URL>',
+    clientKey: '<YOUR_API_TOKEN>',
+    refreshInterval: 15,
+    appName: 'unleash-onboarding-vue',
 }
 
 const app = createApp(App)

frontend/src/component/onboarding/flow/ProjectOnboarding.tsx

@@ -4,7 +4,7 @@ import {
     UPDATE_PROJECT,
     CREATE_PROJECT_API_TOKEN,
 } from 'component/providers/AccessProvider/permissions';
-import { FlagCreationButton } from '../ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader';
+import { FlagCreationButton } from '../../project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { SdkExample } from './SdkExample';

frontend/src/component/onboarding/flow/SdkExample.tsx

@@ -1,8 +1,8 @@
 import { type SelectChangeEvent, styled, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
-import Select from 'component/common/select';
+import Select from '../../common/select';
 import { useState } from 'react';
-import { allSdks } from '../../../../onboarding/sharedTypes';
+import { allSdks } from '../dialog/sharedTypes';
 
 const TitleContainer = styled('div')(({ theme }) => ({
     display: 'flex',

frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -42,8 +42,8 @@ import { AvatarCell } from './AvatarCell';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { styled } from '@mui/material';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
-import { ConnectSdkDialog } from '../../../onboarding/ConnectSdkDialog';
-import { ProjectOnboarding } from './ProjectOnboarding/ProjectOnboarding';
+import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog';
+import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 
 interface IPaginatedProjectFeatureTogglesProps {