Searchsetting-like-macos

Author: Manik-Khajuria-5

packages/volto/news/news.internal

@@ -0,0 +1 @@
+Introduces a global search for Control Panel settings, not just control panel names. @Manik-Khajuria-5

packages/volto/src/actions/controlpanels/controlpanels.js

@@ -11,8 +11,10 @@ import {
   UPDATE_CONTROLPANEL,
   SYSTEM_INFORMATION,
   DATABASE_INFORMATION,
+  GET_CONTROLPANEL_SCHEMAS,
 } from '@plone/volto/constants/ActionTypes';
 import { getSite } from '@plone/volto/actions/site/site';
+import { fetchControlpanelSchemas } from '@plone/volto/components/manage/Controlpanels/utils';
 
 /**
  * Get controlpanel function.
@@ -121,3 +123,20 @@ export function getDatabaseInformation() {
     },
   };
 }
+
+export function getControlpanelSchemas(ids) {
+  return async (dispatch, getState) => {
+    const currentSchemas = getState().controlpanels?.schemas || {};
+
+    const schemasObject = await fetchControlpanelSchemas(
+      ids,
+      currentSchemas,
+      dispatch,
+    );
+
+    return dispatch({
+      type: `${GET_CONTROLPANEL_SCHEMAS}_SUCCESS`,
+      result: schemasObject,
+    });
+  };
+}

packages/volto/src/components/manage/Controlpanels/utils.js

@@ -0,0 +1,166 @@
+/**
+ * @module components/manage/Controlpanels/utils
+ */
+
+import { getControlpanel } from '@plone/volto/actions/controlpanels/controlpanels';
+import last from 'lodash/last';
+
+/**
+ * @function fetchControlpanelSchemas
+ * @param {Array<string>} ids
+ * @param {Object} currentSchemas
+ * @param {Function} dispatch
+ * @returns {Promise<Object>}
+ */
+
+export async function fetchControlpanelSchemas(ids, currentSchemas, dispatch) {
+  const idsToFetch = ids.filter((id) => !currentSchemas[id]);
+
+  if (idsToFetch.length === 0) {
+    return {};
+  }
+
+  const schemaPromises = idsToFetch.map(async (id) => {
+    try {
+      const result = await dispatch(getControlpanel(id));
+      return { panelId: id, schema: result };
+    } catch (error) {
+      error.panelId = id;
+      return { panelId: id, schema: null, error };
+    }
+  });
+
+  const schemaResults = await Promise.allSettled(schemaPromises);
+
+  const schemasObject = {};
+  schemaResults.forEach((result) => {
+    if (result.status === 'fulfilled') {
+      const { panelId, schema } = result.value;
+      if (schema) {
+        schemasObject[panelId] = schema;
+      }
+    }
+  });
+
+  return schemasObject;
+}
+
+/**
+ * @function searchSchemaFields
+ * @param {Object} schema
+ * @param {string} query
+ * @param {string} schemaId
+ * @returns {Array}
+ */
+function searchSchemaFields(schema, query, schemaId) {
+  if (
+    !schema ||
+    typeof schema !== 'object' ||
+    !query ||
+    query.trim().length < 2
+  ) {
+    return [];
+  }
+
+  const actualSchema = schema.schema || schema;
+  const panelTitle = (schema.title || schema.id).toLowerCase().trim();
+  const searchTerm = query.trim().toLowerCase();
+  const matches = [];
+  const properties = actualSchema.properties || {};
+  const fieldsets = actualSchema.fieldsets || [];
+
+  fieldsets.forEach((fieldset) => {
+    const fieldsetFeilds = fieldset.fields;
+
+    fieldsetFeilds.forEach((fieldName) => {
+      if (typeof fieldName !== 'string') {
+        return;
+      }
+
+      const fieldNameLower = fieldName.toLowerCase();
+      let isMatch = fieldNameLower.includes(searchTerm);
+      isMatch = isMatch || panelTitle.includes(searchTerm);
+
+      const fieldProperty = properties[fieldName];
+      let matchedValue = fieldName;
+
+      if (fieldProperty) {
+        const title = fieldProperty.title || '';
+        const description = fieldProperty.description || '';
+
+        if (title.toLowerCase().includes(searchTerm)) {
+          isMatch = true;
+          matchedValue = title;
+        } else if (description.toLowerCase().includes(searchTerm)) {
+          isMatch = true;
+          matchedValue = description;
+        } else if (isMatch) {
+          matchedValue = title || fieldName;
+        }
+      }
+
+      if (isMatch) {
+        matches.push({
+          id: `${schemaId}-${fieldName}`,
+          title: fieldName.toUpperCase().replace(/_/g, ' '),
+          key: fieldName.replace(/_/g, ' '),
+          value: matchedValue,
+          url: `/controlpanel/${schemaId}#${fieldName}`,
+          schemaId,
+        });
+      }
+    });
+  });
+
+  return matches;
+}
+
+/**
+ * @function searchSettings
+ * @param {Array} controlpanels
+ * @param {Object} schemas
+ * @param {string} query
+ * @returns {Array}
+ */
+
+export function searchSettings(controlpanels, schemas, query) {
+  if (!query || query.trim().length < 2) {
+    return [];
+  }
+
+  const groupedMatches = {};
+
+  for (const panel of controlpanels) {
+    const panelId = last(panel['@id']?.split('/')) || panel.id;
+    const schema = schemas[panelId];
+
+    if (!schema) {
+      continue;
+    }
+
+    const matches = searchSchemaFields(schema, query, panelId);
+
+    if (matches.length > 0) {
+      if (!groupedMatches[panelId]) {
+        groupedMatches[panelId] = {
+          title: panel.title || panelId,
+          group: panel.group || '',
+          panelId,
+          url: `/controlpanel/${panelId}`,
+          matches: [],
+        };
+      }
+
+      matches.forEach((match) => {
+        groupedMatches[panelId].matches.push({
+          key: match.key,
+          value: match.value,
+          title: match.title,
+          url: match.url,
+        });
+      });
+    }
+  }
+
+  return Object.values(groupedMatches);
+}