Add property CustomSvg to icons and navigation

Signed-off-by: ftovaro <f.tovar12@gmail.com>
vmware-archive · Aug 23, 2021 · 3701e53 · 3701e53
1 parent 5163d0f
commit 3701e53
Show file tree

Hide file tree

Showing 17 changed files with 224 additions and 11 deletions.
diff --git a/changelogs/unreleased/1422-ftovaro b/changelogs/unreleased/1422-ftovaro
@@ -0,0 +1 @@
+Added support of SVGs for Icons and Navigation
diff --git a/cmd/octant-sample-plugin/main.go b/cmd/octant-sample-plugin/main.go
@@ -205,7 +205,7 @@ func handleNavigation(request *service.NavigationRequest) (navigation.Navigation
 				},
 			},
 		},
-		IconName: "cloud",
+		IconName: "test-custom-svg",
 	}, nil
 }
 

diff --git a/pkg/navigation/navigation.go b/pkg/navigation/navigation.go
@@ -59,6 +59,7 @@ type Navigation struct {
 	Children    []Navigation `json:"children,omitempty"`
 	IconName    string       `json:"iconName,omitempty"`
 	Loading     bool         `json:"isLoading"`
+	CustomSvg   string       `json:"customSvg,omitempty"`
 }
 
 // New creates a Navigation.
@@ -215,6 +216,7 @@ type navConfig struct {
 	suffix    string
 	iconName  string
 	isLoading bool
+	customSvg string
 }
 
 // EntriesHelper generates navigation entries.
@@ -229,14 +231,28 @@ func (neh *EntriesHelper) Add(title, suffix string, isLoading bool) {
 	})
 }
 
+// SetCustomSvg sets the icon for the navigation entry.
+func SetCustomSvg(customSvg string) Option {
+	return func(n *Navigation) error {
+		if customSvg == "" {
+			return nil
+		}
+
+		n.CustomSvg = customSvg
+
+		return nil
+	}
+}
+
 // Generate generates navigation entries.
 func (neh *EntriesHelper) Generate(prefix, namespace, name string) ([]Navigation, error) {
 	var navigations []Navigation
 
 	for _, nc := range neh.navConfigs {
 		navigation, err := New(nc.title, path.Join(prefix, nc.suffix),
 			SetNavigationIcon(nc.iconName),
-			SetLoading(nc.isLoading))
+			SetLoading(nc.isLoading),
+			SetCustomSvg(nc.customSvg))
 		if err != nil {
 			return nil, err
 		}

diff --git a/pkg/plugin/conversion.go b/pkg/plugin/conversion.go
@@ -89,9 +89,10 @@ func convertToNavigation(in *dashboard.NavigationResponse_Navigation) navigation
 	}
 
 	out := navigation.Navigation{
-		Title:    in.Title,
-		Path:     in.Path,
-		IconName: in.IconName,
+		Title:     in.Title,
+		Path:      in.Path,
+		IconName:  in.IconName,
+		CustomSvg: in.CustomSvg,
 	}
 
 	for _, child := range in.Children {
@@ -104,9 +105,10 @@ func convertToNavigation(in *dashboard.NavigationResponse_Navigation) navigation
 
 func convertFromNavigation(in navigation.Navigation) *dashboard.NavigationResponse_Navigation {
 	out := dashboard.NavigationResponse_Navigation{
-		Title:    in.Title,
-		Path:     in.Path,
-		IconName: in.IconName,
+		Title:     in.Title,
+		Path:      in.Path,
+		IconName:  in.IconName,
+		CustomSvg: in.CustomSvg,
 	}
 
 	for _, child := range in.Children {

diff --git a/pkg/plugin/dashboard/dashboard.pb.go b/pkg/plugin/dashboard/dashboard.pb.go
diff --git a/pkg/view/component/icon.go b/pkg/view/component/icon.go
@@ -22,6 +22,7 @@ type IconConfig struct {
 	BadgeColor string         `json:"badgeColor"`
 	Label      string         `json:"label"`
 	Tooltip    *TooltipConfig `json:"tooltip,omitempty"`
+	CustomSvg  string         `json:"customSvg"`
 }
 
 type Direction string
@@ -146,3 +147,8 @@ func (i *Icon) SetBadgeColor(color string) {
 func (i *Icon) SetSize(size string) {
 	i.Config.Size = size
 }
+
+// SetCustomSvg sets an SVG for an Icon.
+func (i *Icon) SetCustomSvg(customSvg string) {
+	i.Config.CustomSvg = customSvg
+}
diff --git a/pkg/view/component/icon_test.go b/pkg/view/component/icon_test.go
@@ -56,6 +56,51 @@ func Test_Icon_Marshal(t *testing.T) {
 	}
 }
 
+func Test_Icon_With_SVG(t *testing.T) {
+	test := []struct {
+		name         string
+		input        *Icon
+		expectedPath string
+		isErr        bool
+	}{
+		{
+			name: "in general with svg",
+			input: &Icon{
+				Base: newBase(TypeIcon, nil),
+				Config: IconConfig{
+					Shape:      "user",
+					Size:       "16",
+					Direction:  DirectionDown,
+					Flip:       FlipHorizontal,
+					Solid:      true,
+					Status:     StatusDanger,
+					Inverse:    false,
+					Badge:      BadgeDanger,
+					Color:      "#add8e6",
+					BadgeColor: "purple",
+					Label:      "example icon",
+					CustomSvg:  "<svg width=\"9px\" height=\"9px\" viewBox=\"0 0 9 9\"><g stroke-width=\"1\"><g transform=\"translate(-496.000000, -443.000000)\" stroke=\"#111111\"></g></g></svg>",
+				},
+			},
+			expectedPath: "icon_with_svg.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))
+		})
+	}
+}
+
 func Test_Icon_Options(t *testing.T) {
 	test := []struct {
 		name     string

diff --git a/pkg/view/component/testdata/icon.json b/pkg/view/component/testdata/icon.json
@@ -13,6 +13,7 @@
     "badge": "danger",
     "color": "#add8e6",
     "badgeColor": "purple",
-    "label": "example icon"
+    "label": "example icon",
+    "customSvg": ""
   }
 }
diff --git a/pkg/view/component/testdata/icon_with_svg.json b/pkg/view/component/testdata/icon_with_svg.json
@@ -0,0 +1,19 @@
+{
+  "metadata": {
+    "type": "icon"
+  },
+  "config": {
+    "shape": "user",
+    "size": "16",
+    "direction": "down",
+    "flip": "horizontal",
+    "solid": true,
+    "status": "danger",
+    "inverse": false,
+    "badge": "danger",
+    "color": "#add8e6",
+    "badgeColor": "purple",
+    "label": "example icon",
+    "customSvg": "<svg width=\"9px\" height=\"9px\" viewBox=\"0 0 9 9\"><g stroke-width=\"1\"><g transform=\"translate(-496.000000, -443.000000)\" stroke=\"#111111\"></g></g></svg>"
+  }
+}
diff --git a/pkg/view/component/testdata/signpost.json b/pkg/view/component/testdata/signpost.json
@@ -18,7 +18,8 @@
         "badge": "",
         "color": "",
         "badgeColor": "",
-        "label": ""
+        "label": "",
+        "customSvg": ""
       }
     },
     "message": "Message",

diff --git a/web/src/app/modules/shared/components/presentation/icon/icon.component.ts b/web/src/app/modules/shared/components/presentation/icon/icon.component.ts
@@ -14,6 +14,7 @@ import {
   loadTextEditIconSet,
   loadTechnologyIconSet,
   loadChartIconSet,
+  ClarityIcons,
 } from '@cds/core/icon';
 import { IconView, Tooltip } from '../../../models/content';
 
@@ -58,6 +59,10 @@ export class IconComponent extends AbstractViewComponent<IconView> {
       this.generateTooltipClassStyles();
     }
 
+    if (view.config.customSvg) {
+      ClarityIcons.addIcons([view.config.shape, view.config.customSvg]);
+    }
+
     this.shape = view.config.shape;
     this.flip = view.config.flip;
     this.size = view.config.size;

diff --git a/web/src/app/modules/shared/models/content.ts b/web/src/app/modules/shared/models/content.ts
@@ -624,6 +624,7 @@ export interface IconView extends View {
     badgeColor?: string;
     label?: string;
     tooltip?: Tooltip;
+    customSvg?: string;
   };
 }
 

diff --git a/web/src/app/modules/shared/services/navigation/navigation.service.ts b/web/src/app/modules/shared/services/navigation/navigation.service.ts
@@ -11,6 +11,7 @@ import { ContentService } from '../content/content.service';
 import { NavigationEnd, Router, RouterEvent } from '@angular/router';
 import { filter } from 'rxjs/operators';
 import { LoadingService } from '../loading/loading.service';
+import { ClarityIcons } from '@cds/core/icon';
 
 export type Selection = {
   module: number;
@@ -26,6 +27,7 @@ export type Module = {
   endIndex?: number;
   icon: string;
   children?: any[];
+  customSvg?: string;
 };
 
 const emptyNavigation: Navigation = {
@@ -166,7 +168,11 @@ export class NavigationService {
           description: section.description,
           path: section.path,
           title: section.title,
+          customSvg: section.customSvg,
         });
+        if (section.customSvg) {
+          ClarityIcons.addIcons([section.iconName, section.customSvg]);
+        }
       }
     });
 
@@ -186,7 +192,11 @@ export class NavigationService {
             path: module.path,
             icon: module.icon,
             title: module.title,
+            customSvg: module.customSvg,
           };
+          if (module.customSvg) {
+            ClarityIcons.addIcons([module.icon, module.customSvg]);
+          }
           module.children = [
             ...[first],
             ...sections[module.startIndex].children,

diff --git a/web/src/app/modules/sugarloaf/components/smart/navigation/navigation.component.html b/web/src/app/modules/sugarloaf/components/smart/navigation/navigation.component.html
@@ -23,7 +23,14 @@
             'button-tool-labels': showLabels
           }">
             <div *ngIf="showLabels" class="button-wrapper">
-              <clr-icon class="icon-nav" [attr.shape]="tab.icon"></clr-icon>
+              <div *ngIf="tab.customSvg; else regularIcon">
+                <cds-icon class="icon-nav" [attr.shape]="tab.icon"></cds-icon>
+              </div>
+              <ng-template #regularIcon>
+                <div>
+                  <clr-icon class="icon-nav" [attr.shape]="tab.icon"></clr-icon>
+                </div>
+              </ng-template>
               <div class="button-text-wrapper">
                 <div class="button-text">{{tab.title}}</div>
               </div>

diff --git a/web/src/app/modules/sugarloaf/models/navigation.ts b/web/src/app/modules/sugarloaf/models/navigation.ts
@@ -8,6 +8,7 @@ export interface NavigationChild {
   children?: NavigationChild[];
   iconName?: string;
   isLoading: boolean;
+  customSvg?: string;
 }
 
 export interface Navigation {

diff --git a/web/src/stories/docs/plugins/GoPluginsIntro.story.mdx b/web/src/stories/docs/plugins/GoPluginsIntro.story.mdx
@@ -327,3 +327,45 @@ func handlePrint(request *service.PrintRequest) (plugin.PrintResponse, error) {
   ctx = metadata.AppendToOutgoingContext(request.Context(), "x-octant-foo", "bar")
   u, err := request.DashboardClient.Get(ctx, key)
 ```
+
+## Custom Icon
+
+### Custom Icon for plugins
+
+Is possible to add a custom SVG for plugins.
+
+First to do is define you SVG:
+
+```go
+svg := "<svg width=\"10px\" height=\"10px\">" +
+  "<g>" +
+    "<ellipse fill=\"#000000\" stroke=\"#000000\" cx=\"5\" cy=\"5.5\" rx=\"3\" ry=\"3\"/>" +
+  "</g>" +
+"</svg>"
+```
+
+Then, where you are defining your navigation, add the SVG and set a custom name for it:
+
+```go
+navigation.Navigation{
+		Title: "Sample Plugin",
+		Path:  request.GeneratePath(),
+		Children: []navigation.Navigation{
+			{
+				Title:    "Nested Once",
+				Path:     request.GeneratePath("nested-once"),
+				IconName: "folder",
+				Children: []navigation.Navigation{
+					{
+						Title:    "Nested Twice",
+						Path:     request.GeneratePath("nested-once", "nested-twice"),
+						IconName: "folder",
+					},
+				},
+			},
+		},
+		IconName:  "test-custom-svg",
+		CustomSvg: svg,
+	}, nil
+```
+
-Original file line number
+Diff line change
@@ Expand Up @@
     				},
     			},
     		},
-    		IconName: "cloud",
+    		IconName: "test-custom-svg",
     	}, nil
     }
@@ Expand Down @@