RI-7767: custom tutorials form alignment

.ai/rules/branches.md

@@ -29,18 +29,20 @@ ric/RI-666/custom-prefix
 
 ## Allowed Branch Types (GitHub Actions Enforced)
 
-- `feature/` - New features and refactoring
-- `bugfix/` - Bug fixes
-- `fe/feature/` - Frontend-only features
-- `fe/bugfix/` - Frontend-only bug fixes
-- `be/feature/` - Backend-only features
-- `be/bugfix/` - Backend-only bug fixes
+- `feature/` - New features and refactoring (affects multiple areas)
+- `bugfix/` - Bug fixes (affects multiple areas)
+- `fe/feature/` - Frontend-only features (only `redisinsight/ui/` folder)
+- `fe/bugfix/` - Frontend-only bug fixes (only `redisinsight/ui/` folder)
+- `be/feature/` - Backend-only features (only `redisinsight/api/` folder)
+- `be/bugfix/` - Backend-only bug fixes (only `redisinsight/api/` folder)
 - `docs/` - Documentation changes
 - `test/` - Test-related changes
 - `e2e/` - End-to-end test changes
 - `release/` - Release branches
 - `ric/` - Custom prefix for special cases
 
+**Note:** When a bug fix affects only the `redisinsight/ui/` folder, use `fe/bugfix/` prefix instead of `bugfix/`.
+
 ## Issue References
 
 - **Internal**: `RI-XXX` (JIRA ticket)

.ai/rules/frontend.md

@@ -66,30 +66,33 @@ ComponentName/
 
 Keep all component styles in dedicated .style.ts files and import them with a namespace.
 
+**CRITICAL: `import * as S` is reserved for local styles only** (e.g., from `ComponentName.styles.ts`). When you need to use styled components from external components, create a local styles file that re-exports them.
+
 #### ✅ Good
 
 ```typescript
-import * as S from './Component.styles'
+// ComponentName.tsx
+import * as S from './ComponentName.styles'
 
 return (
   <S.Container>
     <S.Title>Title</S.Title>
     <S.Content>Content</S.Content>
   </S.Container>
 )
+
+// ComponentName.styles.ts (when re-exporting from external component)
+export { ExternalStyledComponent } from '../ExternalComponent/ExternalComponent.styles'
 ```
 
 #### ❌ Bad
 
 ```typescript
-import { Container, Title, Content } from './Component.styles'
+// ❌ BAD: Importing styled components directly from external component
+import * as S from '../ExternalComponent/ExternalComponent.styles'
 
-return (
-  <Container>
-    <Title>Title</Title>
-    <Content>Content</Content>
-  </Container>
-)
+// ❌ BAD: Named imports instead of namespace
+import { Container, Title, Content } from './Component.styles'
 ```
 
 ### Use Layout Components Instead of div

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

@@ -192,7 +192,7 @@ describe('EnablementArea', () => {
       expect(screen.getByTestId('upload-tutorial-form')).toBeInTheDocument()
     })
 
-    it('should render open form with tutorials', () => {
+    it('should render form directly when no tutorials', () => {
       const customTutorials = [
         { ...MOCK_CUSTOM_TUTORIALS_ITEMS[0], children: [] },
       ]
@@ -202,9 +202,6 @@ describe('EnablementArea', () => {
           customTutorials={customTutorials}
         />,
       )
-      expect(screen.getByTestId('welcome-my-tutorials')).toBeInTheDocument()
-
-      fireEvent.click(screen.getByTestId('upload-tutorial-btn'))
       expect(screen.getByTestId('upload-tutorial-form')).toBeInTheDocument()
     })
 
@@ -254,17 +251,6 @@ describe('EnablementArea', () => {
       )
     })
 
-    it('should not render welcome screen if at least one tutorial uploaded', () => {
-      render(
-        <EnablementArea
-          {...instance(mockedProps)}
-          customTutorials={MOCK_CUSTOM_TUTORIALS_ITEMS}
-        />,
-      )
-      expect(
-        screen.queryByTestId('welcome-my-tutorials'),
-      ).not.toBeInTheDocument()
-    })
   })
 
   describe('Telemetry', () => {

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/DeleteTutorialButton/DeleteTutorialButton.styles.ts

@@ -0,0 +1,2 @@
+export { GroupHeaderButton } from '../Group/Group.styles'
+

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

@@ -7,6 +7,8 @@ import { DeleteIcon } from 'uiSrc/components/base/icons'
 import { Text } from 'uiSrc/components/base/text'
 import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import { RiPopover } from 'uiSrc/components/base'
+
+import * as S from './DeleteTutorialButton.styles'
 import styles from './styles.module.scss'
 
 export interface Props {
@@ -32,14 +34,13 @@ const DeleteTutorialButton = (props: Props) => {
       closePopover={() => setIsPopoverDeleteOpen(false)}
       panelPaddingSize="l"
       button={
-        <div
-          className="group-header__btn group-header__delete-btn"
+        <S.GroupHeaderButton
           role="presentation"
           onClick={handleClickDelete}
           data-testid={`delete-tutorial-icon-${id}`}
         >
           <RiIcon size="m" type="DeleteIcon" />
-        </div>
+        </S.GroupHeaderButton>
       }
       onClick={(e) => e.stopPropagation()}
       data-testid={`delete-tutorial-popover-${id}`}

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/Group.styles.ts

@@ -0,0 +1,23 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
+
+export const GroupHeaderButton = styled.div<
+  React.HTMLAttributes<HTMLDivElement>
+>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 24px;
+  height: 24px;
+  border-radius: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
+  cursor: pointer;
+
+  &:hover {
+    color: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.text.neutral100};
+    background-color: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.background.neutral200};
+  }
+`

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

@@ -20,6 +20,7 @@ import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 
 import DeleteTutorialButton from '../DeleteTutorialButton'
 
+import * as S from './Group.styles'
 import './styles.scss'
 
 export interface Props {
@@ -36,6 +37,7 @@ export interface Props {
   isPageOpened?: boolean
   isShowActions?: boolean
   isShowFolder?: boolean
+  hasChildren?: boolean
 }
 
 const Group = (props: Props) => {
@@ -53,6 +55,7 @@ const Group = (props: Props) => {
     onDelete,
     isPageOpened,
     isShowFolder,
+    hasChildren = true,
   } = props
   const { deleting: deletingCustomTutorials } = useSelector(
     workbenchCustomTutorialsSelector,
@@ -87,6 +90,7 @@ const Group = (props: Props) => {
   const actionsContent = (
     <>
       {actions?.includes(EAItemActions.Create) &&
+        hasChildren &&
         (isGroupOpen || forceState === 'open') && (
           <OnboardingTour
             options={ONBOARDING_FEATURES.EXPLORE_CUSTOM_TUTORIALS}
@@ -95,15 +99,14 @@ const Group = (props: Props) => {
             panelClassName={cx({ hide: isPageOpened })}
             preventPropagation
           >
-            <RiTooltip content="Upload Tutorial">
-              <div
-                className="group-header__btn group-header__create-btn"
+            <RiTooltip content="Upload tutorial">
+              <S.GroupHeaderButton
                 role="presentation"
                 onClick={handleCreate}
                 data-testid="open-upload-tutorial-btn"
               >
-                <RiIcon type="PlusSlimIcon" />
-              </div>
+                <RiIcon type="PlusSlimIcon" size="m" />
+              </S.GroupHeaderButton>
             </RiTooltip>
           </OnboardingTour>
         )}

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/Group/styles.scss

@@ -25,37 +25,6 @@
       white-space: nowrap;
       text-overflow: ellipsis;
 
-      &__btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        width: 24px;
-        height: 24px;
-        border-radius: 4px;
-        cursor: pointer;
-
-        &:hover {
-          color: var(--euiColorPrimaryText);
-          background-color: var(--euiColorSecondary);
-        }
-      }
-
-      &__delete-btn {
-        svg {
-          width: 14px;
-          height: 14px;
-        }
-
-        &:hover {
-          color: var(--euiColorPrimaryText);
-          background-color: var(--euiColorSecondary);
-        }
-      }
-
-      .euiIcon {
-        margin-right: 4px;
-      }
     }
 
     .divider {

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

@@ -39,7 +39,6 @@ import InternalLink from '../InternalLink'
 import PlainText from '../PlainText'
 import { Col } from 'uiSrc/components/base/layout/flex'
 import UploadTutorialForm from '../UploadTutorialForm'
-import WelcomeMyTutorials from '../WelcomeMyTutorials'
 
 import styles from './styles.module.scss'
 
@@ -157,6 +156,7 @@ const Navigation = (props: Props) => {
     const currentManifestPath = `${manifestPath}/${key}`
 
     const isCustomTutorials = id === CUSTOM_TUTORIALS_ID && level === 0
+    const hasChildren = (children?.length ?? 0) > 0
 
     switch (type) {
       case EnablementAreaComponent.Group:
@@ -172,31 +172,29 @@ const Navigation = (props: Props) => {
             onCreate={() => setIsCreateOpen((v) => !v)}
             onDelete={onDeleteCustomTutorial}
             isPageOpened={isInternalPageVisible}
+            hasChildren={hasChildren}
             forceState={
               isCustomTutorials && isCustomTutorialsOnboarding
                 ? 'open'
                 : undefined
             }
             {...args}
           >
-            {isCustomTutorials && actions?.includes(EAItemActions.Create) && (
-              <div>
-                {!isCreateOpen && children?.length === 0 && (
-                  <Col gap="l">
-                    <WelcomeMyTutorials
-                      handleOpenUpload={() => setIsCreateOpen(true)}
-                    />
-                    <UploadWarning />
-                  </Col>
-                )}
-                {isCreateOpen && (
+            {isCustomTutorials &&
+              actions?.includes(EAItemActions.Create) &&
+              (children?.length === 0 ? (
+                <Col gap="l">
+                  <UploadTutorialForm onSubmit={submitCreate} />
+                  <UploadWarning />
+                </Col>
+              ) : (
+                isCreateOpen && (
                   <UploadTutorialForm
                     onSubmit={submitCreate}
                     onCancel={() => setIsCreateOpen(false)}
                   />
-                )}
-              </div>
-            )}
+                )
+              ))}
             {renderTreeView(
               children ? getManifestItems(children) : [],
               {

redisinsight/ui/src/components/side-panels/panels/enablement-area/EnablementArea/components/UploadTutorialForm/UploadTutorialForm.styles.ts

@@ -0,0 +1,11 @@
+import React from 'react'
+import styled from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
+
+export const Wrapper = styled.div<React.HTMLAttributes<HTMLDivElement>>`
+  border: 1px solid
+    ${({ theme }: { theme: Theme }) => theme.semantic.color.border.neutral600};
+  border-radius: ${({ theme }: { theme: Theme }) =>
+    theme.components.card.borderRadius};
+  padding: ${({ theme }: { theme: Theme }) => theme.core.space.space200};
+`