Merge pull request #90 from agrim-deriv/Agrim/breadcrumbs

Agrim/chore: breadcrumbs
deriv-com · Aug 30, 2024 · 30c5256 · 30c5256
2 parents 3a5920b + 1041ad0
commit 30c5256
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,10 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
     "@radix-ui/react-tabs": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@react-spring/web": "^9.7.3",
     "@textea/json-viewer": "^3.4.1",
+    "@use-gesture/react": "^10.3.0",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.2",

diff --git a/src/features/Apiexplorer/index.tsx b/src/features/Apiexplorer/index.tsx
@@ -1,12 +1,12 @@
 import { Text } from '@deriv/ui';
+import { Breadcrumbs } from '@deriv-com/quill-ui';
 import React from 'react';
 import { Dropdown } from './Dropdown/Dropdown';
 import styles from './styles.module.scss';
 import SchemaWrapper from './Schema/SchemaWrapper';
 import RequestJSONBox from './RequestJSONBox';
 import useDynamicImportJSON from '@site/src/hooks/useDynamicImportJSON';
 import Footer from '@site/src/components/Footer';
-
 export default function ApiExplorerFeatures() {
   const {
     text_data,
@@ -19,8 +19,25 @@ export default function ApiExplorerFeatures() {
   } = useDynamicImportJSON();
   const has_info = Object.keys(request_info).length === 0;
   return (
-    <div className={styles.playgroundContent}>
-      <div>
+    <>
+      <div className='breadcrumbs'>
+        <Breadcrumbs
+          links={[
+            {
+              content: 'Home',
+              href: '/',
+              target: '_self',
+            },
+            {
+              content: 'API explorer',
+              href: '/api-explorer',
+              target: '_self',
+            },
+          ]}
+          size='md'
+        />
+      </div>
+      <div className={styles.playgroundContent}>
         <Text type='heading-2' as='h1' className={styles.heading}>
           API Explorer
         </Text>
@@ -34,14 +51,12 @@ export default function ApiExplorerFeatures() {
                   selected={selected}
                   setSelected={setSelected}
                 />
-                <div>
-                  <RequestJSONBox
-                    request_example={text_data.request}
-                    handleChange={handleTextAreaInput}
-                    name={text_data.name}
-                    auth={request_info.auth_required}
-                  />
-                </div>
+                <RequestJSONBox
+                  request_example={text_data.request}
+                  handleChange={handleTextAreaInput}
+                  name={text_data.name}
+                  auth={request_info.auth_required}
+                />
               </div>
               {!has_info && (
                 <div
@@ -60,10 +75,8 @@ export default function ApiExplorerFeatures() {
             </div>
           </div>
         </div>
-      </div>
-      <div className={styles.footer}>
         <Footer />
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/features/dashboard/manage-dashboard/index.tsx b/src/features/dashboard/manage-dashboard/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import AppDashboardContainer from '../components/AppDashboardContainer';
 import AppRegister from '../components/AppRegister';
+import { Breadcrumbs } from '@deriv-com/quill-ui';
 import useAppManager from '@site/src/hooks/useAppManager';
 import useApiToken from '@site/src/hooks/useApiToken';
 import Spinner from '@site/src/components/Spinner';
@@ -90,13 +91,41 @@ const ManageDashboard = () => {
     updateCurrentTab(TDashboardTab.UPDATE_APP);
   };
 
+  const commonLinks = [
+    { content: 'Home', href: '/', target: '_self' },
+    { content: 'Dashboard', href: '/dashboard', target: '_self' },
+  ];
+
+  const tabSecndryLinks = {
+    [TDashboardTab.REGISTER_APP]: {
+      content: 'Register application',
+      href: '/dashboard',
+      target: '_self',
+    },
+    [TDashboardTab.UPDATE_APP]: {
+      content: 'Edit application',
+      href: '/dashboard',
+      target: '_self',
+    },
+    [TDashboardTab.REGISTER_TOKENS]: {
+      content: 'Create token',
+      href: '/dashboard',
+      target: '_self',
+    },
+  };
+
+  const breadcrumbsLinks = [...commonLinks, tabSecndryLinks[currentTab]].filter(Boolean);
+
   return (
     <React.Fragment>
       {error && <RegisterAppDialogError error={error} onClose={clear} />}
       <AppRegisterSuccessModal
         onCancel={() => setAppRegisterModalOpen(false)}
         onConfigure={handleAppConfigure}
       />
+      <div className='breadcrumbs'>
+        <Breadcrumbs links={breadcrumbsLinks} size='md' />
+      </div>
       <AppDashboardContainer>{renderScreen()}</AppDashboardContainer>
     </React.Fragment>
   );

diff --git a/src/features/dashboard/manage-dashboard/manage-dashboard.scss b/src/features/dashboard/manage-dashboard/manage-dashboard.scss
@@ -3,3 +3,12 @@
     height: 90vh;
   }
 }
+
+.breadcrumbs {
+  padding-left: 5%;
+  padding-top: 1.6%;
+
+  @media screen and (max-width: 1200px) {
+    padding-top: 3.5em;
+  }
+}