fix(create-cluster): warning message for the summary step (#536)

libs/pages/clusters/src/lib/ui/page-clusters-create/step-summary/step-summary.tsx

@@ -5,7 +5,18 @@ import {
   ClusterRemoteData,
   ClusterResourcesData,
 } from '@qovery/shared/interfaces'
-import { Button, ButtonIcon, ButtonIconStyle, ButtonSize, ButtonStyle, Icon, IconAwesomeEnum } from '@qovery/shared/ui'
+import {
+  BannerBox,
+  BannerBoxEnum,
+  Button,
+  ButtonIcon,
+  ButtonIconStyle,
+  ButtonSize,
+  ButtonStyle,
+  Icon,
+  IconAwesomeEnum,
+  Link,
+} from '@qovery/shared/ui'
 import { trimId } from '@qovery/shared/utils'
 
 export interface StepSummaryProps {
@@ -51,6 +62,25 @@ export function StepSummary(props: StepSummaryProps) {
       </div>
 
       <div className="mb-10">
+        <BannerBox
+          className="mb-5"
+          title="Qovery manages all for you"
+          message={
+            <span>
+              Use exclusively the Qovery console to update the resources managed by Qovery on your cloud account.
+              <br /> Do not manually update or upgrade them on the cloud provider console, otherwise you will risk a
+              drift in the configuration.
+              <Link
+                className="ml-0.5"
+                size="text-xs"
+                link="https://hub.qovery.com/docs/useful-resources/faq/#how-do-you-support-new-kubernetes-version"
+                linkLabel="See more details"
+                external
+              />
+            </span>
+          }
+          type={BannerBoxEnum.WARNING}
+        />
         <div
           data-testid="summary-general"
           className="flex p-4 w-full border rounded border-element-light-lighter-500 bg-element-light-lighter-200 mb-2"

libs/pages/logs/application/src/lib/page-application-logs.spec.tsx

@@ -1,6 +1,11 @@
 import { render } from '__tests__/utils/setup-jest'
 import PageApplicationLogs from './page-application-logs'
 
+jest.mock('react-use-websocket', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}))
+
 describe('PageApplicationLogs', () => {
   it('should render successfully', () => {
     const { baseElement } = render(<PageApplicationLogs />)

libs/pages/logs/application/src/lib/page-application-logs.tsx

@@ -82,28 +82,32 @@ export function PageApplicationLogs() {
     },
   })
 
-  useWebSocket(nginxLogsUrl, {
-    onMessage: (message) => {
-      const data = { ...JSON.parse(message?.data), pod_name: 'nginx' }
+  useWebSocket(
+    nginxLogsUrl,
+    {
+      onMessage: (message) => {
+        const data = { ...JSON.parse(message?.data), pod_name: 'nginx' }
 
-      if (pauseStatusLogs) {
-        setPauseLogs((prev: Log[]) => {
-          const sortedLogs = [...prev, data].sort(
-            (a: Log, b: Log) => new Date(a.created_at).valueOf() - new Date(b.created_at).valueOf()
-          )
-          return sortedLogs
-        })
-      } else {
-        setLogs((prev: Log[]) => {
-          const sortedLogs = [...prev, ...pauseLogs, data].sort(
-            (a: Log, b: Log) => new Date(a.created_at).valueOf() - new Date(b.created_at).valueOf()
-          )
-          return sortedLogs
-        })
-        setPauseLogs([])
-      }
+        if (pauseStatusLogs) {
+          setPauseLogs((prev: Log[]) => {
+            const sortedLogs = [...prev, data].sort(
+              (a: Log, b: Log) => new Date(a.created_at).valueOf() - new Date(b.created_at).valueOf()
+            )
+            return sortedLogs
+          })
+        } else {
+          setLogs((prev: Log[]) => {
+            const sortedLogs = [...prev, ...pauseLogs, data].sort(
+              (a: Log, b: Log) => new Date(a.created_at).valueOf() - new Date(b.created_at).valueOf()
+            )
+            return sortedLogs
+          })
+          setPauseLogs([])
+        }
+      },
     },
-  })
+    debugMode
+  )
 
   useEffect(() => {
     // reset state when the applicationId change

libs/pages/logs/application/src/lib/ui/row/row.tsx

@@ -59,7 +59,7 @@ export const formatVersion = (version: string) => {
 
 export interface RowProps {
   data: Log
-  filter: TableFilterProps
+  filter?: TableFilterProps
 }
 
 export function Row(props: RowProps) {

libs/pages/settings/src/lib/page-settings.tsx

@@ -91,16 +91,8 @@ export function PageSettings() {
     ],
   }))
 
-  const accountLinks = [
-    {
-      title: 'General',
-      icon: IconAwesomeEnum.WHEEL,
-      onClick: () => window.open('https://console.qovery.com/platform/organization/user/settings/general'),
-    },
-  ]
-
   return (
-    <Container organizationLinks={organizationLinks} projectLinks={projectLinks} accountLinks={accountLinks}>
+    <Container organizationLinks={organizationLinks} projectLinks={projectLinks}>
       <Routes>
         {ROUTER_SETTINGS.map((route) => (
           <Route key={route.path} path={route.path} element={route.component} />

libs/pages/settings/src/lib/ui/container/container.tsx

@@ -6,13 +6,12 @@ import { NavigationLeft, NavigationLeftLinkProps, useModal } from '@qovery/share
 export interface ContainerProps {
   organizationLinks: NavigationLeftLinkProps[]
   projectLinks: NavigationLeftLinkProps[]
-  accountLinks: NavigationLeftLinkProps[]
   children: ReactNode
 }
 
 export function Container(props: ContainerProps) {
   const { organizationId = '' } = useParams()
-  const { organizationLinks, projectLinks, accountLinks, children } = props
+  const { organizationLinks, projectLinks, children } = props
   const { openModal, closeModal } = useModal()
 
   return (
@@ -33,11 +32,6 @@ export function Container(props: ContainerProps) {
             }}
             className="py-6 border-t border-element-light-lighter-400"
           />
-          <NavigationLeft
-            title="Account"
-            links={accountLinks}
-            className="py-6 border-t border-element-light-lighter-400"
-          />
         </div>
       </div>
       <div className="flex flex-grow min-h-[calc(100vh-10px)]">{children}</div>

libs/shared/ui/src/lib/components/banner-box/banner-box.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react'
 import Icon from '../icon/icon'
 import { IconAwesomeEnum } from '../icon/icon-awesome.enum'
 
@@ -8,7 +9,7 @@ export enum BannerBoxEnum {
 }
 
 export interface BannerBoxProps {
-  message: string
+  message: string | ReactNode
   icon?: IconAwesomeEnum | string
   title?: string
   className?: string