feat: Move actions filter to toolbar (#38231)

Author: cpAdm

packages/trace-viewer/src/ui/workbench.css

@@ -39,15 +39,6 @@
   color: var(--vscode-editorCodeLens-foreground);
 }
 
-.workbench-actions-status-bar {
-  padding: 2px;
-  flex: none;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: 1px solid var(--vscode-panel-border);
-}
-
 .workbench-actions-hidden-count {
   padding-right: 4px;
   user-select: none;

packages/trace-viewer/src/ui/workbench.tsx

@@ -335,10 +335,6 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
         revealConsole={() => selectPropertiesTab('console')}
         isLive={isLive}
       />
-      <div className='workbench-actions-status-bar'>
-        {!!hiddenActionsCount && <span className='workbench-actions-hidden-count' title={hiddenActionsCount + ' actions hidden by filters'}>{hiddenActionsCount} hidden</span>}
-        <ActionsFilterButton counters={model?.actionCounters} />
-      </div>
     </div>
   };
   const metadataTab: TabbedPaneTabModel = {
@@ -347,6 +343,8 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
     component: <MetadataView model={model}/>
   };
 
+  const actionsFilterWithCount = selectedNavigatorTab === 'actions' && <ActionsFilterButton counters={model?.actionCounters} hiddenActionsCount={hiddenActionsCount} />;
+
   return <div className='vbox workbench' {...(inert ? { inert: true } : {})}>
     {!hideTimeline && <Timeline
       model={model}
@@ -381,6 +379,7 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
         sidebar={
           <TabbedPane
             tabs={[actionsTab, metadataTab]}
+            rightToolbar={[actionsFilterWithCount]}
             selectedTab={selectedNavigatorTab}
             setSelectedTab={setSelectedNavigatorTab}
           />
@@ -405,9 +404,16 @@ const PartitionedWorkbench: React.FunctionComponent<WorkbenchProps & { partition
   </div>;
 };
 
-const ActionsFilterButton: React.FC<{ counters?: Map<string, number> }> = ({ counters }) => {
+const ActionsFilterButton: React.FC<{ counters?: Map<string, number>; hiddenActionsCount: number }> = ({ counters, hiddenActionsCount }) => {
   const [actionsFilter, setActionsFilter] = useSetting<ActionGroup[]>('actionsFilter', []);
-  return <DialogToolbarButton icon='filter' title='Filter actions' dialogDataTestId='actions-filter-dialog'>
+
+  const iconRef = React.useRef<HTMLButtonElement>(null);
+  const buttonChildren = <>
+    {hiddenActionsCount > 0 && <span className='workbench-actions-hidden-count' title={hiddenActionsCount + ' actions hidden by filters'}>{hiddenActionsCount} hidden</span>}
+    <span ref={iconRef} className='codicon codicon-filter'></span>
+  </>;
+
+  return <DialogToolbarButton title='Filter actions' dialogDataTestId='actions-filter-dialog' buttonChildren={buttonChildren} anchorRef={iconRef} >
     <SettingsView
       settings={[
         {

packages/web/src/components/dialogToolbarButton.tsx

@@ -21,20 +21,27 @@ import { Dialog } from '../shared/dialog';
 export interface DialogToolbarButtonProps {
   title?: string;
   icon?: string;
+  buttonChildren?: React.ReactNode;
+  anchorRef?: React.RefObject<HTMLElement | null>;
   dialogDataTestId?: string;
 }
 
-export const DialogToolbarButton: React.FC<React.PropsWithChildren<DialogToolbarButtonProps>> = ({ title, icon, dialogDataTestId, children }) => {
-  const hostingRef = React.useRef<HTMLButtonElement>(null);
+export const DialogToolbarButton: React.FC<React.PropsWithChildren<DialogToolbarButtonProps>> = ({ title, icon, buttonChildren, anchorRef, dialogDataTestId, children }) => {
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const anchor = anchorRef ?? buttonRef;
+
   const [open, setOpen] = React.useState(false);
   return (
     <>
       <ToolbarButton
-        ref={hostingRef}
+        ref={buttonRef}
         icon={icon}
         title={title}
         onClick={() => setOpen(current => !current)}
-      />
+      >
+        {buttonChildren}
+      </ToolbarButton>
+
       <Dialog
         style={{
           backgroundColor: 'var(--vscode-sideBar-background)',
@@ -44,7 +51,7 @@ export const DialogToolbarButton: React.FC<React.PropsWithChildren<DialogToolbar
         // TODO: Temporary spacing until design of toolbar buttons is revisited
         verticalOffset={8}
         requestClose={() => setOpen(false)}
-        anchor={hostingRef}
+        anchor={anchor}
         dataTestId={dialogDataTestId}
       >
         {children}

packages/web/src/components/tabbedPane.tsx

@@ -30,8 +30,8 @@ export interface TabbedPaneTabModel {
 
 export const TabbedPane: React.FunctionComponent<{
   tabs: TabbedPaneTabModel[],
-  leftToolbar?: React.ReactElement[],
-  rightToolbar?: React.ReactElement[],
+  leftToolbar?: React.ReactNode[],
+  rightToolbar?: React.ReactNode[],
   selectedTab?: string,
   setSelectedTab?: (tab: string) => void,
   dataTestId?: string,