feat: Attributes support for insert script #1386

nsrCodes · 2024-02-05T06:26:05Z

Schema changes

Adds attributes attribute to the script object (so inside the schema it is rule > pair > script.attributes)
script.value still only contains the raw code.

Validations

During Editing

only one html node
only the correct html node
no innerText for html of script rule of url type

On Save:

if JS code has document.onLoad in any way, and loadtime is AfterPageLoad: updates load time and shows editor toast, rule is not saved tho
if, even after all the ongoing validations, script.value contains html code, error toast is shown

New functionalities:

Code editor now have their own toasts

New UI:

…g to custom component

RuntimeTerror10 · 2024-02-05T08:05:53Z

Editor toast is visible even after saving the rule
https://app.requestly.io/sessions/saved/U0Ke8ci3CvlxlbaTSjgK

…ncements

sachinjain024 · 2024-02-06T15:15:18Z

...components/features/rules/RuleBuilder/Header/ActionButtons/CreateRuleButton/actions/index.js

+        return ruleData;
+      }
+
+      const ruleDataCopy = _.cloneDeep(ruleData);


Why do we need a deep copy of rule data? Can you also add a comment here?

RuleData is explicitly read-only (reference to value in store). Updating it directly is possible but leads to very messy code

Added a comment

@nsrCodes I am still not sure you really need to deep clone the ruleData

Looking at this code below 👇 You are again creating a new ruleObject with new rulePairs

Just sharing my understanding of ... operator

And, Please do not resolve any conversation just after your comment, let me resolve the conversation otherwise I will miss the responses.

This works for when we only need to change 1 level deep.
Here the whole object immutable, down to every scrip object which is why had to deep clone

...components/features/rules/RuleBuilder/Header/ActionButtons/CreateRuleButton/actions/index.js

sachinjain024 · 2024-02-06T15:20:10Z

...components/features/rules/RuleBuilder/Header/ActionButtons/CreateRuleButton/actions/index.js

+      const isCompatibleWithAttributesForScriptRule = isFeatureCompatible(FEATURES.SCRIPT_RULE_HTML_BLOCK);
+
+      if (!isCompatibleWithAttributesForScriptRule) {
+        return ruleData;
+      }


This should be moved into a separate function like checkScriptRuleVersionCompatibility()

function checkcheckScriptRuleVersionCompatibility() { // Check for Attributes support added in Feb 2024 const isCompatibleForAttribues = isFeatureCompatible(FEATURES.SCRIPT_RULE_ATTRIBUTES_SUPPORT); if (!isCompatibleForAttribues) return false; // We can similarly check other compatible things in future }

doing this just for this check would go agains the current convention across the code where we just use isFeatureCompatible(<feature>) for all such similar checks

but extracting that to a variable here does seem redundant so replaced that with the function call itself

sachinjain024 · 2024-02-06T15:20:43Z

...components/features/rules/RuleBuilder/Header/ActionButtons/CreateRuleButton/actions/index.js

+      const isCompatibleWithAttributesForScriptRule = isFeatureCompatible(FEATURES.SCRIPT_RULE_HTML_BLOCK);
+
+      if (!isCompatibleWithAttributesForScriptRule) {
+        return ruleData;
+      }
+
+      const ruleDataCopy = _.cloneDeep(ruleData);
+      const newPairs = [];
+
+      for (const pair of ruleDataCopy.pairs) {
+        const parsedPair = pair;
+        const newScripts = [];
+
+        for (const script of pair.scripts) {
+          let newScript = script;
+
+          const htmlNodeName = getHTMLNodeName(script.type, script.codeType);
+
+          if (script.type === GLOBAL_CONSTANTS.SCRIPT_TYPES.CODE) {
+            const res = await validateStringForSpecificHTMLNode(script.value, htmlNodeName);
+            if (!res.isValid) {
+              return {
+                error: res.validationError,
+                success: false,
+                message: res.errorMessage,
+                pairId: pair.id,
+              };
+            }
+            const { attributes, innerText: code } = extractInnerTextAndAttributesFromHTMLString(
+              script.value,
+              htmlNodeName
+            );
+            newScript = {
+              ...script,
+              attributes,
+              value: code,
+            };
+          } else if (script.type === GLOBAL_CONSTANTS.SCRIPT_TYPES.URL) {
+            const res = await validateStringForSpecificHTMLNode(script.wrapperElement, htmlNodeName);
+            if (!res.isValid) {
+              return {
+                error: res.validationError,
+                success: false,
+                message: res.errorMessage,
+                pairId: pair.id,
+              };


I think we should break down this code into smaller functions. It will also help in writing UTs.

sachinjain024 · 2024-02-08T00:24:15Z