Skip to content

Commit 86fffb0

Browse files
RWilcox-Reapitwillmcvayplittlewood-rpt
authored
Update to pop modal on referral write scope (#10579)
Co-authored-by: Will McVay <[email protected]> Co-authored-by: Pete Littlewood <[email protected]>
1 parent c20a710 commit 86fffb0

File tree

4 files changed

+259
-8
lines changed

4 files changed

+259
-8
lines changed

‎docker-compose.yml

+11
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,14 @@ services:
6161
yarn:
6262
condition: service_completed_successfully
6363
command: yarn start
64+
marketplace-management:
65+
<<: [*dontstart, *node]
66+
working_dir: /foundations/packages/marketplace-management
67+
ports:
68+
- "8080:8080"
69+
environment:
70+
- NPM_TOKEN=${NPM_TOKEN}
71+
depends_on:
72+
yarn:
73+
condition: service_completed_successfully
74+
command: yarn start

‎packages/marketplace-management/src/components/ui/apps/__tests__/__snapshots__/app-referrals-confirm.test.tsx.snap

+231-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ exports[`ReferralsConfirmationSelection should render component with props and l
99
<mock-styled.p
1010
classname="mock-css."
1111
>
12-
This app has requested to read ‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
12+
This app has requested to
13+
read
14+
‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
1315
</mock-styled.p>
1416
<mock-styled.div>
1517
<mock-styled.div
@@ -46,7 +48,9 @@ exports[`ReferralsConfirmationSelection should render component with props and l
4648
<mock-styled.p
4749
classname="mock-css."
4850
>
49-
This app has requested to read ‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
51+
This app has requested to
52+
read
53+
‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
5054
</mock-styled.p>
5155
<mock-styled.div>
5256
<mock-styled.div
@@ -140,7 +144,9 @@ exports[`ReferralsConfirmationSelection should render component with props with
140144
<mock-styled.p
141145
classname="mock-css."
142146
>
143-
This app has requested to read ‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
147+
This app has requested to
148+
read
149+
‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
144150
</mock-styled.p>
145151
<mock-styled.div>
146152
<mock-styled.div
@@ -219,7 +225,228 @@ exports[`ReferralsConfirmationSelection should render component with props with
219225
<mock-styled.p
220226
classname="mock-css."
221227
>
222-
This app has requested to read ‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
228+
This app has requested to
229+
read
230+
‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
231+
</mock-styled.p>
232+
<mock-styled.div>
233+
<mock-styled.div
234+
classname="mock-css.
235+
margin-bottom: 0.75rem;
236+
"
237+
>
238+
<mock-styled.input
239+
checked="true"
240+
classname=""
241+
id="test-static-id"
242+
type="checkbox"
243+
/>
244+
<mock-styled.label
245+
htmlfor="test-static-id"
246+
>
247+
Install for selected referrals only
248+
</mock-styled.label>
249+
</mock-styled.div>
250+
</mock-styled.div>
251+
<mock-styled.div>
252+
<mock-styled.div>
253+
<mock-styled.input
254+
id="select-referrals-to-install"
255+
/>
256+
<mock-styled.div
257+
classname="mock-css.
258+
margin-bottom: 1.25rem;
259+
"
260+
>
261+
<mock-styled.span
262+
classname="mock-css.
263+
margin-left: 0.375rem;
264+
mock-css. mock-css.
265+
font-size: 1.5rem;
266+
"
267+
>
268+
<svg />
269+
</mock-styled.span>
270+
<p>
271+
Select at least one referral or un-tick the above checkbox to select all
272+
</p>
273+
</mock-styled.div>
274+
<mock-styled.div
275+
classname="mock-css.
276+
margin-bottom: 1.25rem;
277+
"
278+
>
279+
<mock-styled.input
280+
id="test-static-id"
281+
type="checkbox"
282+
/>
283+
<mock-styled.label
284+
classname="mock-css."
285+
htmlfor="test-static-id"
286+
>
287+
JTS - Testimonial
288+
</mock-styled.label>
289+
<mock-styled.input
290+
id="test-static-id"
291+
type="checkbox"
292+
/>
293+
<mock-styled.label
294+
classname="mock-css."
295+
htmlfor="test-static-id"
296+
>
297+
JRV - Removals
298+
</mock-styled.label>
299+
</mock-styled.div>
300+
</mock-styled.div>
301+
</mock-styled.div>
302+
</div>,
303+
"debug": [Function],
304+
"findAllByAltText": [Function],
305+
"findAllByDisplayValue": [Function],
306+
"findAllByLabelText": [Function],
307+
"findAllByPlaceholderText": [Function],
308+
"findAllByRole": [Function],
309+
"findAllByTestId": [Function],
310+
"findAllByText": [Function],
311+
"findAllByTitle": [Function],
312+
"findByAltText": [Function],
313+
"findByDisplayValue": [Function],
314+
"findByLabelText": [Function],
315+
"findByPlaceholderText": [Function],
316+
"findByRole": [Function],
317+
"findByTestId": [Function],
318+
"findByText": [Function],
319+
"findByTitle": [Function],
320+
"getAllByAltText": [Function],
321+
"getAllByDisplayValue": [Function],
322+
"getAllByLabelText": [Function],
323+
"getAllByPlaceholderText": [Function],
324+
"getAllByRole": [Function],
325+
"getAllByTestId": [Function],
326+
"getAllByText": [Function],
327+
"getAllByTitle": [Function],
328+
"getByAltText": [Function],
329+
"getByDisplayValue": [Function],
330+
"getByLabelText": [Function],
331+
"getByPlaceholderText": [Function],
332+
"getByRole": [Function],
333+
"getByTestId": [Function],
334+
"getByText": [Function],
335+
"getByTitle": [Function],
336+
"queryAllByAltText": [Function],
337+
"queryAllByDisplayValue": [Function],
338+
"queryAllByLabelText": [Function],
339+
"queryAllByPlaceholderText": [Function],
340+
"queryAllByRole": [Function],
341+
"queryAllByTestId": [Function],
342+
"queryAllByText": [Function],
343+
"queryAllByTitle": [Function],
344+
"queryByAltText": [Function],
345+
"queryByDisplayValue": [Function],
346+
"queryByLabelText": [Function],
347+
"queryByPlaceholderText": [Function],
348+
"queryByRole": [Function],
349+
"queryByTestId": [Function],
350+
"queryByText": [Function],
351+
"queryByTitle": [Function],
352+
"rerender": [Function],
353+
"unmount": [Function],
354+
}
355+
`;
356+
357+
exports[`ReferralsConfirmationSelection should render component with read and write with both scopes on app 1`] = `
358+
{
359+
"asFragment": [Function],
360+
"baseElement": <body>
361+
<div>
362+
<mock-styled.div />
363+
<mock-styled.p
364+
classname="mock-css."
365+
>
366+
This app has requested to
367+
read and write
368+
‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
369+
</mock-styled.p>
370+
<mock-styled.div>
371+
<mock-styled.div
372+
classname="mock-css.
373+
margin-bottom: 0.75rem;
374+
"
375+
>
376+
<mock-styled.input
377+
checked="true"
378+
classname=""
379+
id="test-static-id"
380+
type="checkbox"
381+
/>
382+
<mock-styled.label
383+
htmlfor="test-static-id"
384+
>
385+
Install for selected referrals only
386+
</mock-styled.label>
387+
</mock-styled.div>
388+
</mock-styled.div>
389+
<mock-styled.div>
390+
<mock-styled.div>
391+
<mock-styled.input
392+
id="select-referrals-to-install"
393+
/>
394+
<mock-styled.div
395+
classname="mock-css.
396+
margin-bottom: 1.25rem;
397+
"
398+
>
399+
<mock-styled.span
400+
classname="mock-css.
401+
margin-left: 0.375rem;
402+
mock-css. mock-css.
403+
font-size: 1.5rem;
404+
"
405+
>
406+
<svg />
407+
</mock-styled.span>
408+
<p>
409+
Select at least one referral or un-tick the above checkbox to select all
410+
</p>
411+
</mock-styled.div>
412+
<mock-styled.div
413+
classname="mock-css.
414+
margin-bottom: 1.25rem;
415+
"
416+
>
417+
<mock-styled.input
418+
id="test-static-id"
419+
type="checkbox"
420+
/>
421+
<mock-styled.label
422+
classname="mock-css."
423+
htmlfor="test-static-id"
424+
>
425+
JTS - Testimonial
426+
</mock-styled.label>
427+
<mock-styled.input
428+
id="test-static-id"
429+
type="checkbox"
430+
/>
431+
<mock-styled.label
432+
classname="mock-css."
433+
htmlfor="test-static-id"
434+
>
435+
JRV - Removals
436+
</mock-styled.label>
437+
</mock-styled.div>
438+
</mock-styled.div>
439+
</mock-styled.div>
440+
</div>
441+
</body>,
442+
"container": <div>
443+
<mock-styled.div />
444+
<mock-styled.p
445+
classname="mock-css."
446+
>
447+
This app has requested to
448+
read and write
449+
‘Referral’ data. Before installation please select the referral types that this app will have access to. This defaults to ‘All Referral Types’, unless selected below.
223450
</mock-styled.p>
224451
<mock-styled.div>
225452
<mock-styled.div

‎packages/marketplace-management/src/components/ui/apps/__tests__/app-referrals-confirm.test.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ describe('ReferralsConfirmationSelection', () => {
2525
render(<ReferralsConfirmationSelection setMetadata={jest.fn()} metadata={[]} app={mockAppDetail} />),
2626
).toMatchSnapshot()
2727
})
28+
29+
it('should render component with read and write with both scopes on app', () => {
30+
mockUseReapitGet.mockReturnValue([mockReferralTypes, false])
31+
const appWithReadAndWrite = mockAppDetail
32+
appWithReadAndWrite.scopes?.push({ name: 'agencyCloud/referrals.write', description: 'ref' })
33+
34+
expect(
35+
render(<ReferralsConfirmationSelection setMetadata={jest.fn()} metadata={[]} app={appWithReadAndWrite} />),
36+
).toMatchSnapshot()
37+
})
2838
})
2939

3040
describe('handleOnCheckboxChange', () => {

‎packages/marketplace-management/src/components/ui/apps/app-referrals-confirm.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,18 @@ export const ReferralsConfirmationSelection: FC<ReferralsConfirmationSelectionPr
5555
fetchWhenTrue: [metadata],
5656
})
5757

58-
const hasReferrals = Boolean(app.scopes?.find((scope) => scope.name?.includes('referrals')))
58+
const hasReferralsRead = Boolean(app.scopes?.find((scope) => scope.name?.includes('referrals.read')))
59+
const hasReferralsWrite = Boolean(app.scopes?.find((scope) => scope.name?.includes('referrals.write')))
5960

60-
if (!hasReferrals) return null
61+
if (!hasReferralsRead && !hasReferralsWrite) return null
62+
const permText = hasReferralsRead && hasReferralsWrite ? 'read and write' : hasReferralsRead ? 'read' : 'write'
6163

6264
return (
6365
<>
6466
<BodyText hasGreyText>
65-
This app has requested to read &lsquo;Referral&rsquo; data. Before installation please select the referral types
66-
that this app will have access to. This defaults to &lsquo;All Referral Types&rsquo;, unless selected below.
67+
This app has requested to {permText} &lsquo;Referral&rsquo; data. Before installation please select the referral
68+
types that this app will have access to. This defaults to &lsquo;All Referral Types&rsquo;, unless selected
69+
below.
6770
</BodyText>
6871
<InputWrapFull>
6972
<InputGroup

0 commit comments

Comments
 (0)