chore(web): refactor step editor sidebar #4408
Conversation
NV-2715 🔀 Create the Editor Sidebar
What?Create the Editor Sidebar to be a reusable component. Update its UI according to the designs. Why? (Context)We would like to reuse the same Editor Sidebar for all the channels Editors and Variant Editors. The only difference between Editor and Variant Editor is that it has an additional variant line under the name. Definition of Done
Screenshot 2023-08-30 at 09.25.09.png |
| @@ -78,6 +93,8 @@ export const Sidebar = ({ | |||
| isOpened, | |||
| isExpanded = false, | |||
| isLoading = false, | |||
| isParentScrollable = false, | |||
There was a problem hiding this comment.
allow to decide whether the whole sidebar is scrollable or only the body
| <HeaderHolder> | ||
| {isExpanded && onBack && ( | ||
| <ActionIcon variant="transparent" onClick={onBack} data-test-id="sidebar-back"> | ||
| <ActionIcon onClick={onBack} data-test-id="sidebar-back"> |
There was a problem hiding this comment.
the actions should have the background on hover
| paddingBottom: 24, | ||
| }} | ||
| > | ||
| <StepEditorSidebar> |
There was a problem hiding this comment.
use the StepEditorSidebar for all editors
| {channel === StepTypeEnum.SMS && ( | ||
| <> | ||
| <TemplateSMSEditor key={key} /> | ||
| <TranslateProductLead id="translate-sms-editor" /> |
There was a problem hiding this comment.
moved the TranslateProductLead inside the editor
| display: 'flex', | ||
| flexDirection: 'column-reverse', | ||
| gap: 4, | ||
| flex: '1 1 auto', | ||
| marginRight: 16, | ||
| width: '100%', |
There was a problem hiding this comment.
reverse the order of "step name" and the "step label" - for example:
Email
Variant 1
| import { Text, colors } from '../../../design-system'; | ||
| import { useStepIndex } from '../hooks/useStepIndex'; | ||
|
|
||
| export const StepNameLabel = ({ variantsCount = 0 }: { variantsCount?: number }) => { |
There was a problem hiding this comment.
this is the smart label component that depending on the context renders the label:
- if root step - render nothing
- if variant - render
Variant {n} - if variants list - render
{n} variants
LetItRock
force-pushed
the
nv-2715-refactor-editor-sidebar
branch
from
2ddc12b to
95aa843
Compare
ainouzgali
merged commit 086b38a
into
variants-refactor-form-path
What change does this PR introduce?
Refactor the step editor sidebar to be a reusable component for all different steps, and reuse it in all the editors.
Refactor the workflow settings/snippet sidebar.
Implemented a separate
VariantsListSidebarcomponent for variants list.Why was this change needed?
Other information (Screenshots)