Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SSHOC
sshoc-marketplace-frontend
Commits
d2bf12c1
Commit
d2bf12c1
authored
Mar 05, 2021
by
Stefan Probst
Browse files
style: add base layout for workflow step fowm
parent
951cb162
Pipeline
#178345
passed with stage
in 5 minutes and 43 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/components/item/WorkflowStepsFormSection/WorkflowStepsFormSection.tsx
View file @
d2bf12c1
import
React
from
'
react
'
import
{
WorkflowCore
}
from
'
@/api/sshoc
'
import
{
Button
}
from
'
@/elements/Button/Button
'
import
{
Icon
}
from
'
@/elements/Icon/Icon
'
import
{
Svg
as
CrossIcon
}
from
'
@/elements/icons/small/cross.svg
'
import
{
Svg
as
PlusIcon
}
from
'
@/elements/icons/small/plus.svg
'
import
{
Svg
as
TriangleIcon
}
from
'
@/elements/icons/small/triangle.svg
'
import
{
FormField
}
from
'
@/modules/form/FormField
'
import
{
FormFieldArray
}
from
'
@/modules/form/FormFieldArray
'
...
...
@@ -12,21 +17,34 @@ export interface ItemFormValues extends WorkflowCore {
*/
export
function
WorkflowStepsFormSection
():
JSX
.
Element
{
return
(
<
section
>
<
section
className
=
"flex flex-col space-y-2"
>
<
strong
className
=
"mb-6 text-error-500"
>
Editing and sorting workflow steps is not yet implemented.
</
strong
>
<
FormField
name
=
"label"
subscription
=
{
{
value
:
true
}
}
>
{
({
input
})
=>
{
return
<
h2
>
{
input
.
value
}
</
h2
>
return
(
<
div
className
=
"flex flex-col px-4 py-3 border border-gray-200 rounded bg-gray-75"
>
<
h2
className
=
"text-base font-bold text-gray-800 font-body"
>
{
input
.
value
}
</
h2
>
<
div
className
=
"flex self-end space-x-8 text-primary-750"
>
<
Button
variant
=
"link"
>
<
Icon
icon
=
{
PlusIcon
}
className
=
"w-2.5 h-2.5"
/>
<
span
>
Add a step
</
span
>
</
Button
>
<
Button
variant
=
"link"
>
Edit
</
Button
>
</
div
>
</
div
>
)
}
}
</
FormField
>
<
strong
>
Editing and sorting workflow steps is not yet implemented.
</
strong
>
<
FormFieldArray
name
=
"composedOf"
>
{
({
fields
})
=>
{
return
(
<
div
>
<
div
className
=
"flex flex-col ml-8 space-y-2"
>
{
fields
.
map
((
name
)
=>
{
return
(
<
FormField
...
...
@@ -35,7 +53,38 @@ export function WorkflowStepsFormSection(): JSX.Element {
subscription
=
{
{
value
:
true
}
}
>
{
({
input
})
=>
{
return
<
h3
>
{
input
.
value
}
</
h3
>
return
(
<
div
className
=
"flex flex-col px-4 py-3 border border-gray-200 rounded bg-gray-75"
>
<
h3
className
=
"text-base font-medium text-gray-800 font-body"
>
{
input
.
value
}
</
h3
>
<
div
className
=
"flex self-end space-x-8 text-primary-750"
>
<
Button
variant
=
"link"
>
<
Icon
icon
=
{
TriangleIcon
}
className
=
"w-2.5 h-2.5 transform rotate-180"
/>
<
span
>
Move up
</
span
>
</
Button
>
<
Button
variant
=
"link"
>
<
Icon
icon
=
{
TriangleIcon
}
className
=
"w-2.5 h-2.5"
/>
<
span
>
Move down
</
span
>
</
Button
>
<
Button
variant
=
"link"
>
<
Icon
icon
=
{
PlusIcon
}
className
=
"w-2.5 h-2.5"
/>
<
span
>
Add a substep
</
span
>
</
Button
>
<
Button
variant
=
"link"
>
<
Icon
icon
=
{
CrossIcon
}
className
=
"w-2.5 h-2.5"
/>
<
span
>
Delete
</
span
>
</
Button
>
<
Button
variant
=
"link"
>
Edit
</
Button
>
</
div
>
</
div
>
)
}
}
</
FormField
>
)
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment