@uxland/primary-shell 4.2.0 → 4.3.0

package/src/api/http-client/http-client.ts

@@ -1,12 +1,15 @@
 import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 import { TokenManager } from "../token-manager/token-manager";
+import { shellEvents } from "../../events";
+import { PrimariaBroker } from "../broker/primaria-broker";
 
-export const createAxiosInstance = (tokenManager: TokenManager) => {
-  const instance = axios.create({
-    headers: {
-      Authorization: `Bearer ${tokenManager.getToken()}`,
-    },
+export const createAxiosInstance = (tokenManager: TokenManager, broker: PrimariaBroker) => {
+  const instance = axios.create();
+  instance.interceptors.request.use((config) => {
+    config.headers.Authorization = `Bearer ${tokenManager.getToken()}`;
+    return config;
   });
+  
   instance.interceptors.response.use(
     (response: AxiosResponse) => response,
     async (error) => {
@@ -14,9 +17,15 @@ export const createAxiosInstance = (tokenManager: TokenManager) => {
       if (error.response.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
         // Implement token refresh logic here and update the token in headers
+        try {
         const newToken = await tokenManager.refreshToken();
         originalRequest.headers.Authorization = `Bearer ${newToken}`;
         return instance(originalRequest);
+        } catch (refreshError) {
+          console.error("Error refreshing token:", refreshError);
+          broker.publish(shellEvents.refreshTokenFailed, {request: originalRequest});
+          return Promise.reject(error);
+        }
       }
       return Promise.reject(error);
     },
@@ -29,14 +38,12 @@ let instance;
 
 //TODO: Test concurrent request that get intercepted by expired token and
 // An option is to use subscribers to enque unauth requests and only refresh one token and retry the others with the new token
-
-
 export interface HttpClient {
   request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
 }
-export const createHttpClient = (tokenManager: TokenManager): HttpClient => {
+export const createHttpClient = (tokenManager: TokenManager, broker: PrimariaBroker): HttpClient => {
   if (!instance) {
-    instance = createAxiosInstance(tokenManager);
+    instance = createAxiosInstance(tokenManager, broker);
   }
   return { request: instance.request };
-};
+};

package/src/api/plugin-busy-manager/plugin-busy-list/component.ts

@@ -0,0 +1,19 @@
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+import styles from "./styles.css?inline";
+import { template } from "./template";
+import { confirmMixin } from "../../../UI/shared-components/primaria-interaction/confirm-mixin";
+import { PluginBusyTask } from "../plugin-busy-manager";
+
+@customElement("plugin-busy-list")
+export class PluginBusyList extends confirmMixin(LitElement) {
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  render() {
+    return html`${template(this)}`;
+  }
+
+  model: { busyTasks: PluginBusyTask[] };
+}

package/src/api/plugin-busy-manager/plugin-busy-list/styles.css

@@ -0,0 +1,20 @@
+.container{
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: center;
+}
+
+.title{
+    font-size: 15px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--color-red-600);
+}
+
+
+.list{
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}

package/src/api/plugin-busy-manager/plugin-busy-list/template.ts

@@ -0,0 +1,13 @@
+import { html } from "lit";
+import { PluginBusyList } from "./component";
+import { PluginBusyTask } from "../plugin-busy-manager";
+import { translate } from "../../../locales";
+
+export const template = (props: PluginBusyList) => html`
+    <div class="container">
+        <div class="title">${translate("busyManager.title")}</div>
+        <div class="list">
+            ${props.model?.busyTasks?.map((item: PluginBusyTask) => html`<div class="plugin-busy-item">${item.taskDescription}</div>`)}
+        </div>
+    </div>
+`;

package/src/api/plugin-busy-manager/plugin-busy-manager.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { PluginBusyManagerImpl } from "./plugin-busy-manager";
+
+describe("PluginBusyManagerImpl", () => {
+  let manager: PluginBusyManagerImpl;
+
+  beforeEach(() => {
+    manager = new PluginBusyManagerImpl();
+  });
+
+  it("should start with no busy plugins", () => {
+    expect(manager.getBusyPluginTasks()).toEqual([]);
+    expect(manager.isAnyPluginBusy()).toBe(false);
+  });
+
+  it("should add a busy plugin", () => {
+    const task = { taskId: "plugin1", taskDescription: "Description for plugin1" };
+    manager.addBusyPluginTask(task);
+    expect(manager.getBusyPluginTasks()).toContainEqual(task);
+    expect(manager.isAnyPluginBusy()).toBe(true);
+  });
+
+  it("should remove a busy plugin", () => {
+    const task1 = { taskId: "plugin1", taskDescription: "Description for plugin1" };
+    const task2 = { taskId: "plugin2", taskDescription: "Description for plugin2" };
+    manager.addBusyPluginTask(task1);
+    manager.addBusyPluginTask(task2);
+    manager.removeBusyPluginTask("plugin1");
+    expect(manager.getBusyPluginTasks()).not.toContainEqual(task1);
+    expect(manager.getBusyPluginTasks()).toContainEqual(task2);
+  });
+
+  it("should do nothing if removing a non-existent plugin", () => {
+    const task = { taskId: "plugin1", taskDescription: "Description for plugin1" };
+    manager.addBusyPluginTask(task);
+    manager.removeBusyPluginTask("nonexistent");
+    expect(manager.getBusyPluginTasks()).toEqual([task]);
+  });
+
+  it("should clear all busy plugins", () => {
+    const task1 = { taskId: "plugin1", taskDescription: "Description for plugin1" };
+    const task2 = { taskId: "plugin2", taskDescription: "Description for plugin2" };
+    manager.addBusyPluginTask(task1);
+    manager.addBusyPluginTask(task2);
+    manager.clearAllBusyPlugins();
+    expect(manager.getBusyPluginTasks()).toEqual([]);
+    expect(manager.isAnyPluginBusy()).toBe(false);
+  });
+});

package/src/api/plugin-busy-manager/plugin-busy-manager.ts

@@ -0,0 +1,38 @@
+export interface PluginBusyTask {
+  taskId: string;
+  taskDescription: string;
+}
+
+export abstract class PluginBusyManager {
+  abstract addBusyPluginTask(busyTask: PluginBusyTask): void;
+  abstract removeBusyPluginTask(taskId: string): any;
+  abstract clearAllBusyPlugins(): void;
+  abstract isAnyPluginBusy(): boolean;
+  abstract getBusyPluginTasks(): PluginBusyTask[];
+}
+export class PluginBusyManagerImpl implements PluginBusyManager {
+  private busyPluginTasks: PluginBusyTask[] = [];
+
+  public addBusyPluginTask(busyTask: PluginBusyTask): void {
+    this.busyPluginTasks.push(busyTask);
+  }
+
+  public removeBusyPluginTask(taskId: string): any {
+    const index = this.busyPluginTasks.findIndex((item) => item.taskId === taskId);
+    if (index > -1) {
+      this.busyPluginTasks.splice(index, 1);
+    }
+  }
+
+  public isAnyPluginBusy(): boolean {
+    return this.busyPluginTasks.length > 0;
+  }
+
+  public clearAllBusyPlugins(): void {
+    this.busyPluginTasks = [];
+  }
+
+  public getBusyPluginTasks(): PluginBusyTask[] {
+    return this.busyPluginTasks;
+  }
+}

package/src/api/token-manager/token-manager.test.ts

@@ -13,17 +13,5 @@ describe("Token Manager test", () => {
   it("should return initial token", () => {
     const tokenManager = createTokenManager();
     expect(tokenManager.getToken()).toBe(access_token);
-  });  
-
-  it("should refresh token", async () => {
-    const tokenManager = createTokenManager();
-    const refreshPromise = tokenManager.refreshToken();
-    const oldToken = tokenManager.getToken();
-    const newToken = await refreshPromise;
-    const newToken2 = tokenManager.getToken();
-    expect(newToken).toBe("new-auth-token");
-    expect(newToken).toBe(newToken2);
-    expect(newToken).not.toBe(oldToken);
-    expect(oldToken).toBe(access_token);
   });
 });

package/src/api/token-manager/token-manager.ts

@@ -1,3 +1,5 @@
+import axios from "axios";
+
 export interface TokenManager {
   getToken: () => string;
   refreshToken: () => Promise<string>;
@@ -5,7 +7,7 @@ export interface TokenManager {
 
 let token: string;
 let refreshToken: string;
-export class TokenManagerSimulator implements TokenManager {
+export class TokenManagerImpl implements TokenManager {
   getUrlParams = (): URLSearchParams => {
     return new URLSearchParams(window.location.search);
   };
@@ -14,7 +16,6 @@ export class TokenManagerSimulator implements TokenManager {
     const searchString = this.getUrlParams();
     token = searchString.get("access_token") || "";
     refreshToken = searchString.get("refresh_token") || "";
-
     return token;
   };
 
@@ -23,16 +24,20 @@ export class TokenManagerSimulator implements TokenManager {
   };
 
   refreshToken = async () => {
-    //sleep for 1 second change token and return token
-    await new Promise((resolve) => setTimeout(resolve, 200));
-    token = "new-auth-token";
-    return token;
+      const response = await axios.post('/api/token/refresh', {token: refreshToken});
+      const {access_token, refresh_token} = response.data;
+      if(!access_token){
+        throw new Error("Invalid refresh token response");
+      }
+      token = access_token;
+      refreshToken = refresh_token;
+      return token;
   };
 }
 let tokenManager;
 export const createTokenManager = () =>  {
   if(tokenManager) return tokenManager;
-  tokenManager = new TokenManagerSimulator();
+  tokenManager = new TokenManagerImpl();
   tokenManager.initToken();
   return tokenManager;
 }

package/src/disposer.ts

@@ -1,7 +1,6 @@
 import { shellApi } from "./api/api";
 import { teardownFeatures } from "./features/bootstrapper";
 export const disposeShell = () => {
-  shellApi.ecapEventManager.publish("CLOSE_REQUESTED_RECEIVED", "", {});
   teardownFeatures();
 };
 

package/src/events.ts

@@ -2,4 +2,5 @@ export const shellEvents = {
   openClinicalMonitoringRequested: "openClinicalMonitoringRequested",
   appCrashed: "appCrashed",
   mainViewChanged: "mainViewChanged",
+  refreshTokenFailed: "refreshTokenFailed",
 };

package/src/features/bootstrapper.ts

@@ -1,16 +1,19 @@
 import { PrimariaApi, shellApi } from "../api/api";
 import { container } from "../infrastructure/ioc/container";
 import { TYPES } from "../infrastructure/ioc/types";
+import { bootstrapExitShell, teardownExitShell } from "./exit/bootstrapper";
 import { bootstrapGetUserInfo, teardownGetUserInfo } from "./get-user-info/bootstrapper";
 import { GetUserInfo } from "./get-user-info/request";
 
 export const bootstrapFeatures = (api: PrimariaApi) => {
   container.bind(TYPES.primaryApi).toConstantValue(api);
   bootstrapGetUserInfo();
+  bootstrapExitShell();
   shellApi.broker.send(new GetUserInfo());
 };
 
 export const teardownFeatures = () => {
   teardownGetUserInfo();
+  teardownExitShell();
   container.unbindAll();
 };

package/src/features/exit/bootstrapper.ts

@@ -0,0 +1,17 @@
+import { shellApi } from "../../api/api";
+import { BrokerDisposableHandler } from "../../api/broker/primaria-broker";
+import { container } from "../../infrastructure/ioc/container";
+import { registerRequest } from "../utils";
+import { ExitShellHandler } from "./handler";
+import { ExitShell } from "./request";
+
+let request: BrokerDisposableHandler;
+
+export const bootstrapExitShell = () => {
+  teardownExitShell();
+  request = registerRequest(shellApi, container)(ExitShell, ExitShellHandler);
+};
+
+export const teardownExitShell = () => {
+  request?.dispose();
+};

package/src/features/exit/handler.ts

@@ -0,0 +1,51 @@
+import { CustomConfirmOptions, PrimariaApi } from "@uxland/primary-shell";
+import { TYPES } from "../../infrastructure/ioc/types";
+import { inject } from "inversify";
+import { ExitShell } from "./request";
+import { disposeShell, raiseCloseEvent } from "../../disposer";
+import { disposePlugins } from "../../handle-plugins";
+import { PluginBusyTask } from "../../api/plugin-busy-manager/plugin-busy-manager";
+import { PluginBusyList } from "../../api/plugin-busy-manager/plugin-busy-list/component";
+import { translate } from "../../locales";
+
+export class ExitShellHandler {
+  constructor(@inject(TYPES.primaryApi) private api: PrimariaApi) {}
+  async handle(message: ExitShell): Promise<void> {
+    try {
+      const busyTasks = this.api.pluginBusyManager.getBusyPluginTasks();
+      if (busyTasks.length > 0) {
+        const { confirmed } = await this.askForClose(busyTasks);
+        if (!confirmed) return;
+      }
+      disposeShell();
+
+      // Per si un plugin tarda molt en fer dispose, màxim deixarem 5 segons, per no interrompre el tancar infinitament
+      await Promise.race([
+        disposePlugins(), // S'intenta executar un dispose normal
+        this.timeout(5000), // Si passen 5s, es segueix amb l'execució
+      ]);
+
+      raiseCloseEvent();
+    } catch (error) {
+      this.api.interactionManager.notify({
+        type: "error",
+        message: error.message,
+      });
+    }
+  }
+
+  private askForClose(busyTasks: PluginBusyTask[]) {
+    return this.api.interactionManager.customConfirm({
+      title: translate("actions.askExit"),
+      componentConstructor: PluginBusyList,
+      type: "danger",
+      model: { busyTasks },
+      acceptLabel: "Si",
+      cancelLabel: "No",
+    } as CustomConfirmOptions<{ busyTasks: PluginBusyTask[] }>);
+  }
+
+  private timeout(ms: number) {
+    return new Promise<void>((resolve) => setTimeout(resolve, ms));
+  }
+}

package/src/features/exit/request.ts

@@ -0,0 +1,3 @@
+import { IRequest } from "@uxland/primary-shell";
+
+export class ExitShell implements IRequest<void> {}

package/src/handle-plugins.ts

@@ -1,11 +1,13 @@
 import { bootstrapPlugins as pluginBootstrapper } from "@uxland/harmonix";
-import type { PluginDefinition, Plugin as PluginType } from "@uxland/harmonix";
+import type { PluginDefinition, Plugin as PluginType, BootstrappedPlugin } from "@uxland/harmonix";
 export type { PluginDefinition, PluginInfo } from "@uxland/harmonix";
 import {
   initialize as activityHistoryInitialize,
   dispose as activityHistoryDispose,
 } from "./internal-plugins/activity-history/main";
-import { PrimariaApi, primariaApiFactory, shellApi } from "./api/api";
+import { PrimariaApi, primariaApiFactory } from "./api/api";
+
+let bootstrappedPlugins = [] as BootstrappedPlugin[];
 
 const internalPlugins: PluginDefinition[] = [
   {
@@ -20,12 +22,11 @@ const internalPlugins: PluginDefinition[] = [
 
 export const bootstrapPlugins = async (plugins: PluginDefinition[]) => {
   const finalPlugins = internalPlugins.concat(plugins || []);
-  const bootstrappedPlugins = await pluginBootstrapper(finalPlugins, primariaApiFactory);
-  return bootstrappedPlugins as Plugin[];
+  bootstrappedPlugins = await pluginBootstrapper(finalPlugins, primariaApiFactory);
 };
 
-export const disposePlugins = async (plugins: Plugin[]) => {
-  return Promise.all(plugins.map((plugin) => plugin.dispose(shellApi)));
+export const disposePlugins = async () => {
+  return Promise.all(bootstrappedPlugins.map((plugin: BootstrappedPlugin) => plugin.dispose()));
 };
 
 export type Plugin = PluginType<PrimariaApi>;

package/src/handle-views.ts

@@ -2,6 +2,7 @@ import { shellApi } from "./api/api";
 import { shellRegions } from "./api/region-manager/regions";
 import { clinicalMonitoringId, pocTestEventsId } from "./constants";
 import { shellEvents } from "./events";
+import { ExitShell } from "./features/exit/request";
 import { ClinicalMonitoring } from "./UI/components/clinical-monitoring/clinical-monitoring";
 import { PocEventsEcap } from "./UI/components/poc-events-ecap/poc-events-ecap";
 import { PrimariaNavItem } from "./UI/shared-components/primaria-nav-item/primaria-nav-item";
@@ -257,7 +258,9 @@ const registerUpperNavMenuViews = () => {
       const menuItem = new PrimariaNavItem({
         icon: "add_box",
         label: "Pàgina inici",
-        callbackFn: () => {},
+        callbackFn: () => {
+          shellApi.broker.send(new ExitShell());
+        },
       });
       return Promise.resolve(menuItem);
     },

package/src/internal-plugins/activity-history/activity-history-item/add/add-async-history-items/handler.ts

@@ -4,12 +4,14 @@ import { addBusyHistoryItem, removeBusyHistoryItem } from "../../list/handle-bus
 import { addErrorHistoryItem } from "../../list/handle-error/actions";
 import { addHistoryItemsCommand } from "../add-history-items/request";
 import { InjectAsyncHistoryItemsPayload } from "./request";
+import { validateAddAsyncCommand } from "./validate-add-async-items-command";
 
 export class InjectAsyncHistoryItemsHandler extends BaseHandler {
   async handle(payload: InjectAsyncHistoryItemsPayload) {
     this.store.dispatch(addBusyHistoryItem(payload.entityId));
     try {
       const items = await payload.asyncDataProvider();
+      validateAddAsyncCommand(payload, items);
       this.api.broker.send(addHistoryItemsCommand, {
         entityId: payload.entityId,
         items,

package/src/internal-plugins/activity-history/activity-history-item/add/add-async-history-items/validate-add-async-items-command.ts

@@ -0,0 +1,15 @@
+import { IActivityHistoryItem } from "../../domain/model";
+import { InjectAsyncHistoryItemsPayload } from "./request";
+
+export const validateAddAsyncCommand = (payload: InjectAsyncHistoryItemsPayload, items: IActivityHistoryItem[]) => {
+    if(payload.entityId !== payload.filters.id)
+        throw new Error("entityId and filters.id must be the same");
+    if(!payload.filters.title)
+        throw new Error("filters.title is required");
+    if(!payload.asyncDataProvider)
+        throw new Error("asyncDataProvider is required");
+    if(!payload.componentFactory)
+        throw new Error("componentFactory is required");
+    if(!payload.errorMessage)
+        throw new Error("errorMessage is required for failure asyncDataProviders");
+};

package/src/internal-plugins/activity-history/activity-history-item/add/add-history-items/reducer.ts

@@ -12,11 +12,14 @@ export function addActivityHistoryItemsReducer(
   }>,
 ) {
   const { id, items, componentFactory, searchPredicate } = action.payload;
-  state.collections = addItemsToCollection(
-    state.collections,
-    id,
-    items,
-    componentFactory,
-    searchPredicate,
-  );
+  return {
+    ...state,
+    collections: addItemsToCollection(
+      state.collections,
+      id,
+      items,
+      componentFactory,
+      searchPredicate,
+    ),
+  };
 }

package/src/internal-plugins/activity-history/activity-history-item/domain/model.ts

@@ -29,6 +29,10 @@ export interface IActivityHistoryItem {
   type?: string;
 }
 
+export interface IActivityHistoryItemWithComponent extends IActivityHistoryItem {
+  component: HTMLElement;
+}
+
 export interface IActivityHistoryItemCollection {
   id: string;
   items: IActivityHistoryItem[];

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-badges/active-filters-badges.ts

@@ -6,12 +6,11 @@ import { PrimariaApi } from "../../../../../../api/api";
 import { TYPES } from "../../../../infrastructure/ioc/types";
 import { template } from "./template";
 import styles from "./styles.css?inline";
-import {
-  activeGroupsWithEnabledFilters,
-  activityHistoryCustomFilterGroupsSelector,
-} from "../../custom-filters/selectors";
+import { activeGroupsWithEnabledFilters } from "../../custom-filters/selectors";
 import { SetCustomFilterValue } from "../../custom-filters/set-custom-filter-value/request";
-import { IActivityHistoryCustomFilterGroup } from "../../model";
+import { IActivityHistoryCustomFilterGroup, IActivityHistoryFilterGroup } from "../../model";
+import { activityHistoryEnabledCommonFiltersSelector } from "../../common-filters/selectors";
+import { SetCommonFilter } from "../../common-filters/set-common-filter/request";
 
 //@ts-ignore
 @customElement("active-filters-badges")
@@ -27,6 +26,11 @@ export class ActiveFiltersBadges extends LitElement {
   @lazyInject(TYPES.primaryApi)
   api: PrimariaApi;
 
+  activityHistoryCommonFiltersSelector;
+
+  @connectedProperty(activityHistoryEnabledCommonFiltersSelector)
+  enabledCommonFilters: IActivityHistoryFilterGroup[];
+
   @connectedProperty(activeGroupsWithEnabledFilters)
   enabledFilters: IActivityHistoryCustomFilterGroup[];
 
@@ -40,4 +44,8 @@ export class ActiveFiltersBadges extends LitElement {
       }),
     );
   }
+
+  _onDeleteCommonFilterValue(filterId: string) {
+    this.api.broker.send(new SetCommonFilter({ id: filterId, enabled: false }));
+  }
 }

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-badges/template.ts

@@ -1,6 +1,7 @@
 import { html, nothing } from "lit";
 import { ActiveFiltersBadges } from "./active-filters-badges";
 import { translate } from "../../../../localization";
+import { formatShowFilterTitle, normalizeDeletedFilterBooleanValue } from "../../utils";
 
 const MAX_VISIBLE_CHIPS = 5;
 
@@ -15,23 +16,46 @@ const renderChip = (id, filter, value, props) => html`
   ></dss-chip>
 `;
 
+const renderCommonChip = (filter, props) => html`
+  <dss-chip
+    label=${formatShowFilterTitle(filter.title)}
+    size="sm"
+    hasdelete
+    selected
+    @click=${() => props._onDeleteCommonFilterValue(filter.id)}
+    @onDelete=${() => props._onDeleteCommonFilterValue(filter.id)}
+  ></dss-chip>
+`;
+
 const renderFilterTitle = (title) => html`<div class="filter-title">${`${title}:`}</div>`;
 
 export const template = (props: ActiveFiltersBadges) => {
-  if (props.enabledFilters.length === 0) return nothing;
+  if (props.enabledFilters.length === 0 && props.enabledCommonFilters.length === 0) return nothing;
 
   let visibleCount = 0;
   const visibleChips: any[] = [];
   const hiddenElements: any[] = [];
   const hiddenChips: any[] = [];
 
+  for (const filter of props.enabledCommonFilters) {
+    const chip = renderCommonChip(filter, props);
+
+    if (visibleCount < MAX_VISIBLE_CHIPS) {
+      visibleChips.push(chip);
+      visibleCount++;
+    } else {
+      hiddenElements.push(chip);
+      hiddenChips.push(chip);
+    }
+  }
+
   for (const { title, id, filters } of props.enabledFilters) {
     let titleAddedToVisible = false;
     let titleAddedToHidden = false;
 
     for (const filter of filters) {
       for (const value of [...new Set(filter.enabledValues)]) {
-        const chip = renderChip(id, filter, value, props);
+        const chip = renderChip(id, filter, normalizeDeletedFilterBooleanValue(value), props);
 
         if (visibleCount < MAX_VISIBLE_CHIPS) {
           if (!titleAddedToVisible) {

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-header/active-filters-header.ts

@@ -4,11 +4,8 @@ import styles from "./styles.css?inline";
 import { customElement } from "lit/decorators.js";
 import { connectedProperty } from "../../../../infrastructure/state/connected-property";
 import { activityHistorySearchStringSelector } from "../../../search/selectors";
-import {
-  activityHistoryCustomFilterGroupsSelector,
-  areCustomFiltersActive,
-} from "../../custom-filters/selectors";
-import { IActivityHistoryCustomFilterGroup } from "../../model";
+import { areCustomFiltersActive } from "../../custom-filters/selectors";
+import { areCommonFiltersActive } from "../../common-filters/selectors";
 
 //@ts-ignore
 @customElement("active-filters-header")
@@ -24,9 +21,9 @@ export class ActiveFiltersHeader extends LitElement {
   @connectedProperty(activityHistorySearchStringSelector)
   searchString: string;
 
-  @connectedProperty(activityHistoryCustomFilterGroupsSelector)
-  filters: IActivityHistoryCustomFilterGroup[];
-
   @connectedProperty(areCustomFiltersActive)
   areCustomFiltersActive: boolean;
+
+  @connectedProperty(areCommonFiltersActive)
+  areCommonFiltersActive: boolean;
 }

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/active-filters-header/template.ts

@@ -3,7 +3,12 @@ import { ActiveFiltersHeader } from "./active-filters-header";
 import { when } from "lit/directives/when.js";
 
 export const template = (props: ActiveFiltersHeader) => {
-  if (!props.areCustomFiltersActive && props.searchString.length < 1) return nothing;
+  if (
+    !props.areCustomFiltersActive &&
+    !props.areCommonFiltersActive &&
+    props.searchString.length < 1
+  )
+    return nothing;
 
   return html`
     <div class="active-filters-header">

package/src/internal-plugins/activity-history/activity-history-item/filter/common-filters/selectors.ts

@@ -12,3 +12,13 @@ export const isEnabledCommonFilterSelector = (filterId: string) =>
     activityHistoryCommonFiltersSelector,
     (filterSpecs) => filterSpecs?.find((s) => s.id === filterId)?.enabled,
   );
+
+export const activityHistoryEnabledCommonFiltersSelector = createSelector(
+  activityHistoryCommonFiltersSelector,
+  (filters) => filters.filter((f) => f.enabled),
+);
+
+export const areCommonFiltersActive = createSelector(
+  activityHistoryEnabledCommonFiltersSelector,
+  (filters) => !!filters.length,
+);