@teambit/workspace 0.0.669 → 0.0.672

package/dist/ui/workspace-components-drawer/workspace-components-drawer.module.scss

@@ -6,3 +6,36 @@
 .collapseIcon {
   width: 16px;
 }
+
+.deprecateFilter {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: space-between;
+  padding: 8px;
+  margin: 4px 8px;
+
+  .filterIcon {
+    line-height: 16px;
+    display: flex;
+
+    .filterIconLabel {
+      margin: 0px 8px;
+      font-size: 12px;
+    }
+  }
+}
+
+.filterWidgetIcon {
+  margin-right: 12px;
+  padding: 4px;
+
+  &:hover {
+    background: white;
+  }
+
+  &.open {
+    color: var(--bit-accent-color, #6c5ce7);
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+}

package/dist/ui/workspace-components-drawer/workspace-components.drawer.d.ts

@@ -6,9 +6,10 @@ export declare class WorkspaceComponentsDrawer implements DrawerType {
     constructor(treeNodeSlot: ComponentTreeSlot);
     id: string;
     name: string;
-    widget: JSX.Element;
+    widgets: JSX.Element[];
     Context: ({ children }: {
         children: any;
     }) => JSX.Element;
+    Filters: JSX.Element[];
     render: () => JSX.Element;
 }

package/dist/ui/workspace-components-drawer/workspace-components.drawer.js

@@ -49,6 +49,16 @@ function _uiFoundationUi2() {
   return data;
 }
 
+function _evangelistElements() {
+  const data = require("@teambit/evangelist.elements.icon");
+
+  _evangelistElements = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _react() {
   const data = _interopRequireWildcard(require("react"));
 
@@ -89,6 +99,16 @@ function _designUiStyles2() {
   return data;
 }
 
+function _designUiInput() {
+  const data = require("@teambit/design.ui.input.toggle");
+
+  _designUiInput = function () {
+    return data;
+  };
+
+  return data;
+}
+
 function _workspaceContext() {
   const data = require("../workspace/workspace-context");
 
@@ -115,7 +135,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const WorkspaceTreeContext = /*#__PURE__*/(0, _react().createContext)({
   collapsed: true,
-  setCollapsed: () => {}
+  setCollapsed: () => {},
+  activeFilters: [],
+  setActiveFilter: () => {},
+  filterOpen: false,
+  setFilterOpen: () => {}
 });
 
 class WorkspaceComponentsDrawer {
@@ -123,26 +147,53 @@ class WorkspaceComponentsDrawer {
     this.treeNodeSlot = treeNodeSlot;
     (0, _defineProperty2().default)(this, "id", 'workspace-components');
     (0, _defineProperty2().default)(this, "name", 'COMPONENTS');
-    (0, _defineProperty2().default)(this, "widget", /*#__PURE__*/_react().default.createElement(Widget, null));
+    (0, _defineProperty2().default)(this, "widgets", [/*#__PURE__*/_react().default.createElement(FilterWidget, {
+      key: 'filter-widget'
+    }), /*#__PURE__*/_react().default.createElement(TreeToggleWidget, {
+      key: 'tree-toggle-widget'
+    })]);
     (0, _defineProperty2().default)(this, "Context", ({
       children
     }) => {
       const [collapsed, setCollapsed] = (0, _react().useState)(true);
+      const [activeFilters, setActiveFilters] = (0, _react().useState)([]);
+      const [filterOpen, setFilterOpen] = (0, _react().useState)(false);
+
+      const handleActiveFilterToggle = filterId => {
+        const isFilterActive = activeFilters.includes(filterId);
+
+        if (isFilterActive) {
+          setActiveFilters(list => list.filter(id => id !== filterId));
+          return;
+        }
+
+        setActiveFilters(list => list.concat(filterId));
+      };
+
       return /*#__PURE__*/_react().default.createElement(WorkspaceTreeContext.Provider, {
         value: {
           collapsed,
-          setCollapsed
+          setCollapsed,
+          activeFilters,
+          setActiveFilter: handleActiveFilterToggle,
+          filterOpen,
+          setFilterOpen
         }
       }, children);
     });
+    (0, _defineProperty2().default)(this, "Filters", [/*#__PURE__*/_react().default.createElement(DeprecateFilter, {
+      key: 'deprecate-filter'
+    })]);
     (0, _defineProperty2().default)(this, "render", () => {
       const workspace = (0, _react().useContext)(_workspaceContext().WorkspaceContext);
       const {
-        collapsed
+        collapsed,
+        activeFilters
       } = (0, _react().useContext)(WorkspaceTreeContext);
       const {
         treeNodeSlot
       } = this;
+      const showDeprecatedComponents = activeFilters.find(activeFilter => activeFilter === 'deprecate');
       const TreeNodeRenderer = (0, _react().useCallback)(function TreeNode(props) {
         const children = props.node.children;
         if (!children) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().ComponentView, (0, _extends2().default)({}, props, {
@@ -153,15 +204,20 @@ class WorkspaceComponentsDrawer {
         return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().NamespaceTreeNode, props);
       }, [treeNodeSlot]);
       if (!workspace) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().FullLoader, null);
+      const components = showDeprecatedComponents ? workspace.components : workspace.components.filter(component => {
+        var _component$deprecatio;
 
-      if (workspace.components.length === 0) {
+        return !((_component$deprecatio = component.deprecation) !== null && _component$deprecatio !== void 0 && _component$deprecatio.isDeprecate);
+      });
+
+      if (components.length === 0) {
         return /*#__PURE__*/_react().default.createElement("span", {
           className: (0, _classnames().default)(_designUiStyles().mutedItalic, _designUiStyles2().ellipsis, _workspaceComponentsDrawerModule().default.emptyWorkspace)
         }, "Workspace is empty");
       }
 
       return /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().ComponentTree, {
-        components: workspace.components,
+        components: components,
         isCollapsed: collapsed,
         TreeNode: TreeNodeRenderer
       });
@@ -172,7 +228,7 @@ class WorkspaceComponentsDrawer {
 
 exports.WorkspaceComponentsDrawer = WorkspaceComponentsDrawer;
 
-function Widget() {
+function TreeToggleWidget() {
   const {
     collapsed,
     setCollapsed
@@ -185,4 +241,38 @@ function Widget() {
   });
 }
 
+function FilterWidget() {
+  const {
+    filterOpen,
+    setFilterOpen
+  } = (0, _react().useContext)(WorkspaceTreeContext);
+  return /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+    className: (0, _classnames().default)(_workspaceComponentsDrawerModule().default.filterWidgetIcon, filterOpen && _workspaceComponentsDrawerModule().default.open),
+    of: "Ripple_filters",
+    onClick: () => setFilterOpen(!filterOpen)
+  });
+}
+
+function DeprecateFilter() {
+  const {
+    activeFilters,
+    setActiveFilter,
+    filterOpen
+  } = (0, _react().useContext)(WorkspaceTreeContext);
+  const isActive = activeFilters.includes('deprecate');
+  if (!filterOpen) return null;
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: (0, _classnames().default)(_workspaceComponentsDrawerModule().default.deprecateFilter, isActive && _workspaceComponentsDrawerModule().default.active)
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _workspaceComponentsDrawerModule().default.filterIcon
+  }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+    of: "note-deprecated"
+  }), /*#__PURE__*/_react().default.createElement("span", {
+    className: _workspaceComponentsDrawerModule().default.filterIconLabel
+  }, "Deprecated")), /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(_designUiInput().Toggle, {
+    checked: isActive,
+    onInputChanged: () => setActiveFilter('deprecate')
+  })));
+}
+
 //# sourceMappingURL=workspace-components.drawer.js.map

package/dist/ui/workspace-components-drawer/workspace-components.drawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["workspace-components.drawer.tsx"],"names":["WorkspaceTreeContext","collapsed","setCollapsed","WorkspaceComponentsDrawer","constructor","treeNodeSlot","children","workspace","WorkspaceContext","TreeNodeRenderer","TreeNode","props","node","payload","ScopePayload","components","length","mutedItalic","ellipsis","styles","emptyWorkspace","Widget","icon","collapseIcon"],"mappings":"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","sourcesContent":["import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport {\n  ComponentTree,\n  PayloadType,\n  ComponentView,\n  ScopeTreeNode,\n  NamespaceTreeNode,\n  ScopePayload,\n} from '@teambit/ui-foundation.ui.side-bar';\nimport { TreeNodeProps } from '@teambit/design.ui.tree';\nimport React, { useCallback, useContext, useState, createContext } from 'react';\nimport classNames from 'classnames';\nimport { ComponentTreeSlot } from '@teambit/component-tree';\nimport { mutedItalic } from '@teambit/design.ui.styles.muted-italic';\nimport { ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport { WorkspaceContext } from '../workspace/workspace-context';\nimport styles from './workspace-components-drawer.module.scss';\n\nconst WorkspaceTreeContext = createContext<{ collapsed: boolean; setCollapsed: (x: boolean) => void }>({\n  collapsed: true,\n  setCollapsed: () => {},\n});\n\nexport class WorkspaceComponentsDrawer implements DrawerType {\n  constructor(private treeNodeSlot: ComponentTreeSlot) {}\n\n  id = 'workspace-components';\n  name = 'COMPONENTS';\n\n  widget = (<Widget />);\n\n  Context = ({ children }) => {\n    const [collapsed, setCollapsed] = useState(true);\n    return (\n      <WorkspaceTreeContext.Provider value={{ collapsed, setCollapsed }}>{children}</WorkspaceTreeContext.Provider>\n    );\n  };\n\n  render = () => {\n    const workspace = useContext(WorkspaceContext);\n    const { collapsed } = useContext(WorkspaceTreeContext);\n    const { treeNodeSlot } = this;\n\n    const TreeNodeRenderer = useCallback(\n      function TreeNode(props: TreeNodeProps<PayloadType>) {\n        const children = props.node.children;\n\n        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />; // non collapse\n\n        if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;\n\n        return <NamespaceTreeNode {...props} />;\n      },\n      [treeNodeSlot]\n    );\n\n    if (!workspace) return <FullLoader />;\n    if (workspace.components.length === 0) {\n      return <span className={classNames(mutedItalic, ellipsis, styles.emptyWorkspace)}>Workspace is empty</span>;\n    }\n\n    return <ComponentTree components={workspace.components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;\n  };\n}\n\nfunction Widget() {\n  const { collapsed, setCollapsed } = useContext(WorkspaceTreeContext);\n  const icon = collapsed\n    ? 'https://static.bit.dev/bit-icons/expand.svg'\n    : 'https://static.bit.dev/bit-icons/collapse.svg';\n  return <img src={icon} className={styles.collapseIcon} onClick={() => setCollapsed(!collapsed)} />;\n}\n"]}
+{"version":3,"sources":["workspace-components.drawer.tsx"],"names":["WorkspaceTreeContext","collapsed","setCollapsed","activeFilters","setActiveFilter","filterOpen","setFilterOpen","WorkspaceComponentsDrawer","constructor","treeNodeSlot","children","setActiveFilters","handleActiveFilterToggle","filterId","isFilterActive","includes","list","filter","id","concat","workspace","WorkspaceContext","showDeprecatedComponents","find","activeFilter","TreeNodeRenderer","TreeNode","props","node","payload","ScopePayload","components","component","deprecation","isDeprecate","length","mutedItalic","ellipsis","styles","emptyWorkspace","TreeToggleWidget","icon","collapseIcon","FilterWidget","filterWidgetIcon","open","DeprecateFilter","isActive","deprecateFilter","active","filterIcon","filterIconLabel"],"mappings":"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","sourcesContent":["import type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { FullLoader } from '@teambit/ui-foundation.ui.full-loader';\nimport {\n  ComponentTree,\n  PayloadType,\n  ComponentView,\n  ScopeTreeNode,\n  NamespaceTreeNode,\n  ScopePayload,\n} from '@teambit/ui-foundation.ui.side-bar';\nimport { Icon } from '@teambit/evangelist.elements.icon';\nimport { TreeNodeProps } from '@teambit/design.ui.tree';\nimport React, { useCallback, useContext, useState, createContext } from 'react';\nimport classNames from 'classnames';\nimport { ComponentTreeSlot } from '@teambit/component-tree';\nimport { mutedItalic } from '@teambit/design.ui.styles.muted-italic';\nimport { ellipsis } from '@teambit/design.ui.styles.ellipsis';\nimport { Toggle } from '@teambit/design.ui.input.toggle';\nimport { WorkspaceContext } from '../workspace/workspace-context';\nimport styles from './workspace-components-drawer.module.scss';\n\ntype WorkspaceTreeContextType = {\n  collapsed: boolean;\n  setCollapsed: (x: boolean) => void;\n  filterOpen: boolean;\n  setFilterOpen: (open: boolean) => void;\n  activeFilters: string[];\n  setActiveFilter: (filterId: string) => void;\n};\nconst WorkspaceTreeContext = createContext<WorkspaceTreeContextType>({\n  collapsed: true,\n  setCollapsed: () => {},\n  activeFilters: [],\n  setActiveFilter: () => {},\n  filterOpen: false,\n  setFilterOpen: () => {},\n});\n\nexport class WorkspaceComponentsDrawer implements DrawerType {\n  constructor(private treeNodeSlot: ComponentTreeSlot) {}\n\n  id = 'workspace-components';\n  name = 'COMPONENTS';\n\n  widgets = [<FilterWidget key={'filter-widget'} />, <TreeToggleWidget key={'tree-toggle-widget'} />];\n\n  Context = ({ children }) => {\n    const [collapsed, setCollapsed] = useState(true);\n    const [activeFilters, setActiveFilters] = useState<string[]>([]);\n    const [filterOpen, setFilterOpen] = useState<boolean>(false);\n\n    const handleActiveFilterToggle = (filterId: string) => {\n      const isFilterActive = activeFilters.includes(filterId);\n      if (isFilterActive) {\n        setActiveFilters((list) => list.filter((id) => id !== filterId));\n        return;\n      }\n      setActiveFilters((list) => list.concat(filterId));\n    };\n\n    return (\n      <WorkspaceTreeContext.Provider\n        value={{\n          collapsed,\n          setCollapsed,\n          activeFilters,\n          setActiveFilter: handleActiveFilterToggle,\n          filterOpen,\n          setFilterOpen,\n        }}\n      >\n        {children}\n      </WorkspaceTreeContext.Provider>\n    );\n  };\n\n  Filters = [<DeprecateFilter key={'deprecate-filter'} />];\n\n  render = () => {\n    const workspace = useContext(WorkspaceContext);\n    const { collapsed, activeFilters } = useContext(WorkspaceTreeContext);\n    const { treeNodeSlot } = this;\n    const showDeprecatedComponents = activeFilters.find((activeFilter) => activeFilter === 'deprecate');\n\n    const TreeNodeRenderer = useCallback(\n      function TreeNode(props: TreeNodeProps<PayloadType>) {\n        const children = props.node.children;\n\n        if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />; // non collapse\n\n        if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;\n\n        return <NamespaceTreeNode {...props} />;\n      },\n      [treeNodeSlot]\n    );\n\n    if (!workspace) return <FullLoader />;\n\n    const components = showDeprecatedComponents\n      ? workspace.components\n      : workspace.components.filter((component) => !component.deprecation?.isDeprecate);\n\n    if (components.length === 0) {\n      return <span className={classNames(mutedItalic, ellipsis, styles.emptyWorkspace)}>Workspace is empty</span>;\n    }\n\n    return <ComponentTree components={components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;\n  };\n}\n\nfunction TreeToggleWidget() {\n  const { collapsed, setCollapsed } = useContext(WorkspaceTreeContext);\n  const icon = collapsed\n    ? 'https://static.bit.dev/bit-icons/expand.svg'\n    : 'https://static.bit.dev/bit-icons/collapse.svg';\n  return <img src={icon} className={styles.collapseIcon} onClick={() => setCollapsed(!collapsed)} />;\n}\n\nfunction FilterWidget() {\n  const { filterOpen, setFilterOpen } = useContext(WorkspaceTreeContext);\n  return (\n    <Icon\n      className={classNames(styles.filterWidgetIcon, filterOpen && styles.open)}\n      of=\"Ripple_filters\"\n      onClick={() => setFilterOpen(!filterOpen)}\n    />\n  );\n}\n\nfunction DeprecateFilter() {\n  const { activeFilters, setActiveFilter, filterOpen } = useContext(WorkspaceTreeContext);\n  const isActive = activeFilters.includes('deprecate');\n\n  if (!filterOpen) return null;\n\n  return (\n    <div className={classNames(styles.deprecateFilter, isActive && styles.active)}>\n      <div className={styles.filterIcon}>\n        <Icon of=\"note-deprecated\" />\n        <span className={styles.filterIconLabel}>Deprecated</span>\n      </div>\n      <div>\n        <Toggle checked={isActive} onInputChanged={() => setActiveFilter('deprecate')} />\n      </div>\n    </div>\n  );\n}\n"]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "0.0.669",
+  "version": "0.0.672",
   "homepage": "https://bit.dev/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "0.0.669"
+    "version": "0.0.672"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -38,45 +38,47 @@
     "core-js": "^3.0.0",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
+    "@teambit/design.ui.input.toggle": "1.0.12",
+    "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/component-id": "0.0.401",
     "@teambit/bit-error": "0.0.394",
     "@teambit/legacy-bit-id": "0.0.398",
-    "@teambit/logger": "0.0.541",
-    "@teambit/scope": "0.0.669",
-    "@teambit/cli": "0.0.451",
-    "@teambit/isolator": "0.0.669",
-    "@teambit/component-tree": "0.0.457",
+    "@teambit/logger": "0.0.542",
+    "@teambit/scope": "0.0.672",
+    "@teambit/cli": "0.0.452",
+    "@teambit/isolator": "0.0.672",
+    "@teambit/component-tree": "0.0.460",
     "@teambit/component.ui.component-status-resolver": "0.0.492",
-    "@teambit/lanes.ui.lanes": "0.0.11",
+    "@teambit/lanes.ui.lanes": "0.0.13",
     "@teambit/harmony.modules.resolved-component": "0.0.484",
-    "@teambit/dependency-resolver": "0.0.669",
-    "@teambit/compiler": "0.0.669",
-    "@teambit/component": "0.0.669",
-    "@teambit/graphql": "0.0.669",
-    "@teambit/aspect-loader": "0.0.669",
-    "@teambit/bundler": "0.0.669",
-    "@teambit/envs": "0.0.669",
-    "@teambit/pubsub": "0.0.669",
-    "@teambit/ui": "0.0.669",
-    "@teambit/variants": "0.0.544",
+    "@teambit/dependency-resolver": "0.0.672",
+    "@teambit/compiler": "0.0.672",
+    "@teambit/component": "0.0.672",
+    "@teambit/graphql": "0.0.672",
+    "@teambit/aspect-loader": "0.0.672",
+    "@teambit/bundler": "0.0.672",
+    "@teambit/envs": "0.0.672",
+    "@teambit/pubsub": "0.0.672",
+    "@teambit/ui": "0.0.672",
+    "@teambit/variants": "0.0.545",
     "@teambit/component-issues": "0.0.46",
-    "@teambit/config": "0.0.464",
+    "@teambit/config": "0.0.465",
     "@teambit/harmony.modules.requireable-component": "0.0.484",
-    "@teambit/importer": "0.0.98",
+    "@teambit/importer": "0.0.101",
     "@teambit/workspace.modules.match-pattern": "0.0.489",
-    "@teambit/command-bar": "0.0.669",
+    "@teambit/command-bar": "0.0.672",
     "@teambit/design.ui.surfaces.menu.link-item": "0.0.379",
-    "@teambit/graph": "0.0.669",
-    "@teambit/react-router": "0.0.669",
-    "@teambit/sidebar": "0.0.669",
+    "@teambit/graph": "0.0.672",
+    "@teambit/react-router": "0.0.672",
+    "@teambit/sidebar": "0.0.672",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.486",
     "@teambit/ui-foundation.ui.menu": "0.0.486",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.488",
-    "@teambit/ui-foundation.ui.tree.drawer": "0.0.493",
+    "@teambit/ui-foundation.ui.tree.drawer": "0.0.495",
     "@teambit/toolbox.time.time-format": "0.0.483",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.487",
-    "@teambit/component-descriptor": "0.0.12",
-    "@teambit/deprecation": "0.0.669",
+    "@teambit/component-descriptor": "0.0.13",
+    "@teambit/deprecation": "0.0.672",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.487",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.193",
     "@teambit/ui-foundation.ui.corner": "0.0.494",
@@ -86,7 +88,7 @@
     "@teambit/design.ui.styles.muted-italic": "0.0.35",
     "@teambit/design.ui.tree": "0.0.5",
     "@teambit/ui-foundation.ui.full-loader": "0.0.486",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.508",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.510",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.486",
     "@teambit/workspace.ui.empty-workspace": "0.0.489",
     "@teambit/workspace.ui.workspace-component-card": "0.0.495"
@@ -109,7 +111,7 @@
   },
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
-    "@teambit/legacy": "1.0.230",
+    "@teambit/legacy": "1.0.231",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -137,7 +139,7 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.230",
+        "@teambit/legacy": "1.0.231",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }

package/ui/workspace-components-drawer/workspace-components-drawer.module.scss

@@ -6,3 +6,36 @@
 .collapseIcon {
   width: 16px;
 }
+
+.deprecateFilter {
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: space-between;
+  padding: 8px;
+  margin: 4px 8px;
+
+  .filterIcon {
+    line-height: 16px;
+    display: flex;
+
+    .filterIconLabel {
+      margin: 0px 8px;
+      font-size: 12px;
+    }
+  }
+}
+
+.filterWidgetIcon {
+  margin-right: 12px;
+  padding: 4px;
+
+  &:hover {
+    background: white;
+  }
+
+  &.open {
+    color: var(--bit-accent-color, #6c5ce7);
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+}

package/ui/workspace-components-drawer/workspace-components.drawer.tsx

@@ -8,18 +8,32 @@ import {
   NamespaceTreeNode,
   ScopePayload,
 } from '@teambit/ui-foundation.ui.side-bar';
+import { Icon } from '@teambit/evangelist.elements.icon';
 import { TreeNodeProps } from '@teambit/design.ui.tree';
 import React, { useCallback, useContext, useState, createContext } from 'react';
 import classNames from 'classnames';
 import { ComponentTreeSlot } from '@teambit/component-tree';
 import { mutedItalic } from '@teambit/design.ui.styles.muted-italic';
 import { ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { Toggle } from '@teambit/design.ui.input.toggle';
 import { WorkspaceContext } from '../workspace/workspace-context';
 import styles from './workspace-components-drawer.module.scss';
 
-const WorkspaceTreeContext = createContext<{ collapsed: boolean; setCollapsed: (x: boolean) => void }>({
+type WorkspaceTreeContextType = {
+  collapsed: boolean;
+  setCollapsed: (x: boolean) => void;
+  filterOpen: boolean;
+  setFilterOpen: (open: boolean) => void;
+  activeFilters: string[];
+  setActiveFilter: (filterId: string) => void;
+};
+const WorkspaceTreeContext = createContext<WorkspaceTreeContextType>({
   collapsed: true,
   setCollapsed: () => {},
+  activeFilters: [],
+  setActiveFilter: () => {},
+  filterOpen: false,
+  setFilterOpen: () => {},
 });
 
 export class WorkspaceComponentsDrawer implements DrawerType {
@@ -28,19 +42,45 @@ export class WorkspaceComponentsDrawer implements DrawerType {
   id = 'workspace-components';
   name = 'COMPONENTS';
 
-  widget = (<Widget />);
+  widgets = [<FilterWidget key={'filter-widget'} />, <TreeToggleWidget key={'tree-toggle-widget'} />];
 
   Context = ({ children }) => {
     const [collapsed, setCollapsed] = useState(true);
+    const [activeFilters, setActiveFilters] = useState<string[]>([]);
+    const [filterOpen, setFilterOpen] = useState<boolean>(false);
+
+    const handleActiveFilterToggle = (filterId: string) => {
+      const isFilterActive = activeFilters.includes(filterId);
+      if (isFilterActive) {
+        setActiveFilters((list) => list.filter((id) => id !== filterId));
+        return;
+      }
+      setActiveFilters((list) => list.concat(filterId));
+    };
+
     return (
-      <WorkspaceTreeContext.Provider value={{ collapsed, setCollapsed }}>{children}</WorkspaceTreeContext.Provider>
+      <WorkspaceTreeContext.Provider
+        value={{
+          collapsed,
+          setCollapsed,
+          activeFilters,
+          setActiveFilter: handleActiveFilterToggle,
+          filterOpen,
+          setFilterOpen,
+        }}
+      >
+        {children}
+      </WorkspaceTreeContext.Provider>
     );
   };
 
+  Filters = [<DeprecateFilter key={'deprecate-filter'} />];
+
   render = () => {
     const workspace = useContext(WorkspaceContext);
-    const { collapsed } = useContext(WorkspaceTreeContext);
+    const { collapsed, activeFilters } = useContext(WorkspaceTreeContext);
     const { treeNodeSlot } = this;
+    const showDeprecatedComponents = activeFilters.find((activeFilter) => activeFilter === 'deprecate');
 
     const TreeNodeRenderer = useCallback(
       function TreeNode(props: TreeNodeProps<PayloadType>) {
@@ -56,18 +96,53 @@ export class WorkspaceComponentsDrawer implements DrawerType {
     );
 
     if (!workspace) return <FullLoader />;
-    if (workspace.components.length === 0) {
+
+    const components = showDeprecatedComponents
+      ? workspace.components
+      : workspace.components.filter((component) => !component.deprecation?.isDeprecate);
+
+    if (components.length === 0) {
       return <span className={classNames(mutedItalic, ellipsis, styles.emptyWorkspace)}>Workspace is empty</span>;
     }
 
-    return <ComponentTree components={workspace.components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;
+    return <ComponentTree components={components} isCollapsed={collapsed} TreeNode={TreeNodeRenderer} />;
   };
 }
 
-function Widget() {
+function TreeToggleWidget() {
   const { collapsed, setCollapsed } = useContext(WorkspaceTreeContext);
   const icon = collapsed
     ? 'https://static.bit.dev/bit-icons/expand.svg'
     : 'https://static.bit.dev/bit-icons/collapse.svg';
   return <img src={icon} className={styles.collapseIcon} onClick={() => setCollapsed(!collapsed)} />;
 }
+
+function FilterWidget() {
+  const { filterOpen, setFilterOpen } = useContext(WorkspaceTreeContext);
+  return (
+    <Icon
+      className={classNames(styles.filterWidgetIcon, filterOpen && styles.open)}
+      of="Ripple_filters"
+      onClick={() => setFilterOpen(!filterOpen)}
+    />
+  );
+}
+
+function DeprecateFilter() {
+  const { activeFilters, setActiveFilter, filterOpen } = useContext(WorkspaceTreeContext);
+  const isActive = activeFilters.includes('deprecate');
+
+  if (!filterOpen) return null;
+
+  return (
+    <div className={classNames(styles.deprecateFilter, isActive && styles.active)}>
+      <div className={styles.filterIcon}>
+        <Icon of="note-deprecated" />
+        <span className={styles.filterIconLabel}>Deprecated</span>
+      </div>
+      <div>
+        <Toggle checked={isActive} onInputChanged={() => setActiveFilter('deprecate')} />
+      </div>
+    </div>
+  );
+}