roost.tools
Mirrored from GitHub
github.com/roostorg/coop
1import { gql } from '@apollo/client';
2
3import ComponentLoading from '../../../../../../components/common/ComponentLoading';
4
5import {
6 GQLConditionOutcome,
7 useGQLMatchingBankNamesQuery,
8} from '../../../../../../graphql/generated';
9import { getLocationDisplayName } from '../../../../../../models/locationBank';
10import { receivesRegexInput } from '../../../../../../models/signal';
11import {
12 getMatchingValuesType,
13 LeafConditionWithResult,
14 MatchingValueType,
15} from '../../../types';
16import RuleInsightsSampleDisabledTextTokenInput from '../RuleInsightsSampleDisabledTextTokenInput';
17import { coloredText, staticValue } from './RuleInsightsSampleDetailView';
18
19export default function RuleInsightsSampleDetailMatchingValues(props: {
20 condition: LeafConditionWithResult;
21}) {
22 const { condition } = props;
23 const { matchingValues, result } = condition;
24 const type = matchingValues
25 ? getMatchingValuesType(matchingValues)
26 : undefined;
27
28 gql`
29 query MatchingBankNames {
30 myOrg {
31 banks {
32 textBanks {
33 id
34 name
35 }
36 locationBanks {
37 id
38 name
39 }
40 hashBanks {
41 id
42 name
43 }
44 }
45 }
46 }
47 `;
48
49 const { loading, error, data } = useGQLMatchingBankNamesQuery({
50 skip:
51 !type ||
52 ![
53 MatchingValueType.TEXT_BANK,
54 MatchingValueType.LOCATION_BANK,
55 MatchingValueType.IMAGE_BANK,
56 ].includes(type),
57 });
58 const { textBanks, locationBanks, hashBanks } = data?.myOrg?.banks ?? {};
59
60 if (!matchingValues || !type || error) {
61 return null;
62 }
63 if (loading) {
64 return <ComponentLoading />;
65 }
66
67 const renderMatchingValuesStringsInput = (
68 strings: readonly string[],
69 outcome: GQLConditionOutcome | undefined,
70 matchedString: string | undefined,
71 isRegexCondition: boolean,
72 ) => {
73 if (!outcome || !matchedString) {
74 return (
75 <RuleInsightsSampleDisabledTextTokenInput
76 uniqueKey={strings.join('_')}
77 tokens={strings}
78 />
79 );
80 }
81 const matchedStringText = coloredText(outcome, matchedString);
82 return (
83 <div className="flex flex-col justify-start">
84 {/* This is a hidden component used to ensure the component is vertically centered */}
85 <div className="hidden">
86 Matched {isRegexCondition ? 'regex' : 'string'}: {matchedStringText}
87 </div>
88 <RuleInsightsSampleDisabledTextTokenInput
89 uniqueKey={strings.join('_')}
90 tokens={strings}
91 />
92 <div className="mx-2 font-bold text-center">
93 Matched {isRegexCondition ? 'regex' : 'string'}: {matchedStringText}
94 </div>
95 </div>
96 );
97 };
98
99 switch (type) {
100 case MatchingValueType.STRING:
101 return renderMatchingValuesStringsInput(
102 matchingValues.strings!,
103 result?.outcome,
104 result?.matchedValue ?? undefined,
105 Boolean(
106 condition.signal?.type && receivesRegexInput(condition.signal.type),
107 ),
108 );
109 case MatchingValueType.LOCATION:
110 return renderMatchingValuesStringsInput(
111 matchingValues.locations!.map(getLocationDisplayName),
112 result?.outcome,
113 result?.matchedValue ?? undefined,
114 false,
115 );
116 case MatchingValueType.TEXT_BANK:
117 return staticValue({
118 text: matchingValues
119 .textBankIds!.map((id) => textBanks?.find((it) => it.id === id)?.name)
120 .join(', '),
121 outcome: condition.result?.outcome,
122 matchedValue: condition.result?.matchedValue,
123 });
124 case MatchingValueType.LOCATION_BANK:
125 return staticValue({
126 text: matchingValues
127 .locationBankIds!.map(
128 (id) => locationBanks?.find((it) => it.id === id)?.name,
129 )
130 .join(', '),
131 outcome: condition.result?.outcome,
132 matchedValue: condition.result?.matchedValue,
133 });
134 case MatchingValueType.IMAGE_BANK:
135 return staticValue({
136 text: matchingValues
137 .imageBankIds!.map(
138 (id) => hashBanks?.find((it) => it.id === id)?.name,
139 )
140 .join(', '),
141 outcome: condition.result?.outcome,
142 matchedValue: condition.result?.matchedValue,
143 });
144 }
145}