From f53928f6233a826ef983302cce8faa1b30a2624a Mon Sep 17 00:00:00 2001 From: Sam Foo Date: Tue, 9 Mar 2021 17:42:53 -0800 Subject: [PATCH] Add action to timeline step Signed-off-by: Sam Foo --- changelogs/unreleased/2130-GuessWhoSamFoo | 1 + pkg/view/component/timeline.go | 34 ++++++++++++++++++- pkg/view/component/timeline_test.go | 6 ++-- .../timeline/timeline.component.html | 8 ++++- .../timeline/timeline.component.scss | 3 ++ web/src/app/modules/shared/models/content.ts | 1 + web/src/stories/button.group.stories.mdx | 2 +- web/src/stories/timeline.stories.mdx | 23 +++++++++++-- 8 files changed, 70 insertions(+), 8 deletions(-) create mode 100644 changelogs/unreleased/2130-GuessWhoSamFoo diff --git a/changelogs/unreleased/2130-GuessWhoSamFoo b/changelogs/unreleased/2130-GuessWhoSamFoo new file mode 100644 index 0000000000..98797d8fd1 --- /dev/null +++ b/changelogs/unreleased/2130-GuessWhoSamFoo @@ -0,0 +1 @@ +Added timeline component diff --git a/pkg/view/component/timeline.go b/pkg/view/component/timeline.go index b917ef3a87..50d4fb7ef5 100644 --- a/pkg/view/component/timeline.go +++ b/pkg/view/component/timeline.go @@ -6,8 +6,9 @@ SPDX-License-Identifier: Apache-2.0 package component import ( - "encoding/json" "sync" + + "github.com/pkg/errors" ) // Timeline is a component for timeline @@ -31,6 +32,37 @@ type TimelineStep struct { Header string `json:"header"` Title string `json:"title"` Description string `json:"description"` + ButtonGroup *ButtonGroup `json:"buttonGroup,omitempty"` +} + +func (t *TimelineStep) UnmarshalJSON(data []byte) error { + x := struct { + State TimelineState `json:"state"` + Header string `json:"header"` + Title string `json:"title"` + Description string `json:"description"` + ButtonGroup *TypedObject `json:"buttonGroup,omitempty"` + }{} + if err := json.Unmarshal(data, &x); err != nil { + return err + } + if x.ButtonGroup != nil { + component, err := x.ButtonGroup.ToComponent() + if err != nil { + return err + } + buttonGroup, ok := component.(*ButtonGroup) + if !ok { + return errors.New("item was not a buttonGroup") + } + t.ButtonGroup = buttonGroup + } + t.State = x.State + t.Title = x.Title + t.Header = x.Header + t.Description = x.Description + + return nil } // TimelineState is the state of a timeline step diff --git a/pkg/view/component/timeline_test.go b/pkg/view/component/timeline_test.go index 993ac951d2..fe0bc613bc 100644 --- a/pkg/view/component/timeline_test.go +++ b/pkg/view/component/timeline_test.go @@ -6,12 +6,12 @@ SPDX-License-Identifier: Apache-2.0 package component import ( - "encoding/json" - "github.com/stretchr/testify/assert" - "github.com/stretchr/testify/require" "io/ioutil" "path" "testing" + + "github.com/stretchr/testify/assert" + "github.com/stretchr/testify/require" ) func Test_Timeline_Marshal(t *testing.T) { diff --git a/web/src/app/modules/shared/components/presentation/timeline/timeline.component.html b/web/src/app/modules/shared/components/presentation/timeline/timeline.component.html index 2e7a81611f..0e18b70e14 100644 --- a/web/src/app/modules/shared/components/presentation/timeline/timeline.component.html +++ b/web/src/app/modules/shared/components/presentation/timeline/timeline.component.html @@ -3,7 +3,13 @@ {{ step.header }} {{ step.title }} - {{ step.description }} + + {{ step.description }} + +
+ + + diff --git a/web/src/app/modules/shared/components/presentation/timeline/timeline.component.scss b/web/src/app/modules/shared/components/presentation/timeline/timeline.component.scss index e69de29bb2..fe0bd1e703 100644 --- a/web/src/app/modules/shared/components/presentation/timeline/timeline.component.scss +++ b/web/src/app/modules/shared/components/presentation/timeline/timeline.component.scss @@ -0,0 +1,3 @@ +::ng-deep .btn-group .btn { + margin-top: 0.3rem; +} diff --git a/web/src/app/modules/shared/models/content.ts b/web/src/app/modules/shared/models/content.ts index a33fd639da..ede310f184 100644 --- a/web/src/app/modules/shared/models/content.ts +++ b/web/src/app/modules/shared/models/content.ts @@ -378,6 +378,7 @@ export interface TimelineStep { header: string; title: string; description: string; + buttonGroup?: ButtonGroupView; } export interface TimestampView extends View { diff --git a/web/src/stories/button.group.stories.mdx b/web/src/stories/button.group.stories.mdx index 659ee254f0..b5dd37c35a 100644 --- a/web/src/stories/button.group.stories.mdx +++ b/web/src/stories/button.group.stories.mdx @@ -16,7 +16,7 @@ buttonGroup.AddButton(

Description

A Button Group component can have buttons added imperatively using the AddButton method.

-

The Button component supports a comfirmation method with a Markdown compatible message that appears in a modal. +

The Button component supports a confirmation method with a Markdown compatible message that appears in a modal. Buttons requiring confirmation are red.

Example

diff --git a/web/src/stories/timeline.stories.mdx b/web/src/stories/timeline.stories.mdx index 54ab502b58..82336f209a 100644 --- a/web/src/stories/timeline.stories.mdx +++ b/web/src/stories/timeline.stories.mdx @@ -10,7 +10,7 @@ export const timelineDocs= {source: {code: `steps := []component.TimelineStep{ Description: "Title description", }, } -timeline := component.NewTimeline("title", steps, true) +timeline := component.NewTimeline(steps, true) timeline.Add(component.TimelineStep{ State: component.TimelineStepCurrent, Header: "current test", @@ -23,6 +23,24 @@ timeline.Add(component.TimelineStep{ Description: "loading description", })`}} +export const buttonGroupView = { + config: { + buttons: [ + { + name: 'Testing', + payload: {}, + confirmation: { + title: 'Confirm action', + body: 'Are you sure?', + }, + }, + ], + }, + metadata: { + type: 'buttonGroup' + } +} +

Timeline Component

Description

@@ -46,7 +64,8 @@ timeline.Add(component.TimelineStep{ state: "current", header: "current header", title: 'Step 1', - description: 'this is a current step' + description: 'this is a current step', + buttonGroup: buttonGroupView, }, { state: "processing",