From b3e436d968527eacf6f59237a4a86bbaef808aea Mon Sep 17 00:00:00 2001 From: Manan Sharma Date: Wed, 8 Nov 2023 16:51:12 -0500 Subject: [PATCH] feat/decouple back button (#211) * Core: decouple Back Button * Core: decouple Back Button * Core: decouple Back Button * Core: decouple Back Button * Core: decouple Back Button --- .../assets/action/__tests__/transform.test.ts | 50 +++++++++++++++++++ .../core/src/assets/action/transform.ts | 26 ++++++++++ .../core/src/assets/action/types.ts | 3 ++ .../mocks/action/action-navigation.json | 22 +++++++- .../react/src/assets/action/Action.tsx | 2 +- 5 files changed, 101 insertions(+), 2 deletions(-) diff --git a/plugins/reference-assets/core/src/assets/action/__tests__/transform.test.ts b/plugins/reference-assets/core/src/assets/action/__tests__/transform.test.ts index d8f0ebe81..032542d9d 100644 --- a/plugins/reference-assets/core/src/assets/action/__tests__/transform.test.ts +++ b/plugins/reference-assets/core/src/assets/action/__tests__/transform.test.ts @@ -64,4 +64,54 @@ describe('action transform', () => { await (ref.player.getState() as InProgressState).flowResult; expect(ref.player.getState().status).toBe('completed'); }); + + it('prev button transitions', async () => { + const ref = runTransform('action', actionTransform, { + id: 'test-flow', + views: [ + { + type: 'action', + id: 'view-1', + value: 'Prev', + }, + { + type: 'action', + id: 'view-2', + value: 'Prev', + }, + ], + navigation: { + BEGIN: 'FLOW_1', + FLOW_1: { + startState: 'view_1', + view_1: { + state_type: 'VIEW', + ref: 'view-1', + transitions: { + '*': 'view_2', + }, + }, + view_2: { + state_type: 'VIEW', + ref: 'view-2', + transitions: { + '*': 'end', + }, + }, + end: { + state_type: 'END', + outcome: 'done', + }, + }, + }, + }); + expect(ref?.current?.metaData?.role).toBe('back'); + expect(ref.current?.id).toBe('view-1'); + ref.current?.run(); + expect(ref.current?.id).toBe('view-2'); + ref.current?.run(); + + await (ref.player.getState() as InProgressState).flowResult; + expect(ref.player.getState().status).toBe('completed'); + }); }); diff --git a/plugins/reference-assets/core/src/assets/action/transform.ts b/plugins/reference-assets/core/src/assets/action/transform.ts index 49b78e61d..703c59eed 100644 --- a/plugins/reference-assets/core/src/assets/action/transform.ts +++ b/plugins/reference-assets/core/src/assets/action/transform.ts @@ -6,6 +6,9 @@ import type { import { compose, composeBefore } from '@player-ui/asset-transform-plugin'; import type { ActionAsset, TransformedAction } from './types'; +/** + * Function to find prev button + */ export function isBackAction(action: ActionAsset): boolean { return action.value === 'Prev'; } @@ -32,6 +35,28 @@ const transform: TransformFunction = ( }; }; +/** + * De couples back button from the back icon + */ +const backIconTransform: TransformFunction = ( + action +) => { + /** For previous versions of player, the back button would already have the back icon. + * This ensures that the old functionality does not break and back button is still visible when they update the player. + */ + if (isBackAction(action) && action?.metaData?.role === undefined) { + return { + ...action, + metaData: { + ...action?.metaData, + role: 'back', + }, + }; + } + + return action; +}; + /** * Appends `exp` to the plugins.stringResolver.propertiesToSkip array or creates it if it doesn't exist * @@ -61,5 +86,6 @@ export const expPropTransform: BeforeTransformFunction = (asset) => { export const actionTransform = compose( transform, + backIconTransform, composeBefore(expPropTransform) ); diff --git a/plugins/reference-assets/core/src/assets/action/types.ts b/plugins/reference-assets/core/src/assets/action/types.ts index 50315c9df..702aeb626 100644 --- a/plugins/reference-assets/core/src/assets/action/types.ts +++ b/plugins/reference-assets/core/src/assets/action/types.ts @@ -27,6 +27,9 @@ export interface ActionAsset /** Force transition to the next view without checking for validation */ skipValidation?: boolean; + + /** string value to decide for the left anchor sign */ + role?: string; }; } diff --git a/plugins/reference-assets/mocks/action/action-navigation.json b/plugins/reference-assets/mocks/action/action-navigation.json index ada807f0f..b9bd3eae5 100644 --- a/plugins/reference-assets/mocks/action/action-navigation.json +++ b/plugins/reference-assets/mocks/action/action-navigation.json @@ -21,8 +21,28 @@ "asset": { "id": "action-prev-id", "type": "text", - "value": "Go Back" + "value": "Go Back Without Icon" + } + }, + "metaData": { + "role": "" + } + } + }, + { + "asset": { + "id": "action-prev-without-icon", + "type": "action", + "value": "Prev", + "label": { + "asset": { + "id": "action-prev-id-without-icon", + "type": "text", + "value": "Go Back With Role" } + }, + "metaData": { + "role": "back" } } }, diff --git a/plugins/reference-assets/react/src/assets/action/Action.tsx b/plugins/reference-assets/react/src/assets/action/Action.tsx index 4c3105600..55d22cbf8 100644 --- a/plugins/reference-assets/react/src/assets/action/Action.tsx +++ b/plugins/reference-assets/react/src/assets/action/Action.tsx @@ -19,7 +19,7 @@ export const Action = (props: TransformedAction) => { variant={isBackAction(props) ? 'ghost' : 'solid'} {...buttonProps} > - {isBackAction(props) && } + {props?.metaData?.role === 'back' && } {label && (