Tabs Component

changelogs/unreleased/2482-ftovaro-lenriquez

@@ -0,0 +1 @@
+Added tabs as components

pkg/view/component/base.go

@@ -10,7 +10,7 @@ const (
 	TypeAccordion = "accordion"
 	// TypeAnnotations is an annotations component.
 	TypeAnnotations = "annotations"
-	// ButtonGroup is a button group component.
+	// TypeButtonGroup is a button group component.
 	TypeButtonGroup = "buttonGroup"
 	// TypeCard is a card component.
 	TypeCard = "card"
@@ -96,6 +96,8 @@ const (
 	TypeSignpost = "signpost"
 	// TypeButton is a Button component.
 	TypeButton = "button"
+	// TypeTabsView is a Tab component.
+	TypeTabsView = "tabsView"
 )
 
 // Base is an abstract base for components..

pkg/view/component/button_group.go

@@ -57,7 +57,7 @@ func (bg *ButtonGroupConfig) UnmarshalJSON(data []byte) error {
 
 		button, ok := component.(*Button)
 		if !ok {
-			return fmt.Errorf("item was not a card")
+			return fmt.Errorf("item was not a button group")
 		}
 
 		bg.Buttons = append(bg.Buttons, *button)

pkg/view/component/tabs_view.go

@@ -0,0 +1,94 @@
+/*
+Copyright (c) 2021 the Octant contributors. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0
+*/
+
+package component
+
+import (
+	"fmt"
+
+	"github.com/vmware-tanzu/octant/internal/util/json"
+)
+
+type TabsView struct {
+	Base
+	Config TabsViewConfig `json:"config"`
+}
+
+// TabsOrientation is the direction of the Tabs
+type TabsOrientation string
+
+const (
+	// VerticalTabs are tabs organized vertically
+	VerticalTabs TabsOrientation = "vertical"
+	// HorizontalTabs are tabs organized horizontally
+	HorizontalTabs TabsOrientation = "horizontal"
+)
+
+type TabsViewConfig struct {
+	// Tabs are an array of Tab structs
+	Tabs []SingleTab `json:"tabs"`
+	// Orientation is the direction of the tabs
+	Orientation TabsOrientation `json:"orientation,omitempty"`
+}
+
+func NewTabs(orientation TabsOrientation, tabs []SingleTab) *TabsView {
+	return &TabsView{
+		Base: newBase(TypeTabsView, nil),
+		Config: TabsViewConfig{
+			Tabs:        tabs,
+			Orientation: orientation,
+		},
+	}
+}
+
+type tabsMarshal TabsView
+
+// MarshalJSON marshals a button group.
+func (t *TabsView) MarshalJSON() ([]byte, error) {
+	m := tabsMarshal(*t)
+	m.Metadata.Type = TypeTabsView
+	return json.Marshal(&m)
+}
+
+var _ Component = (*TabsView)(nil)
+
+type SingleTab struct {
+	Name     string     `json:"name"`
+	Contents FlexLayout `json:"contents"`
+}
+
+func (t *TabsViewConfig) UnmarshalJSON(data []byte) error {
+	x := struct {
+		Orientation TabsOrientation `json:"orientation,omitempty"`
+		Tabs        []struct {
+			Name     string      `json:"name"`
+			Contents TypedObject `json:"contents"`
+		} `json:"tabs"`
+	}{}
+
+	if err := json.Unmarshal(data, &x); err != nil {
+		return err
+	}
+
+	for _, tab := range x.Tabs {
+		c, err := tab.Contents.ToComponent()
+		if err != nil {
+			return err
+		}
+		fl, ok := c.(*FlexLayout)
+		if !ok {
+			return fmt.Errorf("item was not a FlexLayout")
+		}
+		st := SingleTab{
+			Name:     tab.Name,
+			Contents: *fl,
+		}
+		t.Tabs = append(t.Tabs, st)
+	}
+
+	t.Orientation = x.Orientation
+
+	return nil
+}

pkg/view/component/tabs_view_test.go

@@ -0,0 +1,74 @@
+/*
+Copyright (c) 2021 the Octant contributors. All Rights Reserved.
+SPDX-License-Identifier: Apache-2.0
+*/
+
+package component
+
+import (
+	"io/ioutil"
+	"path"
+	"testing"
+
+	"github.com/vmware-tanzu/octant/pkg/action"
+
+	"github.com/stretchr/testify/assert"
+
+	"github.com/stretchr/testify/require"
+
+	"github.com/vmware-tanzu/octant/internal/util/json"
+)
+
+func Test_Tabs_Marshal(t *testing.T) {
+	fl := NewFlexLayout("title")
+	button := NewButton("test", action.Payload{"foo": "bar"})
+	section := FlexLayoutSection{
+		{
+			Width: WidthFull,
+			View:  button,
+		},
+	}
+	fl.AddSections(section)
+
+	test := []struct {
+		name         string
+		input        Component
+		expectedPath string
+		isErr        bool
+	}{
+		{
+			name: "in general",
+			input: &TabsView{
+				Base: newBase(TypeTabsView, nil),
+				Config: TabsViewConfig{
+					Tabs: []SingleTab{
+						{
+							Name:     "title",
+							Contents: *fl,
+						},
+						{
+							Name:     "title 2",
+							Contents: *fl,
+						},
+					},
+				},
+			},
+			expectedPath: "tabs.json",
+			isErr:        false,
+		},
+	}
+
+	for _, tc := range test {
+		t.Run(tc.name, func(t *testing.T) {
+			actual, err := json.Marshal(tc.input)
+			isErr := err != nil
+			if isErr != tc.isErr {
+				t.Fatalf("UnExpected error: %v", err)
+			}
+
+			expected, err := ioutil.ReadFile(path.Join("testdata", tc.expectedPath))
+			require.NoError(t, err)
+			assert.JSONEq(t, string(expected), string(actual))
+		})
+	}
+}

pkg/view/component/testdata/config_tabs.json

@@ -0,0 +1,34 @@
+{
+  "tabs":
+  [
+    {
+      "name":"Tab 1",
+      "contents":{
+        "config":{
+          "sections":
+          [
+            [
+              {
+                "width": 24,
+                "view":{
+                  "config":{
+                    "name":"test",
+                    "payload":{
+                      "foo":"bar"
+                    }
+                  },
+                  "metadata":{
+                    "type":"button"
+                  }
+                }
+              }
+            ]
+          ]
+        },
+        "metadata":{
+          "type":"flexlayout"
+        }
+      }
+    }
+  ]
+}

pkg/view/component/testdata/tabs.json

@@ -0,0 +1,104 @@
+{
+  "metadata":{"type":"tabsView"},
+  "config":{
+    "tabs":
+    [
+      {
+        "name":"title",
+        "contents":{
+          "config":{
+            "buttonGroup":{
+              "config":{
+                "buttons":null
+              },
+              "metadata":{
+                "type":"buttonGroup"
+              }
+            },
+            "sections":
+            [
+              [
+                {
+                  "width": 24,
+                  "view":{
+                    "config":{
+                      "name":"test",
+                      "payload":{
+                        "foo":"bar"
+                      }
+                    },
+                    "metadata":{
+                      "type":"button"
+                    }
+                  }
+                }
+              ]
+            ]
+          },
+          "metadata":{
+            "title":
+            [
+              {
+                "config":{
+                  "value":"title"
+                },
+                "metadata":{
+                  "type":"text"
+                }
+              }
+            ],
+            "type":"flexlayout"
+          }
+        }
+      },
+      {
+        "name":"title 2",
+        "contents":{
+          "config":{
+            "buttonGroup":{
+              "config":{
+                "buttons":null
+              },
+              "metadata":{
+                "type":"buttonGroup"
+              }
+            },
+            "sections":
+            [
+              [
+                {
+                  "width": 24,
+                  "view":{
+                    "config":{
+                      "name":"test",
+                      "payload":{
+                        "foo":"bar"
+                      }
+                    },
+                    "metadata":{
+                      "type":"button"
+                    }
+                  }
+                }
+              ]
+            ]
+          },
+          "metadata":{
+            "title":
+            [
+              {
+                "config":{
+                  "value":"title"
+                },
+                "metadata":{
+                  "type":"text"
+                }
+              }
+            ],
+            "type":"flexlayout"
+          }
+        }
+      }
+    ]
+  }
+}

pkg/view/component/unmarshal.go

@@ -211,6 +211,11 @@ func unmarshal(to TypedObject) (Component, error) {
 		err = errors.Wrapf(json.Unmarshal(to.Config, &t.Config),
 			"unmarshal signpost config")
 		o = t
+	case TypeTabsView:
+		t := &TabsView{Base: Base{Metadata: to.Metadata}}
+		err = errors.Wrapf(json.Unmarshal(to.Config, &t.Config),
+			"unmarshal tabs config")
+		o = t
 	default:
 		return nil, errors.Errorf("unknown view component %q", to.Metadata.Type)
 	}

pkg/view/component/unmarshal_test.go

@@ -503,6 +503,29 @@ func Test_unmarshal(t *testing.T) {
 				Base: newBase(TypeStepper, nil),
 			},
 		},
+		{
+			name:       "tabsView",
+			configFile: "config_tabs.json",
+			objectType: "tabsView",
+			expected: &TabsView{
+				Config: TabsViewConfig{
+					Tabs: []SingleTab{{
+						Name: "Tab 1",
+						Contents: FlexLayout{
+							Base: newBase(TypeFlexLayout, nil),
+							Config: FlexLayoutConfig{
+								Sections: []FlexLayoutSection{{{
+									Width: WidthFull,
+									View:  NewButton("test", action.Payload{"foo": "bar"}),
+								}}},
+								ButtonGroup: nil,
+							},
+						},
+					}},
+				},
+				Base: newBase(TypeTabsView, nil),
+			},
+		},
 		{
 			name:       "summary",
 			configFile: "config_summary.json",

web/src/app/modules/shared/components/presentation/tabs-view/tabs-view.component.html

@@ -0,0 +1,14 @@
+<clr-tabs *ngIf="tabs.length > 0" clrLayout="{{ orientation }}">
+    <clr-tab *ngFor="let tab of tabs; trackBy: identifyTab">
+      <button clrTabLink class="tab-button" (click)="clickTab(tab.name)">
+        {{ tab.name }}
+      </button>
+      <ng-template [clrIfActive]="activeTab === tab.name">
+        <clr-tab-content>
+          <div [ngClass]="{'tabs-container': orientation === 'horizontal'}">
+          <app-view-container [view]="tab.contents"></app-view-container>
+          </div>
+        </clr-tab-content>
+      </ng-template>
+    </clr-tab>
+</clr-tabs>