4919408640

Build # 4919408640

Build Type

push

github

Committed by GitHub

Commit Message

Merge pull request #6 from adobe/path_changes

Run Details

218 of 375 branches covered (58.13%)

Branch coverage included in aggregate %.

124 of 124 new or added lines in 8 files covered. (100.0%)

395 of 561 relevant lines covered (70.41%)

28.44 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

49.32

/src/view/dataElements/path/components/fields.jsx

/*
Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

/* eslint-disable jsx-a11y/anchor-is-valid */

import React, { useEffect, useState } from 'react';
import {
  Flex,
  Item,
  Picker,
  View,
  Link,
  Badge,
  Text
} from '@adobe/react-spectrum';
import Icon from '@spectrum-icons/workflow/Info';
import { Controller, useFormContext } from 'react-hook-form';
import WrappedTextField from '../../../components/wrappedTextField';
import ProgressCircle from '../../../components/progressCircle';
import ErrorMessage from '../../../components/errorMessage';
import loadExtensions from '../api/loadExtensions';
import actionSources from '../helpers/actionSources';
import WrappedComboBoxField from '../../../components/wrappedComboBox';

const getPath = (action, path, extension, extensions) => {
  let r = '';
  // eslint-disable-next-line default-case
  switch (action) {
    case 'event':
      r = `arc.event${path ? `.${path}` : ''}`;
      break;
    case 'xdm':
    case 'data':
      r = `arc.event.${action}${path ? `.${path}` : ''}`;
      break;
    case 'request':
      r = 'arc.request';
      break;
    case 'stash':
      // eslint-disable-next-line no-case-declarations
      const currentExtension = (extensions || []).filter(
        (x) => x.attributes.display_name === extension
      )[0];

      r = `arc.ruleStash${
        currentExtension ? `.${currentExtension.attributes.name}` : ``
      }${path && currentExtension ? `.${path}` : ''}`;

      break;
  }
  return r;
};

export default function PathFields({ renderedCycle }) {
  const [showProgressCircle, setShowProgressCircle] = useState(true);
  const [error, setError] = useState(false);
  const [extensions, setExtensions] = useState({});

  useEffect(() => {
    loadExtensions()
      .then((loadedExtensions) => {
        setExtensions(loadedExtensions.data);
        setShowProgressCircle(false);
      })
      .catch((e) => {
        setError(e);
      });
  }, [renderedCycle]);

  const { watch } = useFormContext();

  let action = watch('action');
  const path = watch('path');
  const extension = watch('extension');
  action = actionSources.getActionSourceId(action);

  const showPathInput = action && action !== 'request';

  return (
    <>
      {error && <ErrorMessage message={error.message} />}
      {!error && showProgressCircle && <ProgressCircle />}
      {!error && !showProgressCircle && (
        <Flex direction="column" gap="size-200">
          <View>
            Learn more about all the available{' '}
            <Link>
              <a
                href="https://experienceleague.adobe.com/docs/experience-platform/tags/extension-dev/edge/context.html?lang=en"
                rel="noreferrer"
                target="_blank"
              >
                Adobe Request Context (arc)
              </a>
            </Link>{' '}
            properties.
          </View>

          <Controller
            defaultValue=""
            name="action"
            render={({
              field: { onChange, onBlur, value },
              fieldState: { error: e }
            }) => {
              return (
                <Picker
                  label="I want to"
                  width="100%"
                  minWidth="size-3000"
                  maxWidth="size-6000"
                  items={actionSources
                    .getActionSourceNames()
                    .map((q) => ({ id: q, name: q }))}
                  selectedKey={value}
                  onSelectionChange={onChange}
                  onBlur={onBlur}
                  isRequired
                  necessityIndicator="label"
                  validationState={e ? 'invalid' : ''}
                  errorMessage={e}
                >
                  {(item) => <Item>{item.name}</Item>}
                </Picker>
              );
            }}
          />

          {action === 'stash' && (
            <WrappedComboBoxField
              name="extension"
              width="100%"
              minWidth="size-3000"
              maxWidth="size-6000"
              label="Extension"
              allowsCustomValue
              defaultItems={extensions.map((i) => ({
                id: i.attributes.name,
                name: i.attributes.display_name
              }))}
            />
          )}

          {showPathInput && (
            <WrappedTextField
              width="100%"
              minWidth="size-3000"
              maxWidth="size-6000"
              name="path"
              label="Path"
              isRequired={action === 'custom'}
              necessityIndicator={action === 'custom' && 'label'}
              description={
                action !== 'custom'
                  ? 'Add more paths segments to drill down inside the Request Context data.'
                  : ''
              }
            />
          )}

          {action && action !== 'custom' && (
            <Badge variant="info">
              <Icon aria-label="Information about field hashing" />
              <Text>
                The complete path used to find data will be:{' '}
                <strong>{getPath(action, path, extension, extensions)}</strong>
              </Text>
            </Badge>
          )}
        </Flex>
      )}
    </>
  );
}

1	/*
2	Copyright 2020 Adobe. All rights reserved.
3	This file is licensed to you under the Apache License, Version 2.0 (the "License");
4	you may not use this file except in compliance with the License. You may obtain a copy
5	of the License at http://www.apache.org/licenses/LICENSE-2.0
6
7	Unless required by applicable law or agreed to in writing, software distributed under
8	the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9	OF ANY KIND, either express or implied. See the License for the specific language
10	governing permissions and limitations under the License.
11	*/
12
13	/* eslint-disable jsx-a11y/anchor-is-valid */
14
15	import React, { useEffect, useState } from 'react';
16	import {
17	Flex,
18	Item,
19	Picker,
20	View,
21	Link,
22	Badge,
23	Text
24	} from '@adobe/react-spectrum';
25	import Icon from '@spectrum-icons/workflow/Info';
26	import { Controller, useFormContext } from 'react-hook-form';
27	import WrappedTextField from '../../../components/wrappedTextField';
28	import ProgressCircle from '../../../components/progressCircle';
29	import ErrorMessage from '../../../components/errorMessage';
30	import loadExtensions from '../api/loadExtensions';
31	import actionSources from '../helpers/actionSources';
32	import WrappedComboBoxField from '../../../components/wrappedComboBox';
33
34	const getPath = (action, path, extension, extensions) => {	1✔
35	let r = '';	×
36	// eslint-disable-next-line default-case
37	switch (action) {	×
38	case 'event':
39	r = `arc.event${path ? `.${path}` : ''}`;	×
40	break;	×
41	case 'xdm':
42	case 'data':
43	r = `arc.event.${action}${path ? `.${path}` : ''}`;	×
44	break;	×
45	case 'request':
46	r = 'arc.request';	×
47	break;	×
48	case 'stash':
49	// eslint-disable-next-line no-case-declarations
50	const currentExtension = (extensions \|\| []).filter(	×
51	(x) => x.attributes.display_name === extension	×
52	)[0];
53
54	r = `arc.ruleStash${	×
55	currentExtension ? `.${currentExtension.attributes.name}` : ``	×
56	}${path && currentExtension ? `.${path}` : ''}`;	×
57
58	break;	×
59	}
60	return r;	×
61	};
62
63	export default function PathFields({ renderedCycle }) {
64	const [showProgressCircle, setShowProgressCircle] = useState(true);	13✔
65	const [error, setError] = useState(false);	13✔
66	const [extensions, setExtensions] = useState({});	13✔
67
68	useEffect(() => {	13✔
69	loadExtensions()	3✔
70	.then((loadedExtensions) => {
71	setExtensions(loadedExtensions.data);	3✔
72	setShowProgressCircle(false);	3✔
73	})
74	.catch((e) => {
75	setError(e);	×
76	});
77	}, [renderedCycle]);
78
79	const { watch } = useFormContext();	13✔
80
81	let action = watch('action');	13✔
82	const path = watch('path');	13✔
83	const extension = watch('extension');	13✔
84	action = actionSources.getActionSourceId(action);	13✔
85
86	const showPathInput = action && action !== 'request';	13✔
87
88	return (	13✔
89	<>
90	{error && <ErrorMessage message={error.message} />}	13!
91	{!error && showProgressCircle && <ProgressCircle />}	29✔
92	{!error && !showProgressCircle && (	36✔
93	<Flex direction="column" gap="size-200">
94	<View>
95	Learn more about all the available{' '}
96	<Link>
97	<a
98	href="https://experienceleague.adobe.com/docs/experience-platform/tags/extension-dev/edge/context.html?lang=en"
99	rel="noreferrer"
100	target="_blank"
101	>
102	Adobe Request Context (arc)
103	</a>
104	</Link>{' '}
105	properties.
106	</View>
107
108	<Controller
109	defaultValue=""
110	name="action"
111	render={({
112	field: { onChange, onBlur, value },
113	fieldState: { error: e }
114	}) => {
115	return (	10✔
116	<Picker
117	label="I want to"
118	width="100%"
119	minWidth="size-3000"
120	maxWidth="size-6000"
121	items={actionSources
122	.getActionSourceNames()
123	.map((q) => ({ id: q, name: q }))}	60✔
124	selectedKey={value}
125	onSelectionChange={onChange}
126	onBlur={onBlur}
127	isRequired
128	necessityIndicator="label"
129	validationState={e ? 'invalid' : ''}	10!
130	errorMessage={e}
131	>
132	{(item) => <Item>{item.name}</Item>}	60✔
133	</Picker>
134	);
135	}}
136	/>
137
138	{action === 'stash' && (	10!
139	<WrappedComboBoxField
140	name="extension"
141	width="100%"
142	minWidth="size-3000"
143	maxWidth="size-6000"
144	label="Extension"
145	allowsCustomValue
146	defaultItems={extensions.map((i) => ({	×
147	id: i.attributes.name,
148	name: i.attributes.display_name
149	}))}
150	/>
151	)}
152
153	{showPathInput && (	20✔
154	<WrappedTextField
155	width="100%"
156	minWidth="size-3000"
157	maxWidth="size-6000"
158	name="path"
159	label="Path"
160	isRequired={action === 'custom'}
161	necessityIndicator={action === 'custom' && 'label'}	20✔
162	description={
163	action !== 'custom'	10!
164	? 'Add more paths segments to drill down inside the Request Context data.'
165	: ''
166	}
167	/>
168	)}
169
170	{action && action !== 'custom' && (	20!
171	<Badge variant="info">
172	<Icon aria-label="Information about field hashing" />
173	<Text>
174	The complete path used to find data will be:{' '}
175	<strong>{getPath(action, path, extension, extensions)}</strong>
176	</Text>
177	</Badge>
178	)}
179	</Flex>
180	)}
181	</>
182	);
183	}

adobe / reactor-extension-core-edge / 4919408640

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous