#RI-5313 - update custom tutorials form

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/EnablementArea.spec.tsx

@@ -153,14 +153,13 @@ describe('EnablementArea', () => {
       expect(screen.getByTestId('upload-tutorial-form')).toBeInTheDocument()
     })
 
-    it('should render welcome screen and open form', () => {
+    it('should render open form with tutorials', () => {
       const customTutorials = [{ ...MOCK_CUSTOM_TUTORIALS_ITEMS[0], children: [] }]
       render(<EnablementArea {...instance(mockedProps)} customTutorials={customTutorials} />)
       expect(screen.getByTestId('welcome-my-tutorials')).toBeInTheDocument()
 
       fireEvent.click(screen.getByTestId('upload-tutorial-btn'))
       expect(screen.getByTestId('upload-tutorial-form')).toBeInTheDocument()
-      expect(screen.getByTestId('welcome-my-tutorials')).toBeInTheDocument()
     })
 
     it('should call proper actions after upload form submit', async () => {

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/CreateTutorialLink.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { fireEvent, render, screen } from 'uiSrc/utils/test-utils'
+
+import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/clusterDetailsHandlers'
+import CreateTutorailLink from './CreateTutorialLink'
+
+jest.mock('uiSrc/telemetry', () => ({
+  ...jest.requireActual('uiSrc/telemetry'),
+  sendEventTelemetry: jest.fn(),
+}))
+
+describe('CreateTutoralLink', () => {
+  it('should render', () => {
+    expect(render(<CreateTutorailLink />)).toBeTruthy()
+  })
+
+  it('should call proper telemetry event after click read more', () => {
+    const sendEventTelemetryMock = jest.fn();
+
+    (sendEventTelemetry as jest.Mock).mockImplementation(() => sendEventTelemetryMock)
+    render(<CreateTutorailLink />)
+
+    fireEvent.click(screen.getByTestId('read-more-link'))
+
+    expect(sendEventTelemetry).toBeCalledWith({
+      event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
+      eventData: {
+        databaseId: INSTANCE_ID_MOCK,
+      }
+    });
+    (sendEventTelemetry as jest.Mock).mockRestore()
+  })
+})

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/CreateTutorialLink.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import { ExternalLink } from 'uiSrc/components'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
+
+import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
+import styles from './styles.module.scss'
+
+const CreateTutorialLink = () => {
+  const { instanceId = '' } = useParams<{ instanceId: string }>()
+  const onClickReadMore = () => {
+    sendEventTelemetry({
+      event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
+      eventData: {
+        databaseId: instanceId || TELEMETRY_EMPTY_VALUE
+      }
+    })
+  }
+
+  return (
+    <ExternalLink
+      color="text"
+      iconSize="s"
+      className={styles.readMoreLink}
+      onClick={onClickReadMore}
+      href={EXTERNAL_LINKS.guidesRepo}
+      data-testid="read-more-link"
+    >
+      Create your tutorial
+    </ExternalLink>
+  )
+}
+
+export default CreateTutorialLink

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/index.ts

@@ -0,0 +1,3 @@
+import CreateTutorialLink from './CreateTutorialLink'
+
+export default CreateTutorialLink

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/CreateTutorialLink/styles.module.scss

@@ -0,0 +1,3 @@
+.readMoreLink {
+  font-size: 12px;
+}

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/Navigation/Navigation.tsx

@@ -113,7 +113,7 @@ const Navigation = (props: Props) => {
           >
             {isCustomTutorials && actions?.includes(EAItemActions.Create) && (
               <div className={styles.customTuturoialsForm}>
-                {children?.length === 0 && (
+                {!isCreateOpen && children?.length === 0 && (
                   <WelcomeMyTutorials handleOpenUpload={() => setIsCreateOpen(true)} />
                 )}
                 {isCreateOpen && (

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.tsx

@@ -7,6 +7,7 @@ import { isEmpty } from 'lodash'
 import { Nullable } from 'uiSrc/utils'
 import validationErrors from 'uiSrc/constants/validationErrors'
 
+import CreateTutorialLink from '../CreateTutorialLink'
 import styles from './styles.module.scss'
 
 export interface FormValues {
@@ -93,37 +94,40 @@ const UploadTutorialForm = (props: Props) => {
           />
           <EuiSpacer size="l" />
           <div className={styles.footer}>
-            <EuiButton
-              color="secondary"
-              size="s"
-              onClick={() => onCancel?.()}
-              data-testid="cancel-upload-tutorial-btn"
-            >
-              Cancel
-            </EuiButton>
-            <EuiToolTip
-              position="top"
-              anchorClassName="euiToolTip__btn-disabled"
-              title={
-                isSubmitDisabled
-                  ? validationErrors.REQUIRED_TITLE(Object.keys(errors).length)
-                  : null
-              }
-              content={getSubmitButtonContent(isSubmitDisabled)}
-            >
+            <CreateTutorialLink />
+            <div className={styles.footerButtons}>
               <EuiButton
-                className={styles.btnSubmit}
                 color="secondary"
                 size="s"
-                fill
-                onClick={() => formik.handleSubmit()}
-                iconType={isSubmitDisabled ? 'iInCircle' : undefined}
-                disabled={isSubmitDisabled}
-                data-testid="submit-upload-tutorial-btn"
+                onClick={() => onCancel?.()}
+                data-testid="cancel-upload-tutorial-btn"
               >
-                Submit
+                Cancel
               </EuiButton>
-            </EuiToolTip>
+              <EuiToolTip
+                position="top"
+                anchorClassName="euiToolTip__btn-disabled"
+                title={
+                  isSubmitDisabled
+                    ? validationErrors.REQUIRED_TITLE(Object.keys(errors).length)
+                    : null
+                }
+                content={getSubmitButtonContent(isSubmitDisabled)}
+              >
+                <EuiButton
+                  className={styles.btnSubmit}
+                  color="secondary"
+                  size="s"
+                  fill
+                  onClick={() => formik.handleSubmit()}
+                  iconType={isSubmitDisabled ? 'iInCircle' : undefined}
+                  disabled={isSubmitDisabled}
+                  data-testid="submit-upload-tutorial-btn"
+                >
+                  Submit
+                </EuiButton>
+              </EuiToolTip>
+            </div>
           </div>
         </div>
       </div>

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/styles.module.scss

@@ -95,5 +95,11 @@
 .footer {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
+
+  .footerButtons {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
 }

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.spec.tsx

@@ -1,16 +1,8 @@
 import React from 'react'
 import { render, screen, fireEvent } from 'uiSrc/utils/test-utils'
 
-import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { INSTANCE_ID_MOCK } from 'uiSrc/mocks/handlers/analytics/clusterDetailsHandlers'
-
 import WelcomeMyTutorials from './WelcomeMyTutorials'
 
-jest.mock('uiSrc/telemetry', () => ({
-  ...jest.requireActual('uiSrc/telemetry'),
-  sendEventTelemetry: jest.fn(),
-}))
-
 describe('WelcomeMyTutorials', () => {
   it('should render', () => {
     expect(render(<WelcomeMyTutorials handleOpenUpload={jest.fn()} />)).toBeTruthy()
@@ -24,21 +16,4 @@ describe('WelcomeMyTutorials', () => {
 
     expect(mockHandleOpenUpload).toBeCalled()
   })
-
-  it('should call proper telemetry event after click read more', () => {
-    const sendEventTelemetryMock = jest.fn()
-
-    sendEventTelemetry.mockImplementation(() => sendEventTelemetryMock)
-    render(<WelcomeMyTutorials handleOpenUpload={jest.fn()} />)
-
-    fireEvent.click(screen.getByTestId('read-more-link'))
-
-    expect(sendEventTelemetry).toBeCalledWith({
-      event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
-      eventData: {
-        databaseId: INSTANCE_ID_MOCK,
-      }
-    })
-    sendEventTelemetry.mockRestore()
-  })
 })

redisinsight/ui/src/components/database-side-panels/panels/enablement-area/EnablementArea/components/WelcomeMyTutorials/WelcomeMyTutorials.tsx

@@ -1,54 +1,32 @@
 import React from 'react'
 import { EuiButton, EuiPanel } from '@elastic/eui'
 
-import { useParams } from 'react-router-dom'
-import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
-import { sendEventTelemetry, TELEMETRY_EMPTY_VALUE, TelemetryEvent } from 'uiSrc/telemetry'
+import CreateTutorialLink from '../CreateTutorialLink'
 
-import { ExternalLink } from 'uiSrc/components'
 import styles from './styles.module.scss'
 
 export interface Props {
   handleOpenUpload: () => void
 }
 
-const WelcomeMyTutorials = ({ handleOpenUpload }: Props) => {
-  const { instanceId = '' } = useParams<{ instanceId: string }>()
-  const onClickReadMore = () => {
-    sendEventTelemetry({
-      event: TelemetryEvent.EXPLORE_PANEL_CREATE_TUTORIAL_LINK_CLICKED,
-      eventData: {
-        databaseId: instanceId || TELEMETRY_EMPTY_VALUE
-      }
-    })
-  }
-
-  return (
-    <div className={styles.wrapper} data-testid="welcome-my-tutorials">
-      <EuiPanel hasBorder={false} hasShadow={false} className={styles.panel} paddingSize="s">
-        <div className={styles.link}>
-          <ExternalLink
-            color="text"
-            onClick={onClickReadMore}
-            href={EXTERNAL_LINKS.guidesRepo}
-            data-testid="read-more-link"
-          >
-            Create your own tutorial
-          </ExternalLink>
-        </div>
-        <EuiButton
-          className={styles.btnSubmit}
-          color="secondary"
-          size="s"
-          fill
-          onClick={() => handleOpenUpload()}
-          data-testid="upload-tutorial-btn"
-        >
-          + Upload <span className={styles.hideText}>tutorial</span>
-        </EuiButton>
-      </EuiPanel>
-    </div>
-  )
-}
+const WelcomeMyTutorials = ({ handleOpenUpload }: Props) => (
+  <div className={styles.wrapper} data-testid="welcome-my-tutorials">
+    <EuiPanel hasBorder={false} hasShadow={false} className={styles.panel} paddingSize="s">
+      <div className={styles.link}>
+        <CreateTutorialLink />
+      </div>
+      <EuiButton
+        className={styles.btnSubmit}
+        color="secondary"
+        size="s"
+        fill
+        onClick={() => handleOpenUpload()}
+        data-testid="upload-tutorial-btn"
+      >
+        + Upload <span className={styles.hideText}>tutorial</span>
+      </EuiButton>
+    </EuiPanel>
+  </div>
+)
 
 export default WelcomeMyTutorials