feat(page-new-services): add page and update service creation flow (#…

…1345)

apps/console/src/app/app.tsx

@@ -111,9 +111,7 @@ export function App() {
 
  useEffect(() => {
  if (user && user.sub) {
- if (NODE_ENV === 'production') {
- initMonitorings(user)
- }
+ initMonitorings(user)
  }
  }, [user, initMonitorings])
 

apps/console/src/app/router/main.router.tsx

@@ -35,10 +35,14 @@ import {
  ORGANIZATION_URL,
  OVERVIEW_URL,
  SERVICES_APPLICATION_CREATION_URL,
+ SERVICES_APPLICATION_TEMPLATE_CREATION_URL,
  SERVICES_CRONJOB_CREATION_URL,
  SERVICES_DATABASE_CREATION_URL,
+ SERVICES_DATABASE_TEMPLATE_CREATION_URL,
  SERVICES_HELM_CREATION_URL,
+ SERVICES_HELM_TEMPLATE_CREATION_URL,
  SERVICES_LIFECYCLE_CREATION_URL,
+ SERVICES_LIFECYCLE_TEMPLATE_CREATION_URL,
  SERVICES_URL,
  SETTINGS_URL,
  USER_URL,
@@ -125,6 +129,12 @@ export const ROUTER: RouterProps[] = [
  protected: true,
  layout: false,
  },
+ {
+ path: `${SERVICES_URL()}${SERVICES_DATABASE_TEMPLATE_CREATION_URL()}/*`,
+ component: <PageDatabaseCreateFeature />,
+ protected: true,
+ layout: false,
+ },
  {
  path: `${SERVICES_URL()}${SERVICES_CRONJOB_CREATION_URL}/*`,
  component: <PageJobCreateFeature />,
@@ -137,18 +147,36 @@ export const ROUTER: RouterProps[] = [
  protected: true,
  layout: false,
  },
+ {
+ path: `${SERVICES_URL()}${SERVICES_LIFECYCLE_TEMPLATE_CREATION_URL()}/*`,
+ component: <PageJobCreateFeature />,
+ protected: true,
+ layout: false,
+ },
  {
  path: `${SERVICES_URL()}${SERVICES_APPLICATION_CREATION_URL}/*`,
  component: <PageApplicationCreateFeature />,
  protected: true,
  layout: false,
  },
+ {
+ path: `${SERVICES_URL()}${SERVICES_APPLICATION_TEMPLATE_CREATION_URL()}/*`,
+ component: <PageApplicationCreateFeature />,
+ protected: true,
+ layout: false,
+ },
  {
  path: `${SERVICES_URL()}${SERVICES_HELM_CREATION_URL}/*`,
  component: <PageHelmCreateFeature />,
  protected: true,
  layout: false,
  },
+ {
+ path: `${SERVICES_URL()}${SERVICES_HELM_TEMPLATE_CREATION_URL()}/*`,
+ component: <PageHelmCreateFeature />,
+ protected: true,
+ layout: false,
+ },
  {
  path: `${APPLICATION_URL()}/*`,
  component: <PageApplication />,

libs/domains/organizations/feature/src/lib/annotation-items-list-modal/__snapshots__/annotation-items-list-modal.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`AnnotationItemsListModal should match snapshots 1`] = `
  role="img"
  />
  <input
- class="w-full rounded border border-neutral-250 dark:border-neutral-350 dark:bg-transparent text-neutral-400 dark:text-white placeholder:text-neutral-350 dark:placeholder:text-neutral-250 pl-10 pr-6 leading-none focus:outline-none focus:border-brand-400 focus:transition-[border-color] h-9 text-xs"
+ class="w-full rounded border border-neutral-250 dark:border-neutral-350 dark:bg-transparent text-neutral-400 dark:text-white placeholder:text-neutral-350 dark:placeholder:text-neutral-250 pl-10 pr-6 focus:outline-none focus:border-brand-400 focus:transition-[border-color] h-9 text-xs"
  data-testid="input-search"
  name="search"
  placeholder="Search by project, environment, service name"

libs/domains/organizations/feature/src/lib/git-token-services-list-modal/__snapshots__/git-token-services-list-modal.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`GitTokenServicesListModal should match snapshots 1`] = `
  role="img"
  />
  <input
- class="w-full rounded border border-neutral-250 dark:border-neutral-350 dark:bg-transparent text-neutral-400 dark:text-white placeholder:text-neutral-350 dark:placeholder:text-neutral-250 pl-10 pr-6 leading-none focus:outline-none focus:border-brand-400 focus:transition-[border-color] h-9 text-xs"
+ class="w-full rounded border border-neutral-250 dark:border-neutral-350 dark:bg-transparent text-neutral-400 dark:text-white placeholder:text-neutral-350 dark:placeholder:text-neutral-250 pl-10 pr-6 focus:outline-none focus:border-brand-400 focus:transition-[border-color] h-9 text-xs"
  data-testid="input-search"
  name="search"
  placeholder="Search by project, environment, service name"

libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap

@@ -21,14 +21,14 @@ exports[`SelectCommitModal should match snapshot 1`] = `
  For X service
  </div>
  <div
- class="relative w-full "
+ class="relative w-full"
  >
  <span
  class="icon-solid-magnifying-glass shrink-0 absolute left-3 top-1/2 -translate-y-1/2 block text-base text-neutral-400 dark:text-white leading-none"
  role="img"
  />
  <input
- class="w-full rounded border border-neutral-250 dark:border-neutral-350 dark:bg-transparent text-neutral-400 dark:text-white placeholder:text-neutral-350 dark:placeholder:text-neutral-250 pl-10 pr-6 leading-none focus:outline-none focus:border-brand-400 focus:transition-[border-color] h-9 text-xs"
+ class="w-full rounded border border-neutral-250 dark:border-neutral-350 dark:bg-transparent text-neutral-400 dark:text-white placeholder:text-neutral-350 dark:placeholder:text-neutral-250 pl-10 pr-6 focus:outline-none focus:border-brand-400 focus:transition-[border-color] h-9 text-xs"
  data-testid="input-search"
  name="search"
  placeholder="Search by commit message or commit id"
@@ -73,7 +73,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
  <div>
  <button
  aria-checked="false"
- class="group transition bg-neutral-100 border border-neutral-300 w-[20px] h-[20px] rounded-full hover:border-2 hover:border-brand-500 data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 disabled:hover:border disabled:bg-neutral-150 disabled:border-neutral-250 disabled:data-[state=checked]:hover:border-2 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300"
+ class="group transition bg-neutral-100 border border-neutral-300 w-[20px] h-[20px] rounded-full hover:border-2 hover:border-brand-500 data-[state=checked]:bg-brand-500 data-[state=checked]:border-2 data-[state=checked]:border-brand-500 disabled:hover:border disabled:bg-neutral-150 disabled:border-neutral-250 disabled:data-[state=checked]:hover:border-2 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300"
  data-radix-collection-item=""
  data-state="unchecked"
  role="radio"
@@ -175,7 +175,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
  <div>
  <button
  aria-checked="true"
- class="group transition bg-neutral-100 border border-neutral-300 w-[20px] h-[20px] rounded-full hover:border-2 hover:border-brand-500 data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500 disabled:hover:border disabled:bg-neutral-150 disabled:border-neutral-250 disabled:data-[state=checked]:hover:border-2 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300"
+ class="group transition bg-neutral-100 border border-neutral-300 w-[20px] h-[20px] rounded-full hover:border-2 hover:border-brand-500 data-[state=checked]:bg-brand-500 data-[state=checked]:border-2 data-[state=checked]:border-brand-500 disabled:hover:border disabled:bg-neutral-150 disabled:border-neutral-250 disabled:data-[state=checked]:hover:border-2 disabled:data-[state=checked]:border-brand-300 disabled:data-[state=checked]:bg-brand-300"
  data-disabled=""
  data-radix-collection-item=""
  data-state="checked"

libs/domains/services/feature/src/lib/service-list/service-list.tsx

@@ -10,6 +10,7 @@ import {
  getSortedRowModel,
  useReactTable,
 } from '@tanstack/react-table'
+import { PostHogFeature } from 'posthog-js/react'
 import type {
  ApplicationGitRepository,
  ContainerResponse,
@@ -36,7 +37,14 @@ import {
  DATABASE_URL,
  DEPLOYMENT_LOGS_URL,
  ENVIRONMENT_LOGS_URL,
+ SERVICES_APPLICATION_CREATION_URL,
+ SERVICES_CRONJOB_CREATION_URL,
+ SERVICES_DATABASE_CREATION_URL,
  SERVICES_GENERAL_URL,
+ SERVICES_HELM_CREATION_URL,
+ SERVICES_LIFECYCLE_CREATION_URL,
+ SERVICES_NEW_URL,
+ SERVICES_URL,
 } from '@qovery/shared/routes'
 import {
  Badge,
@@ -46,6 +54,9 @@ import {
  ExternalLink,
  Icon,
  Link,
+ Menu,
+ MenuAlign,
+ type MenuData,
  StatusChip,
  TableFilter,
  TablePrimitives,
@@ -525,6 +536,52 @@ export function ServiceList({ environment, className, ...props }: ServiceListPro
  },
  })
 
+ const newServicesMenu: MenuData = [
+ {
+ items: [
+ {
+ name: 'Create application',
+ contentLeft: <Icon iconName="layer-group" className="text-brand-500 text-sm" />,
+ onClick: () => {
+ navigate(`${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_APPLICATION_CREATION_URL}`)
+ },
+ },
+ {
+ name: 'Create database',
+ contentLeft: <Icon iconName="database" className="text-brand-500 text-sm" />,
+ onClick: () => {
+ navigate(`${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_DATABASE_CREATION_URL}`)
+ },
+ },
+ {
+ name: 'Create lifecycle job',
+ contentLeft: (
+ <Icon name={IconEnum.LIFECYCLE_JOB_STROKE} width="14" height="16" className="text-brand-500 text-sm" />
+ ),
+ onClick: () => {
+ navigate(`${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_LIFECYCLE_CREATION_URL}`)
+ },
+ },
+ {
+ name: 'Create cronjob',
+ contentLeft: (
+ <Icon name={IconEnum.CRON_JOB_STROKE} width="14" height="16" className="text-brand-500 text-sm" />
+ ),
+ onClick: () => {
+ navigate(`${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_CRONJOB_CREATION_URL}`)
+ },
+ },
+ {
+ name: 'Create helm',
+ contentLeft: <Icon name={IconEnum.HELM_OFFICIAL} width="14" height="16" className="text-brand-500 text-sm" />,
+ onClick: () => {
+ navigate(`${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_HELM_CREATION_URL}`)
+ },
+ },
+ ],
+ },
+ ]
+
  if (services.length === 0 && isServicesLoading) {
  return <ServiceListSkeleton />
  }
@@ -535,7 +592,34 @@ export function ServiceList({ environment, className, ...props }: ServiceListPro
  title="No service found"
  description="You can create a service from the button on the top"
  className="bg-white rounded-t-sm mt-2 pt-10"
- />
+ >
+ <PostHogFeature
+ flag="service-template"
+ match={true}
+ fallback={
+ <Menu
+ trigger={
+ <Button size="lg" className="gap-2 mt-5">
+ New service
+ <Icon iconName="circle-plus" />
+ </Button>
+ }
+ menus={newServicesMenu}
+ arrowAlign={MenuAlign.CENTER}
+ />
+ }
+ >
+ <Link
+ as="button"
+ size="lg"
+ className="gap-2 mt-5"
+ to={`${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_NEW_URL}`}
+ >
+ New service
+ <Icon iconName="circle-plus" />
+ </Link>
+ </PostHogFeature>
+ </EmptyState>
  )
  }
 

libs/pages/services/src/lib/feature/page-application-create-feature/page-application-create-feature.tsx

@@ -1,3 +1,4 @@
+import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { createContext, useContext, useState } from 'react'
 import { Navigate, Route, Routes, useNavigate, useParams } from 'react-router-dom'
 import { AssistantTrigger } from '@qovery/shared/assistant/feature'
@@ -6,7 +7,13 @@ import {
  type ApplicationResourcesData,
  type FlowPortData,
 } from '@qovery/shared/interfaces'
-import { SERVICES_APPLICATION_CREATION_URL, SERVICES_CREATION_GENERAL_URL, SERVICES_URL } from '@qovery/shared/routes'
+import {
+ SERVICES_APPLICATION_CREATION_URL,
+ SERVICES_CREATION_GENERAL_URL,
+ SERVICES_GENERAL_URL,
+ SERVICES_NEW_URL,
+ SERVICES_URL,
+} from '@qovery/shared/routes'
 import { FunnelFlow } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 import { ROUTER_SERVICE_CREATION } from '../../router/router'
@@ -43,7 +50,7 @@ export const steps: { title: string }[] = [
 ]
 
 export function PageApplicationCreateFeature() {
- const { organizationId = '', projectId = '', environmentId = '' } = useParams()
+ const { organizationId = '', projectId = '', environmentId = '', slug, option } = useParams()
 
  // values and setters for context initialization
  const [currentStep, setCurrentStep] = useState<number>(1)
@@ -64,7 +71,12 @@ export function PageApplicationCreateFeature() {
 
  useDocumentTitle('Creation - Service')
 
- const pathCreate = `${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_APPLICATION_CREATION_URL}`
+ const pathCreate =
+ SERVICES_URL(organizationId, projectId, environmentId) +
+ SERVICES_APPLICATION_CREATION_URL +
+ `${slug && option ? `/${slug}/${option}` : ''}`
+
+ const flagEnabled = useFeatureFlagEnabled('service-template')
 
  return (
  <ApplicationContainerCreateContext.Provider
@@ -81,7 +93,10 @@ export function PageApplicationCreateFeature() {
  >
  <FunnelFlow
  onExit={() => {
- navigate(SERVICES_URL(organizationId, projectId, environmentId))
+ const link = `${SERVICES_URL(organizationId, projectId, environmentId)}${
+ flagEnabled ? SERVICES_NEW_URL : SERVICES_GENERAL_URL
+ }`
+ navigate(link)
  }}
  totalSteps={steps.length}
  currentStep={currentStep}

libs/pages/services/src/lib/feature/page-application-create-feature/step-general-feature/step-general-feature.tsx

@@ -2,26 +2,37 @@ import { useEffect } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useOrganization } from '@qovery/domains/organizations/feature'
+import { type ServiceTypeEnum } from '@qovery/shared/enums'
 import { type ApplicationGeneralData } from '@qovery/shared/interfaces'
 import { SERVICES_APPLICATION_CREATION_URL, SERVICES_CREATION_RESOURCES_URL, SERVICES_URL } from '@qovery/shared/routes'
 import { FunnelFlowBody, toastError } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 import StepGeneral from '../../../ui/page-application-create/step-general/step-general'
+import { findTemplateData } from '../../page-job-create-feature/page-job-create-feature'
+import { serviceTemplates } from '../../page-new-feature/service-templates'
 import { useApplicationContainerCreateContext } from '../page-application-create-feature'
 
 export function StepGeneralFeature() {
  useDocumentTitle('General - Create Application')
  const { setGeneralData, generalData, setCurrentStep } = useApplicationContainerCreateContext()
- const { organizationId = '', projectId = '', environmentId = '' } = useParams()
+ const { organizationId = '', projectId = '', environmentId = '', slug, option } = useParams()
  const navigate = useNavigate()
  const { data: organization } = useOrganization({ organizationId })
 
  useEffect(() => {
  setCurrentStep(1)
  }, [setCurrentStep])
 
+ const dataTemplate = serviceTemplates.find((service) => service.slug === slug)
+ const dataOptionTemplate = option !== 'current' ? findTemplateData(slug, option) : null
+
  const methods = useForm<ApplicationGeneralData>({
- defaultValues: { auto_deploy: true, ...generalData },
+ defaultValues: {
+ auto_deploy: true,
+ name: dataTemplate?.slug ?? '',
+ serviceType: (dataOptionTemplate?.type as ServiceTypeEnum) ?? (dataTemplate?.type as ServiceTypeEnum),
+ ...generalData,
+ },
  mode: 'onChange',
  })
 

libs/pages/services/src/lib/feature/page-application-create-feature/step-summary-feature/step-summary-feature.tsx

@@ -1,3 +1,4 @@
+import posthog from 'posthog-js'
 import {
  type ApplicationRequest,
  BuildModeEnum,
@@ -26,7 +27,7 @@ export function StepSummaryFeature() {
  useDocumentTitle('Summary - Create Application')
  const { generalData, portData, resourcesData, setCurrentStep } = useApplicationContainerCreateContext()
  const navigate = useNavigate()
- const { organizationId = '', projectId = '', environmentId = '' } = useParams()
+ const { organizationId = '', projectId = '', environmentId = '', slug, option } = useParams()
  const pathCreate = `${SERVICES_URL(organizationId, projectId, environmentId)}${SERVICES_APPLICATION_CREATION_URL}`
  const [loadingCreate, setLoadingCreate] = useState(false)
  const [loadingCreateAndDeploy, setLoadingCreateAndDeploy] = useState(false)
@@ -127,6 +128,14 @@ export function StepSummaryFeature() {
  })
  setLoadingCreateAndDeploy(false)
  }
+
+ if (slug && option) {
+ posthog.capture('create-service', {
+ selectedServiceType: slug,
+ selectedServiceSubType: option,
+ })
+ }
+
  setLoadingCreate(false)
  navigate(SERVICES_URL(organizationId, projectId, environmentId))
  } catch (error) {