feat: 🔩 updated 'Connected apps' page in profile settings (deriv-com#…

…10314)

* refactor: 🚚 migrates js test file to tsx

* feat: ✨ adds connected apps earn more section

* refactor: 🎨 updates connected apps know more section

* refactor: 🎨 removes unused icon

* refactor: 🚚 migrates index js to ts

* feat: ✨ adds connected apps empty component

* refactor: 🎨 refactors article section

* style: 💄 refactors classname

* refactor: 🚚 migrates test file from jsx to tsx

* refactor: 🎨 refactors empty connected apps component

* style: 💄 cleans account styling for connected apps component

* refactor: 🎨 refactors connected apps section

* fix: 🐛 fixes typescript warnings

* refactor: 🎨 refactors connected apps screen

* test: 🧪 adds test for connected apps component

* test: 🧪 adds missing test to article component

* test: 🧪 adds test for earn more section

* refactor: 🎨 refactors connected apps component

* test: 🧪 adds test for know more section

* test: 🧪 adds test for connected apps empty component

* test: 🧪 adds test for data list template entry

* test: 🧪 adds test for data list template

* refactor: 🎨 refactors connected apps component

* refactor: 🎨 refactors tsx file

* test: 🧪 adds test for useOauthConnectedApps hook

* test: 🧪 adds test for useOAuthRevokeConnectedApps hook

* test: 🧪 updates connected apps test file

* feat: dumy

* feat: added case with atleast one connected app

* chore: review changes

* style: 💄 updates style

* refactor: 🎨 removes unwanted observer

* refactor: 🎨 uses react fragment instead of div

* feat: empty commit

* feat: empty commit

* fix: make the desktop design similar to figma

* fix: 🐛 fixes code review issues

* fix: 🐛 fixes as per code review comments

* revert: 🚑 reverts hook usage due to mobx api clash

* revert: 🚑 reverts hook implementation due to mobx api sync issue

* refactor: 🗑️ clean up index file

* test: 🧪 updates test cases

* style: 💄 updates info component text size based on responsiveness

* refactor: 🗑️ removes unused import

* test: 🧪 fixes test case

* refactor: 🎨 refactors code based on code review

* refactor: 💄 moves styling to local style file

* refactor: 🎨 passes prop directly

* refactor: 🎨 creates a common bullet ol component

* test: 🧪 updates test cases

* refactor: 🎨 refactors bullets ol list

* test: 🧪 updates test file

* fix: 🐛 sets loading screen based on error in BE response

* refactor: 🎨 passes classnames directly

* refactor: 🎨 updates article component to take Localize

---------

Co-authored-by: sanjam chhatwal <[email protected]>
Co-authored-by: sanjam-deriv <[email protected]>

packages/account/src/Components/article/__tests__/article.spec.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import AccountArticle, { TArticle } from '../article';
+import userEvent from '@testing-library/user-event';
 
 describe('<AccountArticle/>', () => {
     const props: TArticle = {
@@ -38,4 +39,11 @@ describe('<AccountArticle/>', () => {
         expect(screen.getByText('Description 3')).toBeInTheDocument();
         expect(screen.getByText('Description 4')).toBeInTheDocument();
     });
+
+    it("should invoke the callback on clicking the 'Learn more' link", () => {
+        render(<AccountArticle {...props} />);
+
+        userEvent.click(screen.getByText(/Learn more/i));
+        expect(props.onClickLearnMore).toHaveBeenCalledTimes(1);
+    });
 });

packages/account/src/Components/article/article.tsx

@@ -10,7 +10,7 @@ type TDescriptionsItem = {
 };
 
 export type TArticle = {
-    title: string;
+    title: JSX.Element | string;
     descriptions: Array<TDescriptionsItem | React.ReactElement>;
     onClickLearnMore?: () => void;
     className?: string;

packages/account/src/Constants/connected-apps-config.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Localize } from '@deriv/translations';
+
+export const CONNECTED_APPS_INFO_BULLETS = [
+    {
+        key: 1,
+        text: (
+            <Localize i18n_default_text='Connected apps are authorised applications associated with your account through your API token or the OAuth authorisation process. They can act on your behalf within the limitations that you have set.' />
+        ),
+    },
+    {
+        key: 2,
+        text: (
+            <Localize i18n_default_text='As a user, you are responsible for sharing access and for actions that occur in your account (even if they were initiated by a third-party app on your behalf).' />
+        ),
+    },
+    {
+        key: 3,
+        text: (
+            <Localize i18n_default_text='Please note that only third-party apps will be displayed on this page. Official Deriv apps will not appear here.' />
+        ),
+    },
+];

packages/account/src/Sections/Security/ConnectedApps/__tests__/connected-apps-earn-more.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ConnectedAppsEarnMore from '../connected-apps-earn-more';
+
+describe('ConnectedAppsEarnMore', () => {
+    it("should render the 'Earn more' section with correct details", () => {
+        render(<ConnectedAppsEarnMore />);
+        expect(screen.getByText(/Earn more with Deriv API/i)).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                /Use our powerful, flexible, and free API to build a custom trading platform for yourself or for your business./i
+            )
+        ).toBeInTheDocument();
+    });
+});

packages/account/src/Sections/Security/ConnectedApps/__tests__/connected-apps-empty.spec.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import ConnectedAppsEmpty from '../connected-apps-empty';
+
+describe('ConnectedAppsEmpty', () => {
+    const renderComponent = (mock_store = mockStore({})) =>
+        render(
+            <StoreProvider store={mock_store}>
+                <ConnectedAppsEmpty />
+            </StoreProvider>
+        );
+
+    it('should render the empty apps informative text component with correct details', () => {
+        renderComponent();
+
+        expect(
+            screen.getByText(/You currently don't have any third-party authorised apps associated with your account./i)
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                /Connected apps are authorised applications associated with your account through your API token or the OAuth authorisation process. They can act on your behalf within the limitations that you have set./i
+            )
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                /As a user, you are responsible for sharing access and for actions that occur in your account \(even if they were initiated by a third-party app on your behalf\)./i
+            )
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                /Please note that only third-party apps will be displayed on this page. Official Deriv apps will not appear here./i
+            )
+        ).toBeInTheDocument();
+    });
+});

packages/account/src/Sections/Security/ConnectedApps/__tests__/connected-apps-info-bullets.spec.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import ConnectedAppsInfoBullets from '../connected-apps-info-bullets';
+
+describe('ConnectedAppsInfoBullets', () => {
+    it('should render the 3 informative ordered list items', () => {
+        render(
+            <StoreProvider store={mockStore({})}>
+                <ConnectedAppsInfoBullets class_name_dynamic_suffix='with-apps' />{' '}
+            </StoreProvider>
+        );
+
+        const ordered_list = screen.getAllByRole('listitem');
+        expect(ordered_list).toHaveLength(3);
+    });
+});

packages/account/src/Sections/Security/ConnectedApps/__tests__/connected-apps-info.spec.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StoreProvider, mockStore } from '@deriv/stores';
+import ConnectedAppsInfo from '../connected-apps-info';
+
+describe('<ConnectedAppsInfo />', () => {
+    beforeEach(() => {
+        render(
+            <StoreProvider store={mockStore({})}>
+                <ConnectedAppsInfo />
+            </StoreProvider>
+        );
+    });
+
+    it('should have h4 element with text "What are connected apps"', () => {
+        const heading = screen.getByRole('heading', { name: 'What are connected apps?' });
+        expect(heading).toBeInTheDocument();
+    });
+
+    it('should have an ordered list', () => {
+        const orderedlist = screen.getByRole('list');
+        expect(orderedlist).toBeInTheDocument();
+    });
+
+    it('should have three list items', () => {
+        const listitems = screen.getAllByRole('listitem');
+        expect(listitems).toHaveLength(3);
+    });
+
+    it('displays connected apps information', () => {
+        expect(
+            screen.getByText(
+                'Connected apps are authorised applications associated with your account through your API token or the OAuth authorisation process. They can act on your behalf within the limitations that you have set.'
+            )
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'As a user, you are responsible for sharing access and for actions that occur in your account (even if they were initiated by a third-party app on your behalf).'
+            )
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                'Please note that only third-party apps will be displayed on this page. Official Deriv apps will not appear here.'
+            )
+        ).toBeInTheDocument();
+    });
+});

packages/account/src/Sections/Security/ConnectedApps/__tests__/connected-apps-know-more.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ConnectedAppsKnowMore from '../connected-apps-know-more';
+
+describe('ConnectedAppsKnowMore', () => {
+    it("should render the 'Know more' section with correct details", () => {
+        render(<ConnectedAppsKnowMore />);
+        expect(screen.getByText(/Want to know more about APIs\?/i)).toBeInTheDocument();
+        expect(
+            screen.getByText(
+                /Go to our Deriv community and learn about APIs, API tokens, ways to use Deriv APIs, and more./i
+            )
+        ).toBeInTheDocument();
+    });
+});