[ENGG-1567 ENGG-1568] MV3: auto migration of rules

app/src/components/features/rules/RulePairs/Filters/index.jsx

@@ -19,11 +19,13 @@ import {
  trackRequestMethodFilterModifiedEvent,
  trackRequestPayloadKeyFilterModifiedEvent,
  trackRequestPayloadValueFilterModifiedEvent,
+ trackPageDomainsFilterModifiedEvent,
 } from "modules/analytics/events/common/rules/filters";
 import { setCurrentlySelectedRule } from "../../RuleBuilder/actions";
 import { ResponseRuleResourceType } from "types/rules";
 import { debounce, snakeCase } from "lodash";
 import { actions } from "store";
+import { isExtensionManifestVersion3 } from "actions/ExtensionActions";
 
 const { Text, Link } = Typography;
 
@@ -149,6 +151,10 @@ const Filters = (props) => {
  LOG_ANALYTICS.PAGE_URL_MODIFIED = () => {
  trackPageUrlFilterModifiedEvent(currentlySelectedRuleData.ruleType);
  };
+
+ LOG_ANALYTICS.PAGE_DOMAINS_MODIFIED = () => {
+ trackPageDomainsFilterModifiedEvent(currentlySelectedRuleData.ruleType);
+ };
  LOG_ANALYTICS.RESOURCE_TYPE_MODIFIED = () => {
  trackResourceTypeFilterModifiedEvent(currentlySelectedRuleData.ruleType);
  };
@@ -350,49 +356,89 @@ const Filters = (props) => {
  alignItems: "center",
  }}
  >
- <Col span={3}>
- <span>Page URL</span>
- </Col>
- <Col span={6} align="center">
- <Dropdown overlay={urlOperatorOptions} disabled={props.isInputDisabled}>
- <Text
- strong
- className="ant-dropdown-link cursor-pointer capitalize uppercase"
- onClick={(e) => {
- e.preventDefault();
- LOG_ANALYTICS.PAGE_URL_MODIFIED(e);
- }}
- >
- {getCurrentPageURLOperatorText()} <DownOutlined />
- </Text>
- </Dropdown>
- </Col>
- <Col span={12}>
- <Input
- placeholder={generatePlaceholderText(
- getObjectValue(
- currentlySelectedRuleData,
- pairIndex,
- APP_CONSTANTS.PATH_FROM_PAIR.SOURCE_PAGE_URL_OPERATOR
- )
- )}
- name="description"
- type="text"
- value={getObjectValue(
- currentlySelectedRuleData,
- pairIndex,
- APP_CONSTANTS.PATH_FROM_PAIR.SOURCE_PAGE_URL_VALUE
- )}
- onChange={(e) => {
- e?.preventDefault?.();
- updateSourceRequestPayload(e, APP_CONSTANTS.PATH_FROM_PAIR.SOURCE_PAGE_URL_VALUE);
- LOG_ANALYTICS.PAGE_URL_MODIFIED();
- }}
- disabled={getCurrentPageURLOperatorText() === "Select" ? true : props.isInputDisabled}
- />
- </Col>
- <Col align="right" span={3}>
- {renderClearFilterIcon(GLOBAL_CONSTANTS.RULE_SOURCE_FILTER_TYPES.PAGE_URL)}
+ {isExtensionManifestVersion3() ? (
+ <>
+ <Col span={5}>
+ <span>Page Domain</span>
+ </Col>
+ <Col span={17}>
+ <Input
+ placeholder={"mydomain.com"}
+ name="description"
+ type="text"
+ value={getObjectValue(
+ currentlySelectedRuleData,
+ pairIndex,
+ APP_CONSTANTS.PATH_FROM_PAIR.SOURCE_PAGE_DOMAINS
+ )}
+ onChange={(e) => {
+ e?.preventDefault?.();
+ dispatch(
+ actions.updateRulePairAtGivenPath({
+ pairIndex,
+ updates: {
+ [APP_CONSTANTS.PATH_FROM_PAIR.SOURCE_PAGE_DOMAINS]: [e.target.value],
+ },
+ })
+ );
+ LOG_ANALYTICS.PAGE_DOMAINS_MODIFIED();
+ }}
+ disabled={props.isInputDisabled}
+ />
+ </Col>
+ </>
+ ) : (
+ <>
+ <Col span={3}>
+ <span>Page URL</span>
+ </Col>
+ <Col span={6} align="center">
+ <Dropdown overlay={urlOperatorOptions} disabled={props.isInputDisabled}>
+ <Text
+ strong
+ className="ant-dropdown-link cursor-pointer capitalize uppercase"
+ onClick={(e) => {
+ e.preventDefault();
+ LOG_ANALYTICS.PAGE_URL_MODIFIED(e);
+ }}
+ >
+ {getCurrentPageURLOperatorText()} <DownOutlined />
+ </Text>
+ </Dropdown>
+ </Col>
+ <Col span={12}>
+ <Input
+ placeholder={generatePlaceholderText(
+ getObjectValue(
+ currentlySelectedRuleData,
+ pairIndex,
+ APP_CONSTANTS.PATH_FROM_PAIR.SOURCE_PAGE_URL_OPERATOR
+ )
+ )}
+ name="description"
+ type="text"
+ value={getObjectValue(
+ currentlySelectedRuleData,
+ pairIndex,
+ APP_CONSTANTS.PATH_FROM_PAIR.SOURCE_PAGE_URL_VALUE
+ )}
+ onChange={(e) => {
+ e?.preventDefault?.();
+ updateSourceRequestPayload(e, APP_CONSTANTS.PATH_FROM_PAIR.SOURCE_PAGE_URL_VALUE);
+ LOG_ANALYTICS.PAGE_URL_MODIFIED();
+ }}
+ disabled={getCurrentPageURLOperatorText() === "Select" ? true : props.isInputDisabled}
+ />
+ </Col>
+ </>
+ )}
+
+ <Col align="right" span={2}>
+ {renderClearFilterIcon(
+ isExtensionManifestVersion3()
+ ? GLOBAL_CONSTANTS.RULE_SOURCE_FILTER_TYPES.PAGE_DOMAINS
+ : GLOBAL_CONSTANTS.RULE_SOURCE_FILTER_TYPES.PAGE_URL
+ )}
  </Col>
  </Row>
  ) : null;

app/src/components/features/rules/RulePairs/Pairs/Rows/RowsMarkup/RequestSourceRow/index.js

@@ -22,6 +22,7 @@ import {
 } from "modules/analytics/events/features/testUrlModal";
 import { trackRuleFilterModalToggled } from "modules/analytics/events/common/rules/filters";
 import "./RequestSourceRow.css";
+import { isExtensionManifestVersion3 } from "actions/ExtensionActions";
 
 const { Text } = Typography;
 
@@ -126,23 +127,28 @@ const RequestSourceRow = ({ rowIndex, pair, pairIndex, ruleDetails, isInputDisab
  const renderSourceKeys = useMemo(() => {
  return (
  <Menu>
- {sourceKeys.map(({ id, title, ruleKey }) => (
- <Menu.Item
- key={id}
- onClick={(event) => {
- dispatch(
- actions.updateRulePairAtGivenPath({
- pairIndex,
- updates: {
- [APP_CONSTANTS.PATH_FROM_PAIR.RULE_KEYS]: ruleKey,
- },
- })
- );
- }}
- >
- {title}
- </Menu.Item>
- ))}
+ {sourceKeys.map(({ id, title, ruleKey }) => {
+ if (isExtensionManifestVersion3() && ruleKey === GLOBAL_CONSTANTS.RULE_KEYS.PATH) {
+ return null;
+ }
+ return (
+ <Menu.Item
+ key={id}
+ onClick={(event) => {
+ dispatch(
+ actions.updateRulePairAtGivenPath({
+ pairIndex,
+ updates: {
+ [APP_CONSTANTS.PATH_FROM_PAIR.RULE_KEYS]: ruleKey,
+ },
+ })
+ );
+ }}
+ >
+ {title}
+ </Menu.Item>
+ );
+ })}
  </Menu>
  );
  }, [dispatch, sourceKeys, pairIndex]);

app/src/config/constants/index.js

@@ -139,6 +139,7 @@ APP_CONSTANTS.PATH_FROM_PAIR = {
  SOURCE_REQUEST_PAYLOAD_KEY: "source.filters.requestPayload.key",
  SOURCE_REQUEST_PAYLOAD_OPERATOR: "source.filters.requestPayload.operator",
  SOURCE_REQUEST_PAYLOAD_VALUE: "source.filters.requestPayload.value",
+ SOURCE_PAGE_DOMAINS: "source.filters.pageDomains",
 };
 
 APP_CONSTANTS.GA_EVENTS = GA_EVENTS;

app/src/config/constants/sub/paths.js

@@ -687,6 +687,10 @@ PATHS.EXTENSION_INSTALLED = {};
 PATHS.EXTENSION_INSTALLED.RELATIVE = "/extension-installed";
 PATHS.EXTENSION_INSTALLED.ABSOLUTE = joinPaths(PATHS.LANDING, PATHS.EXTENSION_INSTALLED.RELATIVE);
 
+PATHS.EXTENSION_UPDATED = {};
+PATHS.EXTENSION_UPDATED.RELATIVE = "/extension-updated";
+PATHS.EXTENSION_UPDATED.ABSOLUTE = joinPaths(PATHS.LANDING, PATHS.EXTENSION_UPDATED.RELATIVE);
+
 // Mock Server V2
 PATHS.MOCK_SERVER_V2 = {};
 PATHS.MOCK_SERVER_V2.INDEX = "apis";

app/src/features/rules/modals/ImportRulesModal/actions/index.js

@@ -6,6 +6,8 @@ import Logger from "lib/logger";
 import { runRuleMigrations } from "utils/rules/ruleMigrations";
 import APP_CONSTANTS from "config/constants";
 import { RecordStatus } from "features/rules";
+import { isExtensionManifestVersion3 } from "actions/ExtensionActions";
+import { migrateRuleToMV3 } from "modules/extension/utils";
 //CONSTANTS
 const { RULES_LIST_TABLE_CONSTANTS } = APP_CONSTANTS;
 
@@ -78,9 +80,14 @@ const setUnknownGroupIdsToUngroupped = (rulesArray, groupsIdObject) => {
 
 export const processDataToImport = (incomingArray, user, allRules, overwrite = true) => {
  const data = filterRulesAndGroups(incomingArray);
- const rules = runRuleMigrations(data.rules.filter((object) => isObjectValid(object)));
+
+ let rules = runRuleMigrations(data.rules.filter((object) => isObjectValid(object)));
  const groups = data.groups.filter((object) => isObjectValid(object));
 
+ if (isExtensionManifestVersion3()) {
+ rules = rules.map((rule) => migrateRuleToMV3(rule));
+ }
+
  if (!overwrite) {
  setNewIdofRules(rules);
  setNewIdOfRulePairs(rules);

app/src/features/rules/screens/rulesList/components/RulesList/hooks/useFetchAndUpdateRules.tsx

@@ -6,12 +6,20 @@ import { StorageService } from "init";
 import { useDispatch } from "react-redux";
 import { isGroupsSanitizationPassed } from "components/features/rules/RulesIndexPage/actions";
 import { recordsActions } from "store/features/rules/slice";
-import { Group, Rule, RecordStatus, RecordType } from "features/rules/types/rules";
+import { Group, RecordStatus, RecordType, Rule } from "features/rules/types/rules";
 import { submitAttrUtil } from "utils/AnalyticsUtils";
 import APP_CONSTANTS from "config/constants";
 import { PREMIUM_RULE_TYPES } from "features/rules/constants";
 import Logger from "../../../../../../../../../common/logger";
 import { trackRulesListLoaded } from "features/rules/analytics";
+import { isExtensionManifestVersion3 } from "actions/ExtensionActions";
+import { getCurrentlyActiveWorkspace } from "store/features/teams/selectors";
+import {
+ detectAndGenerateMV3RulesMigrationData,
+ getMV3MigrationData,
+ migrateRuleToMV3,
+ saveMV3MigrationData,
+} from "modules/extension/utils";
 
 const TRACKING = APP_CONSTANTS.GA_EVENTS;
 
@@ -23,6 +31,8 @@ const useFetchAndUpdateRules = ({ setIsLoading }: Props) => {
  const appMode = useSelector(getAppMode);
  const isRulesListRefreshPending = useSelector(getIsRefreshRulesPending);
  const isRulesListHardRefreshPending = useSelector(getIsHardRefreshRulesPending);
+ const activeWorkspace = useSelector(getCurrentlyActiveWorkspace);
+
  const hasIsRulesListRefreshPendingChanged = useHasChanged(isRulesListRefreshPending);
  const hasIsRulesListHardRefreshPendingChanged = useHasChanged(isRulesListHardRefreshPending);
 
@@ -43,7 +53,38 @@ const useFetchAndUpdateRules = ({ setIsLoading }: Props) => {
  Promise.all([groupsPromise, rulesPromise])
  .then(async (data) => {
  const groups = data[0] as Group[];
- const rules = data[1] as Rule[];
+ let rules = data[1] as Rule[];
+
+ try {
+ if (isExtensionManifestVersion3()) {
+ const currentWorkspaceId = activeWorkspace?.id ?? "private";
+ const mv3MigrationData = getMV3MigrationData();
+
+ if (!mv3MigrationData?.[currentWorkspaceId]?.rulesMigrated) {
+ //TODO: rules types are not standardized. Need to standardize them
+
+ //@ts-ignore
+ const rulesMigrationData = detectAndGenerateMV3RulesMigrationData(rules, currentWorkspaceId);
+
+ //@ts-ignore
+ rules = rules.map((rule) => migrateRuleToMV3(rule));
+
+ StorageService(appMode)
+ .saveMultipleRulesOrGroups(rules, { workspaceId: activeWorkspace.id })
+ .then(() => {
+ saveMV3MigrationData({
+ ...mv3MigrationData,
+ [currentWorkspaceId]: {
+ rulesMigrated: true,
+ rulesMigrationData: rulesMigrationData,
+ },
+ });
+ });
+ }
+ }
+ } catch (e) {
+ console.error("DBG: Error in migrating rules to MV3", e);
+ }
 
  Logger.log("DBG: fetched data", JSON.stringify({ rules, groups }));
 
@@ -91,6 +132,7 @@ const useFetchAndUpdateRules = ({ setIsLoading }: Props) => {
  appMode,
  hasIsRulesListRefreshPendingChanged,
  hasIsRulesListHardRefreshPendingChanged,
+ activeWorkspace.id,
  ]);
 };
 

app/src/modules/analytics/events/common/rules/filters.js

@@ -5,6 +5,10 @@ export const trackPageUrlFilterModifiedEvent = (rule_type) => {
  trackRuleFilterModified("page_url", rule_type);
 };
 
+export const trackPageDomainsFilterModifiedEvent = (rule_type) => {
+ trackRuleFilterModified("page_domains", rule_type);
+};
+
 export const trackResourceTypeFilterModifiedEvent = (rule_type) => {
  trackRuleFilterModified("resource_type", rule_type);
 };

app/src/modules/extension/ruleParser/parseReplaceRule.ts → app/src/modules/extension/mv3RuleParser/parseReplaceRule.ts

@@ -1,5 +1,4 @@
 import { ReplaceRule } from "../../../types/rules";
-import { BLACKLISTED_DOMAINS } from "../constants";
 import { ExtensionRule, RuleActionType } from "../types";
 import { parseConditionFromSource } from "./utils";
 
@@ -10,18 +9,20 @@ const parseReplaceRule = (rule: ReplaceRule): ExtensionRule[] => {
 
  rule.pairs.forEach((rulePair, pairIndex) => {
  if (!rulePair.source.value) {
- extensionRules.push({
+ const ruleCondition = {
  condition: {
  regexFilter: `(.*)${rulePair.from}(.*)`,
- excludedRequestDomains: BLACKLISTED_DOMAINS,
+ ...parseConditionFromSource(rulePair.source),
  },
  action: {
  type: RuleActionType.REDIRECT,
  redirect: {
  regexSubstitution: `\\1${rulePair.to}\\2`,
  },
  },
- });
+ };
+ delete ruleCondition.condition.urlFilter;
+ extensionRules.push(ruleCondition);
  return;
  }