Set accessor for tabs from plugins

changelogs/unreleased/2809-GuessWhoSamFoo

@@ -0,0 +1 @@
+Fix active tab not selected correctly when provided by plugins

cmd/octant-sample-plugin/main.go

@@ -185,8 +185,7 @@ func handlePrint(request *service.PrintRequest) (plugin.PrintResponse, error) {
 
 // handleNavigation creates a navigation tree for this plugin. Navigation is dynamic and will
 // be called frequently from Octant. Navigation is a tree of `Navigation` structs.
-// The plugin can use whatever paths it likes since these paths can be namespaced to the
-// the plugin.
+// The plugin can use whatever paths it likes since these paths can be namespaced to the plugin.
 func handleNavigation(request *service.NavigationRequest) (navigation.Navigation, error) {
 	return navigation.Navigation{
 		Title: "Sample Plugin",

pkg/plugin/grpc.go

@@ -333,7 +333,7 @@ func (c *GRPCClient) PrintTabs(ctx context.Context, object runtime.Object) ([]Ta
 			if !ok {
 				return errors.Errorf("expected to be flex layout was: %T", c)
 			}
-
+			layout.SetAccessor(t.Name)
 			tab.Name = t.Name
 			tab.Contents = *layout
 			responses = append(responses, TabResponse{&tab})
@@ -348,8 +348,7 @@ func (c *GRPCClient) PrintTabs(ctx context.Context, object runtime.Object) ([]Ta
 	return responses, nil
 }
 
-// GRPCServer is the grpc server the dashboard will use to communicate with the
-// the plugin.
+// GRPCServer is the grpc server the dashboard will use to communicate with the plugin.
 type GRPCServer struct {
 	Impl   Service
 	broker Broker

pkg/plugin/grpc_test.go

@@ -300,6 +300,7 @@ func Test_GRPCClient_PrintTabs(t *testing.T) {
 		require.NoError(t, err)
 
 		expectedLayout := component.NewFlexLayout("component title")
+		expectedLayout.SetAccessor("tab name")
 		expectedLayout.AddSections(
 			component.FlexLayoutSection{
 				{

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

@@ -17,7 +17,7 @@
       (click)="closeTab(tab.accessor)"
     ></clr-icon>
     <ng-template [clrIfActive]="activeTab === tab.accessor">
-      <clr-tab-content>
+      <clr-tab-content *clrIfActive>
         <app-view-container [view]="tab.view"></app-view-container>
       </clr-tab-content>
     </ng-template>