@teambit/component.ui.component-filters.env-filter 0.0.0-0075f8c61eb26003cb098208b4da4427a2653ea7

package/dist/dropdown-item.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { EnvFilterEnvState } from './types';
+export declare function EnvsPlaceholder({ onClick }: {
+    onClick?: () => void;
+}): React.JSX.Element;
+export declare function EnvsDropdownItem({ displayName, icon, description, componentId, id }: EnvFilterEnvState): React.JSX.Element;

package/dist/dropdown-item.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvsPlaceholder = EnvsPlaceholder;
+exports.EnvsDropdownItem = EnvsDropdownItem;
+const react_1 = __importDefault(require("react"));
+const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
+const base_react_navigation_link_1 = require("@teambit/base-react.navigation.link");
+const envs_filter_module_scss_1 = __importDefault(require("./envs-filter.module.scss"));
+function EnvsPlaceholder({ onClick }) {
+    return (react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.filterIcon, onClick: onClick },
+        react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/env.svg" }),
+        react_1.default.createElement("span", { className: envs_filter_module_scss_1.default.filterIconLabel }, "Environments"),
+        react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.dropdownArrow },
+            react_1.default.createElement("img", { src: "https://static.bit.dev/bit-icons/fat-arrow-down.svg" }))));
+}
+function EnvsDropdownItem({ displayName, icon, description, componentId, id }) {
+    return (react_1.default.createElement(design_ui_tooltip_1.Tooltip, { placement: "right", content: react_1.default.createElement(base_react_navigation_link_1.Link, { className: envs_filter_module_scss_1.default.envLink, href: component_modules_component_url_1.ComponentUrl.toUrl(componentId, { includeVersion: false }), external: true }, id) },
+        react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItemContainer },
+            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItem },
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, null, displayName),
+                react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.envDropdownItemIconContainer },
+                    react_1.default.createElement("img", { className: envs_filter_module_scss_1.default.envDropdownItemIcon, src: icon }))),
+            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.description },
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: envs_filter_module_scss_1.default.descriptionText }, description)))));
+}
+//# sourceMappingURL=dropdown-item.js.map

package/dist/dropdown-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-item.js","sourceRoot":"","sources":["../dropdown-item.tsx"],"names":[],"mappings":";;;;;AAQA,0CAUC;AAED,4CA2BC;AA/CD,kDAA0B;AAC1B,8FAAwE;AACxE,kFAA8D;AAC9D,kEAAqD;AACrD,oFAA2D;AAE3D,wFAA+C;AAE/C,SAAgB,eAAe,CAAC,EAAE,OAAO,EAA4B;IACnE,OAAO,CACL,uCAAK,SAAS,EAAE,iCAAM,CAAC,UAAU,EAAE,OAAO,EAAE,OAAO;QACjD,uCAAK,GAAG,EAAC,0CAA0C,GAAG;QACtD,wCAAM,SAAS,EAAE,iCAAM,CAAC,eAAe,mBAAqB;QAC5D,uCAAK,SAAS,EAAE,iCAAM,CAAC,aAAa;YAClC,uCAAK,GAAG,EAAC,qDAAqD,GAAG,CAC7D,CACF,CACP,CAAC;AACJ,CAAC;AAED,SAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,EAAqB;IACrG,OAAO,CACL,8BAAC,2BAAO,IACN,SAAS,EAAC,OAAO,EACjB,OAAO,EACL,8BAAC,iCAAI,IACH,SAAS,EAAE,iCAAM,CAAC,OAAO,EACzB,IAAI,EAAE,8CAAY,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,EAChE,QAAQ,EAAE,IAAI,IAEb,EAAE,CACE;QAGT,uCAAK,SAAS,EAAE,iCAAM,CAAC,wBAAwB;YAC7C,uCAAK,SAAS,EAAE,iCAAM,CAAC,eAAe;gBACpC,8BAAC,oCAAQ,QAAE,WAAW,CAAY;gBAClC,uCAAK,SAAS,EAAE,iCAAM,CAAC,4BAA4B;oBACjD,uCAAK,SAAS,EAAE,iCAAM,CAAC,mBAAmB,EAAE,GAAG,EAAE,IAAI,GAAQ,CACzD,CACF;YACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;gBAChC,8BAAC,oCAAQ,IAAC,SAAS,EAAE,iCAAM,CAAC,eAAe,IAAG,WAAW,CAAY,CACjE,CACF,CACE,CACX,CAAC;AACJ,CAAC"}

package/dist/envs-filter.d.ts

@@ -0,0 +1,2 @@
+import type { EnvsFilterCriteria } from './types';
+export declare const EnvsFilter: EnvsFilterCriteria;

package/dist/envs-filter.js

@@ -0,0 +1,167 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvsFilter = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const component_1 = require("@teambit/component");
+const component_ui_component_filters_component_filter_context_1 = require("@teambit/component.ui.component-filters.component-filter-context");
+const design_inputs_selectors_checkbox_item_1 = require("@teambit/design.inputs.selectors.checkbox-item");
+const design_inputs_dropdown_1 = require("@teambit/design.inputs.dropdown");
+const dropdown_item_1 = require("./dropdown-item");
+const envs_filter_module_scss_1 = __importDefault(require("./envs-filter.module.scss"));
+exports.EnvsFilter = {
+    id: 'envs',
+    match: ({ component }, filter) => {
+        var _a;
+        const { envsState } = filter;
+        const areAllEnvsActive = [...envsState.values()].every((envState) => envState.active);
+        const activeEnvs = [...envsState.values()].filter((envState) => envState.active).map((envState) => envState.id);
+        // match everything when no envs are set or all envs are set
+        if (activeEnvs.length === 0 || areAllEnvsActive)
+            return true;
+        const envId = component.environment && ((_a = component_1.ComponentID.tryFromString(component.environment.id)) === null || _a === void 0 ? void 0 : _a.toStringWithoutVersion());
+        const matches = !!envId && activeEnvs.indexOf(envId) >= 0;
+        return matches;
+    },
+    state: {
+        envsState: new Map(),
+        dropdownState: false,
+    },
+    order: 1,
+    render: envsFilter,
+};
+const deriveEnvsFilterState = (components) => {
+    return (0, react_1.useMemo)(() => {
+        const defaultState = {
+            dropdownState: false,
+            envsState: new Map(),
+        };
+        const componentEnvSet = new Set();
+        const componentsEnvsWithIcons = components
+            .filter((component) => {
+            const envId = component.environment && component_1.ComponentID.tryFromString(component.environment.id);
+            if (!envId)
+                return false;
+            const envKey = envId.toStringWithoutVersion();
+            if (componentEnvSet.has(envKey))
+                return false;
+            componentEnvSet.add(envKey);
+            return true;
+        })
+            .map((component) => {
+            var _a, _b;
+            const envId = component_1.ComponentID.fromString((_a = component.environment) === null || _a === void 0 ? void 0 : _a.id);
+            return {
+                displayName: envId.name,
+                id: envId.toStringWithoutVersion(),
+                description: `${envId.scope}${envId.namespace ? '/'.concat(envId.namespace) : ''}`,
+                icon: (_b = component.environment) === null || _b === void 0 ? void 0 : _b.icon,
+                componentId: envId,
+            };
+        });
+        componentsEnvsWithIcons.forEach((componentEnvWithIcon) => {
+            defaultState.envsState.set(componentEnvWithIcon.id, Object.assign(Object.assign({}, componentEnvWithIcon), { active: true }));
+        });
+        return defaultState;
+    }, [components]);
+};
+function envsFilter({ components, className, lanes }) {
+    var _a, _b;
+    const [filters = []] = (0, component_ui_component_filters_component_filter_context_1.useComponentFilters)() || [];
+    const filtersExceptEnv = filters.filter((filter) => filter.id !== exports.EnvsFilter.id);
+    const filteredComponents = (0, react_1.useMemo)(() => (0, component_ui_component_filters_component_filter_context_1.runAllFilters)(filtersExceptEnv, { components, lanes }), [JSON.stringify(filtersExceptEnv), (_a = lanes === null || lanes === void 0 ? void 0 : lanes.viewedLane) === null || _a === void 0 ? void 0 : _a.id.toString()]);
+    const envsFilterState = deriveEnvsFilterState(filteredComponents);
+    const filterContext = (0, component_ui_component_filters_component_filter_context_1.useComponentFilter)(exports.EnvsFilter.id, envsFilterState);
+    const envs = envsFilterState.envsState;
+    const [currentFilter, updateFilter] = filterContext || [];
+    const [open, setOpen] = (0, react_1.useState)(false);
+    /**
+     * this will not work if other filters in a single re-render
+     * result in the same number of components with different ids
+     */
+    (0, react_1.useEffect)(() => {
+        updateFilter === null || updateFilter === void 0 ? void 0 : updateFilter((currentState) => {
+            currentState.state = envsFilterState;
+            return currentState;
+        });
+    }, [filteredComponents.length, (_b = lanes === null || lanes === void 0 ? void 0 : lanes.viewedLane) === null || _b === void 0 ? void 0 : _b.id.toString()]);
+    const selectList = [];
+    envs.forEach((state) => {
+        var _a;
+        selectList.push({
+            value: state.id,
+            icon: state.icon,
+            description: state.description,
+            checked: !!((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.state.envsState.get(state.id)) === null || _a === void 0 ? void 0 : _a.active),
+            element: react_1.default.createElement(dropdown_item_1.EnvsDropdownItem, Object.assign({}, state)),
+        });
+    });
+    const onCheck = (value, e) => {
+        const checked = e.target.checked;
+        updateFilter === null || updateFilter === void 0 ? void 0 : updateFilter((currentState) => {
+            if (checked && !currentState.state.dropdownState) {
+                currentState.state.dropdownState = true;
+            }
+            const currentEnvState = currentState.state.envsState.get(value);
+            if (!currentEnvState)
+                return currentState;
+            currentState.state.envsState.set(value, Object.assign(Object.assign({}, currentEnvState), { active: checked }));
+            return currentState;
+        });
+    };
+    const onClear = () => {
+        updateFilter === null || updateFilter === void 0 ? void 0 : updateFilter((currentState) => {
+            currentState.state.envsState.forEach((value, key) => {
+                currentState.state.envsState.set(key, Object.assign(Object.assign({}, value), { active: false }));
+            });
+            return currentState;
+        });
+    };
+    const onSubmit = () => {
+        updateFilter === null || updateFilter === void 0 ? void 0 : updateFilter((currentState) => {
+            currentState.state.dropdownState = false;
+            return currentState;
+        });
+        setOpen(false);
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(envs_filter_module_scss_1.default.envsFilterContainer, className) },
+        react_1.default.createElement(design_inputs_dropdown_1.Dropdown, { open: open, onClickOutside: () => setOpen(false), placeholderContent: react_1.default.createElement(dropdown_item_1.EnvsPlaceholder, { onClick: () => setOpen(!open) }), bottomPlugin: react_1.default.createElement(design_inputs_dropdown_1.ButtonsPlugin, { onClear: onClear, onSubmit: onSubmit, submitClassName: envs_filter_module_scss_1.default.doneButton }), dropClass: envs_filter_module_scss_1.default.envFilterDropdown, position: "bottom" },
+            react_1.default.createElement("div", { className: envs_filter_module_scss_1.default.dropdownContent }, selectList.map((option, index) => (react_1.default.createElement(design_inputs_selectors_checkbox_item_1.CheckboxItem, { key: index, checked: option.checked, onInputChanged: (e) => onCheck(option.value, e) }, option.element)))))));
+}
+//# sourceMappingURL=envs-filter.js.map

package/dist/envs-filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"envs-filter.js","sourceRoot":"","sources":["../envs-filter.tsx"],"names":[],"mappings":"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"}

package/dist/envs-filter.module.scss

@@ -0,0 +1,84 @@
+.envsFilterContainer {
+  > div {
+    line-height: 16px;
+    display: flex;
+  }
+
+  .filterIcon {
+    display: flex;
+    padding: 8px;
+    border-radius: 8px;
+
+    &:hover {
+      background: var(--bit-bg-heavy, #f6f6f6);
+      cursor: pointer;
+    }
+
+    img {
+      width: 16px;
+      filter: invert(44%) sepia(7%) saturate(560%) hue-rotate(187deg) brightness(96%) contrast(91%);
+    }
+
+    .filterIconLabel {
+      margin: 0px 8px;
+      font-size: 14px;
+    }
+
+    .dropdownArrow {
+      display: flex;
+    }
+  }
+}
+
+.envFilterDropdown {
+  width: 300px;
+}
+.dropdownContent {
+  overflow: auto;
+  max-height: 30vh;
+}
+
+.doneButton {
+  transition: none;
+}
+
+.envDropdownItemContainer {
+  display: flex;
+  width: calc(100% - 24px);
+  align-items: baseline;
+  flex-direction: column;
+}
+
+.envDropdownItemIconContainer {
+  display: flex;
+  height: 16px;
+  width: 16px;
+}
+
+.envDropdownItem {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: var(--bit-p-md, 16px);
+}
+
+.envDropdownItemIcon {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 8px;
+}
+
+.description {
+  font-size: var(--bit-p-xs, 14px);
+  color: var(--bit-text-color-light, #6c707c);
+  width: calc(100% - 24px);
+}
+
+.descriptionText {
+  width: 100%;
+}
+
+.envLink {
+  color: white;
+  text-decoration: none;
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { EnvsFilter } from './envs-filter';

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvsFilter = void 0;
+var envs_filter_1 = require("./envs-filter");
+Object.defineProperty(exports, "EnvsFilter", { enumerable: true, get: function () { return envs_filter_1.EnvsFilter; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,6CAA2C;AAAlC,yGAAA,UAAU,OAAA"}

package/dist/preview-1763418476941.js

@@ -0,0 +1,7 @@
+;
+;
+
+export const compositions = [];
+export const overview = [];
+
+export const compositions_metadata = {"compositions":[]};

package/dist/types.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { ComponentID } from '@teambit/component';
+import type { ComponentFilterCriteria } from '@teambit/component.ui.component-filters.component-filter-context';
+export interface ItemType {
+    value: string;
+    icon: ReactNode;
+    description: string;
+    checked?: boolean;
+    element: ReactNode;
+}
+export type EnvFilterEnvState = {
+    active: boolean;
+    icon?: string;
+    displayName: string;
+    id: string;
+    description: string;
+    componentId: ComponentID;
+};
+export type EnvFilterState = {
+    envsState: Map<string, EnvFilterEnvState>;
+    dropdownState: boolean;
+};
+export type EnvsFilterCriteria = ComponentFilterCriteria<EnvFilterState>;

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../types.ts"],"names":[],"mappings":""}

package/dropdown-item.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { Link } from '@teambit/base-react.navigation.link';
+import type { EnvFilterEnvState } from './types';
+import styles from './envs-filter.module.scss';
+
+export function EnvsPlaceholder({ onClick }: { onClick?: () => void }) {
+  return (
+    <div className={styles.filterIcon} onClick={onClick}>
+      <img src="https://static.bit.dev/bit-icons/env.svg" />
+      <span className={styles.filterIconLabel}>Environments</span>
+      <div className={styles.dropdownArrow}>
+        <img src="https://static.bit.dev/bit-icons/fat-arrow-down.svg" />
+      </div>
+    </div>
+  );
+}
+
+export function EnvsDropdownItem({ displayName, icon, description, componentId, id }: EnvFilterEnvState) {
+  return (
+    <Tooltip
+      placement="right"
+      content={
+        <Link
+          className={styles.envLink}
+          href={ComponentUrl.toUrl(componentId, { includeVersion: false })}
+          external={true}
+        >
+          {id}
+        </Link>
+      }
+    >
+      <div className={styles.envDropdownItemContainer}>
+        <div className={styles.envDropdownItem}>
+          <Ellipsis>{displayName}</Ellipsis>
+          <div className={styles.envDropdownItemIconContainer}>
+            <img className={styles.envDropdownItemIcon} src={icon}></img>
+          </div>
+        </div>
+        <div className={styles.description}>
+          <Ellipsis className={styles.descriptionText}>{description}</Ellipsis>
+        </div>
+      </div>
+    </Tooltip>
+  );
+}

package/envs-filter.module.scss

@@ -0,0 +1,84 @@
+.envsFilterContainer {
+  > div {
+    line-height: 16px;
+    display: flex;
+  }
+
+  .filterIcon {
+    display: flex;
+    padding: 8px;
+    border-radius: 8px;
+
+    &:hover {
+      background: var(--bit-bg-heavy, #f6f6f6);
+      cursor: pointer;
+    }
+
+    img {
+      width: 16px;
+      filter: invert(44%) sepia(7%) saturate(560%) hue-rotate(187deg) brightness(96%) contrast(91%);
+    }
+
+    .filterIconLabel {
+      margin: 0px 8px;
+      font-size: 14px;
+    }
+
+    .dropdownArrow {
+      display: flex;
+    }
+  }
+}
+
+.envFilterDropdown {
+  width: 300px;
+}
+.dropdownContent {
+  overflow: auto;
+  max-height: 30vh;
+}
+
+.doneButton {
+  transition: none;
+}
+
+.envDropdownItemContainer {
+  display: flex;
+  width: calc(100% - 24px);
+  align-items: baseline;
+  flex-direction: column;
+}
+
+.envDropdownItemIconContainer {
+  display: flex;
+  height: 16px;
+  width: 16px;
+}
+
+.envDropdownItem {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-size: var(--bit-p-md, 16px);
+}
+
+.envDropdownItemIcon {
+  display: flex;
+  justify-content: space-between;
+  padding-left: 8px;
+}
+
+.description {
+  font-size: var(--bit-p-xs, 14px);
+  color: var(--bit-text-color-light, #6c707c);
+  width: calc(100% - 24px);
+}
+
+.descriptionText {
+  width: 100%;
+}
+
+.envLink {
+  color: white;
+  text-decoration: none;
+}

package/envs-filter.tsx

@@ -0,0 +1,172 @@
+import React, { useMemo, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import type { ComponentModel } from '@teambit/component';
+import { ComponentID } from '@teambit/component';
+import type { ComponentFilterRenderProps } from '@teambit/component.ui.component-filters.component-filter-context';
+import {
+  useComponentFilter,
+  useComponentFilters,
+  runAllFilters,
+} from '@teambit/component.ui.component-filters.component-filter-context';
+import { CheckboxItem } from '@teambit/design.inputs.selectors.checkbox-item';
+import { Dropdown, ButtonsPlugin } from '@teambit/design.inputs.dropdown';
+import { EnvsPlaceholder, EnvsDropdownItem } from './dropdown-item';
+import type { EnvsFilterCriteria, EnvFilterEnvState, ItemType } from './types';
+import styles from './envs-filter.module.scss';
+
+export const EnvsFilter: EnvsFilterCriteria = {
+  id: 'envs',
+  match: ({ component }, filter) => {
+    const { envsState } = filter;
+    const areAllEnvsActive = [...envsState.values()].every((envState) => envState.active);
+    const activeEnvs = [...envsState.values()].filter((envState) => envState.active).map((envState) => envState.id);
+    // match everything when no envs are set or all envs are set
+    if (activeEnvs.length === 0 || areAllEnvsActive) return true;
+
+    const envId =
+      component.environment && ComponentID.tryFromString(component.environment.id)?.toStringWithoutVersion();
+
+    const matches = !!envId && activeEnvs.indexOf(envId) >= 0;
+    return matches;
+  },
+  state: {
+    envsState: new Map<string, EnvFilterEnvState>(),
+    dropdownState: false,
+  },
+  order: 1,
+  render: envsFilter,
+};
+
+const deriveEnvsFilterState = (components: ComponentModel[]) => {
+  return useMemo(() => {
+    const defaultState = {
+      dropdownState: false,
+      envsState: new Map<string, EnvFilterEnvState>(),
+    };
+
+    const componentEnvSet = new Set<string>();
+
+    const componentsEnvsWithIcons = components
+      .filter((component) => {
+        const envId = component.environment && ComponentID.tryFromString(component.environment.id);
+
+        if (!envId) return false;
+
+        const envKey = envId.toStringWithoutVersion();
+
+        if (componentEnvSet.has(envKey)) return false;
+
+        componentEnvSet.add(envKey);
+
+        return true;
+      })
+      .map((component) => {
+        const envId = ComponentID.fromString(component.environment?.id as string);
+        return {
+          displayName: envId.name,
+          id: envId.toStringWithoutVersion(),
+          description: `${envId.scope}${envId.namespace ? '/'.concat(envId.namespace) : ''}`,
+          icon: component.environment?.icon,
+          componentId: envId,
+        };
+      });
+
+    componentsEnvsWithIcons.forEach((componentEnvWithIcon) => {
+      defaultState.envsState.set(componentEnvWithIcon.id, { ...componentEnvWithIcon, active: true });
+    });
+
+    return defaultState;
+  }, [components]);
+};
+
+function envsFilter({ components, className, lanes }: ComponentFilterRenderProps) {
+  const [filters = []] = useComponentFilters() || [];
+  const filtersExceptEnv = filters.filter((filter) => filter.id !== EnvsFilter.id);
+  const filteredComponents = useMemo(
+    () => runAllFilters(filtersExceptEnv, { components, lanes }),
+    [JSON.stringify(filtersExceptEnv), lanes?.viewedLane?.id.toString()]
+  );
+  const envsFilterState = deriveEnvsFilterState(filteredComponents);
+  const filterContext = useComponentFilter(EnvsFilter.id, envsFilterState);
+  const envs = envsFilterState.envsState;
+  const [currentFilter, updateFilter] = filterContext || [];
+  const [open, setOpen] = useState(false);
+
+  /**
+   * this will not work if other filters in a single re-render
+   * result in the same number of components with different ids
+   */
+  useEffect(() => {
+    updateFilter?.((currentState) => {
+      currentState.state = envsFilterState;
+      return currentState;
+    });
+  }, [filteredComponents.length, lanes?.viewedLane?.id.toString()]);
+
+  const selectList: ItemType[] = [];
+
+  envs.forEach((state) => {
+    selectList.push({
+      value: state.id,
+      icon: state.icon,
+      description: state.description,
+      checked: !!currentFilter?.state.envsState.get(state.id)?.active,
+      element: <EnvsDropdownItem {...state} />,
+    });
+  });
+
+  const onCheck = (value: string, e: React.ChangeEvent<HTMLInputElement>) => {
+    const checked = e.target.checked;
+
+    updateFilter?.((currentState) => {
+      if (checked && !currentState.state.dropdownState) {
+        currentState.state.dropdownState = true;
+      }
+
+      const currentEnvState = currentState.state.envsState.get(value);
+
+      if (!currentEnvState) return currentState;
+
+      currentState.state.envsState.set(value, { ...currentEnvState, active: checked });
+      return currentState;
+    });
+  };
+
+  const onClear = () => {
+    updateFilter?.((currentState) => {
+      currentState.state.envsState.forEach((value, key) => {
+        currentState.state.envsState.set(key, { ...value, active: false });
+      });
+      return currentState;
+    });
+  };
+
+  const onSubmit = () => {
+    updateFilter?.((currentState) => {
+      currentState.state.dropdownState = false;
+      return currentState;
+    });
+    setOpen(false);
+  };
+
+  return (
+    <div className={classNames(styles.envsFilterContainer, className)}>
+      <Dropdown
+        open={open}
+        onClickOutside={() => setOpen(false)}
+        placeholderContent={<EnvsPlaceholder onClick={() => setOpen(!open)} />}
+        bottomPlugin={<ButtonsPlugin onClear={onClear} onSubmit={onSubmit} submitClassName={styles.doneButton} />}
+        dropClass={styles.envFilterDropdown}
+        position="bottom"
+      >
+        <div className={styles.dropdownContent}>
+          {selectList.map((option, index) => (
+            <CheckboxItem key={index} checked={option.checked} onInputChanged={(e) => onCheck(option.value, e)}>
+              {option.element}
+            </CheckboxItem>
+          ))}
+        </div>
+      </Dropdown>
+    </div>
+  );
+}

package/index.ts

@@ -0,0 +1 @@
+export { EnvsFilter } from './envs-filter';

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@teambit/component.ui.component-filters.env-filter",
+  "version": "0.0.0-0075f8c61eb26003cb098208b4da4427a2653ea7",
+  "homepage": "https://bit.cloud/teambit/component/ui/component-filters/env-filter",
+  "main": "dist/index.js",
+  "componentId": {
+    "scope": "teambit.component",
+    "name": "ui/component-filters/env-filter",
+    "version": "0075f8c61eb26003cb098208b4da4427a2653ea7"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "core-js": "^3.0.0",
+    "@teambit/component.modules.component-url": "0.0.182",
+    "@teambit/design.ui.styles.ellipsis": "0.0.357",
+    "@teambit/component.ui.component-filters.component-filter-context": "0.0.239",
+    "@teambit/design.inputs.selectors.checkbox-item": "1.2.0",
+    "@teambit/design.inputs.dropdown": "1.3.3",
+    "@teambit/design.ui.tooltip": "0.0.0-419176d8ff42306eb268f3249b7894270d450d7f"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.8",
+    "@types/classnames": "^2.3.4",
+    "@types/mocha": "9.1.0",
+    "@types/node": "12.20.4",
+    "@types/react-dom": "^17.0.5",
+    "@types/jest": "^26.0.0",
+    "@babel/runtime": "7.20.0",
+    "@types/testing-library__jest-dom": "5.9.5"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0",
+    "@teambit/base-react.navigation.link": "2.0.33"
+  },
+  "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
+  "private": false,
+  "engines": {
+    "node": ">=12.22.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teambit/bit"
+  },
+  "keywords": [
+    "bit",
+    "components",
+    "collaboration",
+    "web",
+    "react",
+    "react-components",
+    "angular",
+    "angular-components"
+  ]
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}

package/types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { ComponentID } from '@teambit/component';
+import type { ComponentFilterCriteria } from '@teambit/component.ui.component-filters.component-filter-context';
+
+export interface ItemType {
+  value: string;
+  icon: ReactNode;
+  description: string;
+  checked?: boolean;
+  element: ReactNode;
+}
+
+export type EnvFilterEnvState = {
+  active: boolean;
+  icon?: string;
+  displayName: string;
+  id: string;
+  description: string;
+  componentId: ComponentID;
+};
+
+export type EnvFilterState = {
+  envsState: Map<string, EnvFilterEnvState>;
+  dropdownState: boolean;
+};
+
+export type EnvsFilterCriteria = ComponentFilterCriteria<EnvFilterState>;