refactor logic for showing warning. use across instances

src/components/sections/Filter.js

@@ -8,6 +8,7 @@ import {
   Filter as FilterQuery, withFieldConnector, withStoreConnector, ruleValidator,
 } from '../Query';
 import Tip from '../Tip';
+import { getEdgeFilteringWarning } from './SociogramPrompts/selectors';
 
 const FilterField = withFieldConnector(withStoreConnector(FilterQuery));
 
@@ -49,15 +50,14 @@ const Filter = () => {
     (prompt) => prompt.edges.display,
   );
 
-  const ruleEdgeTypes = currentValue?.rules.filter((rule) => rule.type === 'edge').map((rule) => rule.options.type);
-  // show warning if there are creation or display values that will not be shown based on filters
-  const shouldShowWarning = edgeCreationValues.some(
-    (edgeCreationValue) => !ruleEdgeTypes.includes(edgeCreationValue),
-  ) || edgeDisplayValues.some(
-    (edgeDisplayValue) => !edgeDisplayValue.some(
-      (edge) => ruleEdgeTypes.includes(edge),
-    ),
-  );
+  let shouldShowWarning = false;
+
+  if (edgeCreationValues.length > 0 || edgeDisplayValues.length > 0) {
+    shouldShowWarning = getEdgeFilteringWarning(
+      currentValue.rules,
+      [...edgeCreationValues, ...edgeDisplayValues],
+    );
+  }
 
   const handleToggleChange = useCallback(
     async (newState) => {

src/components/sections/SociogramPrompts/PromptFieldsEdges.js

@@ -7,7 +7,7 @@ import { change, Field, formValueSelector } from 'redux-form';
 import * as Fields from '@codaco/ui/lib/components/Fields';
 import { Section, Row } from '@components/EditorLayout';
 import Tip from '../../Tip';
-import { getEdgesForSubject } from './selectors';
+import { getEdgeFilteringWarning, getEdgesForSubject } from './selectors';
 
 const DisplayEdges = ({ form, entity, type }) => {
   const dispatch = useDispatch();
@@ -35,10 +35,7 @@ const DisplayEdges = ({ form, entity, type }) => {
   const currentFilters = useSelector((state) => getStageValue(state, 'filter'));
   const edgeFilters = currentFilters.rules.filter((rule) => rule.type === 'edge');
 
-  // TODO: look at this logic to see if it's correct for all cases
-  const selectedEdgesNotInFilters = displayEdges.filter(
-    (selectedEdge) => !edgeFilters.some((edgeFilter) => edgeFilter.options.type === selectedEdge),
-  );
+  const shouldShowNetworkFilterWarning = getEdgeFilteringWarning(edgeFilters, displayEdges);
 
   return (
     <>
@@ -69,7 +66,7 @@ const DisplayEdges = ({ form, entity, type }) => {
         }}
       >
         <Row>
-          {selectedEdgesNotInFilters.length > 0 && (
+          {shouldShowNetworkFilterWarning && (
           <Tip type="warning">
             <p>
               One or more of the selected edge types are not currently included in the

src/components/sections/SociogramPrompts/PromptFieldsTapBehaviour.js

@@ -9,10 +9,9 @@ import Tip from '@components/Tip';
 import EntitySelectField from '../fields/EntitySelectField/EntitySelectField';
 import DetachedField from '../../DetachedField';
 import VariablePicker from '../../Form/Fields/VariablePicker/VariablePicker';
-import { getHighlightVariablesForSubject } from './selectors';
+import { getHighlightVariablesForSubject, getEdgeFilteringWarning } from './selectors';
 import { actionCreators as codebookActions } from '../../../ducks/modules/protocol/codebook';
-import { asOptions } from '../../../selectors/utils';
-import { getEdgeTypes } from '../../../selectors/codebook';
+
 // TODO: Move this somewhere else!
 // This was created as part of removing the HOC pattern used throughout the app.
 // It replaces withCreateVariableHandler. Other uses of this handler could be
@@ -103,25 +102,14 @@ const TapBehaviour = ({
     return true;
   };
 
-  const edgeOptions = useSelector((state) => asOptions(getEdgeTypes(state)));
-
-  // get selected value
   const selectedValue = useSelector((state) => getFormValue(state, 'edges.create'));
 
   // get the current edge filters from the stage
   const getStageValue = formValueSelector('edit-stage');
   const currentFilters = useSelector((state) => getStageValue(state, 'filter'));
   const edgeFilters = currentFilters.rules.filter((rule) => rule.type === 'edge');
 
-  // get selected edges from options
-  const selectedEdges = edgeOptions.filter((option) => option.value === selectedValue);
-
-  // TODO: look at this logic to see if it's correct for all cases
-  const selectedEdgesNotInFilters = selectedEdges.filter(
-    (selectedEdge) => !edgeFilters.some(
-      (edgeFilter) => edgeFilter.options.type === selectedEdge.value,
-    ),
-  );
+  const showNetworkFilterWarning = getEdgeFilteringWarning(edgeFilters, [selectedValue]);
 
   return (
     <Section
@@ -191,7 +179,7 @@ const TapBehaviour = ({
         )}
         { tapBehaviour === TAP_BEHAVIOURS.CREATE_EDGES && (
         <>
-          {selectedEdgesNotInFilters.length > 0 && (
+          {showNetworkFilterWarning && (
           <Tip type="warning">
             <p>
               The selected edge type is not currently included in the stage-level network filtering.

src/components/sections/SociogramPrompts/selectors.js

@@ -32,3 +32,41 @@ export const getEdgesForSubject = (state) => {
 
   return codebookOptions;
 };
+
+// compare selected edges to edge filters
+// there are four cases to consider:
+// 1. selected edge is in the filters with rule EXISTS -- no warning
+// 2. selected edge is not in the filters with rule EXISTS -- show a warning
+// 3. selected edge is in the filters with rule DOES_NOT_EXIST -- show a warning
+// 4. selected edge is not in the filters with rule DOES_NOT_EXIST -- no warning
+
+export const getEdgeFilteringWarning = (filters, edges) => {
+  const existFilters = filters.filter((rule) => rule.options.operator === 'EXISTS');
+  const doesNotExistFilters = filters.filter((rule) => rule.options.operator === 'NOT_EXISTS');
+
+  // if any edge should show a warning, return true
+  return edges.some((edge) => {
+    const isEdgeInExistFilters = existFilters.some((rule) => rule.options.type === edge);
+    const isEdgeInDoesNotExistFilters = doesNotExistFilters.some(
+      (rule) => rule.options.type === edge,
+    );
+
+    // case 1
+    if (isEdgeInExistFilters) {
+      return false;
+    }
+
+    // case 2
+    if (!isEdgeInExistFilters && existFilters.length > 0) {
+      return true;
+    }
+
+    // case 3
+    if (isEdgeInDoesNotExistFilters) {
+      return true;
+    }
+
+    // No warning in other cases
+    return false;
+  });
+};