Add support for dynamic variables in API requests

Introduced the ability to use configurable variables in API URLs, headers, and bodies for the remote-select plugin. Updated relevant service methods, configuration, and documentation to support this feature. Minor type and field adjustments were also applied for better consistency.

Resolved: #4

Author: nvxdm

README.md

@@ -74,6 +74,41 @@ Advanced settings:
 | Multi mode    | `string` |             |
 | Private field | `string` |             |
 
+
+## Variables in API Requests
+The plugin now supports using variables in your API URLs, headers, and request bodies.
+This allows for dynamic configuration of your API requests.
+
+### Setting up variables
+Add variables to your plugin configuration in `config/plugins.js`:
+
+``` js
+module.exports = {
+  "remote-select": {
+    enabled: true,
+    variables: {
+      apiBaseUrl: "https://api.example.com",
+      apiVersion: "v2",
+      authToken: "your-auth-token"
+    }
+  },
+};
+```
+
+### Using variables
+You can use variables in your configuration by surrounding the variable name with curly braces:
+- In API URLs: `{apiBaseUrl}/products/{apiVersion}/list`
+- In request headers: `Authorization: Bearer {authToken}`
+- In request bodies: `{ "version": "{apiVersion}" }`
+
+Variables provide a convenient way to:
+- Manage environment-specific API endpoints
+- Share authentication tokens across multiple select configurations
+- Update common values in one place instead of modifying each select configuration
+
+If a variable isn't defined in your configuration, the placeholder will remain unchanged in the request.
+
+
 ### Remote select input
 
 Depends on `multi` option you will have in the model a single string from selected `value` option or array of selected `value` string.
@@ -169,3 +204,4 @@ and as a result, we have: (single mode)
 multiple mode:
 
 ![Searchable remote select multi input](https://github.com/dmitriy-nz/strapi-plugin-remote-select/raw/main/screenshots/searchable-remote-select-input.multiple.gif)
+

admin/src/components/RemoteSelect/registerRemoteSelect.ts

@@ -8,7 +8,7 @@ export function registerRemoteSelect(app: any): void {
   app.customFields.register({
     name: "remote-select",
     pluginId: pluginId,
-    type: "string",
+    type: "text",
     intlLabel: {
       id: getTrad("remote-select.label"),
       defaultMessage: "Remote select",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "strapi-plugin-remote-select",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A powerful tool that adds select type inputs to your strapi with the ability to dynamically load options via API. Supports static and searchable endpoints—autocomplete.",
   "keywords": [
     "strapi select",

server/config/index.ts

@@ -1,4 +1,8 @@
+import { RemoteSelectPluginOptions } from "../../types/RemoteSelectPluginOptions";
+
 export default {
-  default: {},
+  default: {
+    variables: {},
+  } as RemoteSelectPluginOptions,
   validator() {},
 };

server/services/OptionsProxy.service.ts

@@ -2,25 +2,43 @@ import { Strapi } from "@strapi/strapi";
 import * as jp from "jsonpath";
 import { FlexibleSelectMappingConfig } from "../../types/FlexibleSelectConfig";
 import { RemoteSelectFetchOptions } from "../../types/RemoteSelectFetchOptions";
+import { RemoteSelectPluginOptions } from "../../types/RemoteSelectPluginOptions";
 import { SearchableRemoteSelectValue } from "../../types/SearchableRemoteSelectValue";
 
 export default ({ strapi }: { strapi: Strapi }) => ({
+  /**
+   * Fetches options based on a provided configuration object, processes the response,
+   * and maps the data into the desired format.
+   *
+   * @param  config - The configuration object containing fetch details,
+   * including URL, method, headers, body, and mapping instructions for processing the response.
+   * @return  A promise that resolves to the processed options extracted and mapped from the response.
+   */
   async getOptionsByConfig(config: RemoteSelectFetchOptions) {
-    const res = await fetch(config.fetch.url, {
+    const res = await fetch(this.replaceVariables(config.fetch.url), {
       method: config.fetch.method,
       headers: this.parseStringHeaders(config.fetch.headers),
-      body: config.fetch.body,
+      body: config.fetch.body ? this.replaceVariables(config.fetch.body) : "",
     });
+
     const response = await res.json();
 
     return this.parseOptions(response, config.mapping);
   },
 
+  /**
+   * Parses a string of headers into an object where each key is a header name and each value is the corresponding header value.
+   *
+   * @param [headers] - A string representing the headers, where each header is separated by a newline and the key-value pairs are separated by a colon.
+   * @return An object containing the parsed headers where the keys are the header names in lowercase, and the values are the corresponding header values.
+   */
   parseStringHeaders(headers?: string): Record<string, string> {
     if (!headers) return {};
 
     const result: Record<string, string> = {};
 
+    headers = this.replaceVariables(headers);
+
     const headersArr = this.trim(headers).split("\n");
 
     for (let i = 0; i < headersArr.length; i++) {
@@ -39,10 +57,23 @@ export default ({ strapi }: { strapi: Strapi }) => ({
     return result;
   },
 
+  /**
+   * Removes leading and trailing whitespace characters from a given string.
+   *
+   * @param {string} val - The string to be trimmed.
+   * @return {string} The trimmed string without leading or trailing whitespace.
+   */
   trim(val: string): string {
     return val.replace(/^\s+|\s+$/g, "");
   },
 
+  /**
+   * Parses options from the provided response using the given mapping configuration.
+   *
+   * @param {any} response - The JSON response to parse and extract options from.
+   * @param  mappingConfig - The configuration defining the paths for extracting values and labels.
+   * @return {SearchableRemoteSelectValue[]} An array of unique options with `value` and `label` properties.
+   */
   parseOptions(
     response: any,
     mappingConfig: FlexibleSelectMappingConfig,
@@ -80,11 +111,6 @@ export default ({ strapi }: { strapi: Strapi }) => ({
         };
       });
 
-    /**
-     * Map variable that stores unique values of SearchableRemoteSelectValue objects.
-     *
-     * @type {Map<string, SearchableRemoteSelectValue>}
-     */
     const uniqueValuesOptionsMap: Map<string, SearchableRemoteSelectValue> =
       preparedOptionsArray.reduce(
         (
@@ -100,7 +126,7 @@ export default ({ strapi }: { strapi: Strapi }) => ({
       );
 
     /**
-     *
+     * Convert Map to array of unique values
      */
     return Array.from(uniqueValuesOptionsMap.values());
   },
@@ -127,4 +153,26 @@ export default ({ strapi }: { strapi: Strapi }) => ({
 
     return value;
   },
+
+  /**
+   * Replaces variables in a given string with corresponding values from the configuration.
+   * Variables in the input string are denoted by `{variableName}`.
+   *
+   * @param {string} str - The input string containing variables to be replaced.
+   * @return {string} The string with variables replaced by their corresponding values.
+   * If a variable does not exist in the configuration, it remains unchanged.
+   */
+  replaceVariables(str: string): string {
+    const variables =
+      strapi.config.get<RemoteSelectPluginOptions>("plugin.remote-select")
+        ?.variables ?? {};
+
+    if (!str || typeof str !== "string") {
+      return str;
+    }
+
+    return str.replace(/\{([^}]+)\}/g, (match, key) => {
+      return variables[key] !== undefined ? String(variables[key]) : match;
+    });
+  },
 });

types/RemoteSelectPluginOptions.ts

@@ -0,0 +1,3 @@
+export interface RemoteSelectPluginOptions {
+  variables: Record<string, string | number>;
+}