Handled Active Element of Table of Content (#2853)

* fix: Handled Active Eelement of Table of Content

* fix: handled initial values of Context API.

* fix:moved ContextAPI provider from dev-portal to elements-core

* fix: handled initial values of contextAPI & implemented isActiveGroup Functionality

* fix: updated the Unit test cases

* fix: removed log

* fix:added groupId & groupIndex in TableOfContents.stories.tsx

* fix:removed onLickClick from handleClick

* fix: optimise the updateTree functionality

* fix: added parentId as 3rd property to identify the activeElement

* fix: renamed the functionaliy to updateTocTree and removed logs.

* fix: added useMemo to contextAPI.

* fix: removed log

* fix:implemented unique key approach for each Tree elements

* fix: uncommented expect statement

* fix: used '-' symbol as seperator in index unique key

* fix: added types

* chore(deps): bump up elements, elements-core & elements-dev-portal

* Updated the resourse_class from xlarge to medium in the config.yml

* .circleci config file modified

* fix: added index property

* fix: added all properties into single ContextAPI and removed 2nd ContextAPI.

---------

Co-authored-by: Pankaj Yadav <pankaj.yadav@smartbear.com>

Author: SB-venkatyadavilli

.circleci/config.yml

@@ -25,7 +25,7 @@ jobs:
     working_directory: /mnt/ramdisk/project
     docker:
       - image: cimg/node:18.20
-    resource_class: xlarge
+    resource_class: large
     environment:
       CYPRESS_CACHE_FOLDER: /mnt/ramdisk/.cache/Cypress
       YARN_CACHE_FOLDER: /mnt/ramdisk/.cache/yarn
@@ -47,7 +47,7 @@ jobs:
       - run: yarn build.docs
   run-e2e-tests:
     executor: cypress-default
-    resource_class: xlarge
+    resource_class: large
     working_directory: /mnt/ramdisk/project
     environment:
       CYPRESS_CACHE_FOLDER: /mnt/ramdisk/.cache/Cypress

packages/elements-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "9.0.12",
+  "version": "9.0.13",
   "sideEffects": [
     "web-components.min.js",
     "src/web-components/**",

packages/elements-core/src/components/TableOfContents/TableOfContents.spec.tsx

@@ -27,6 +27,7 @@ describe('TableOfContents', () => {
                   slug: 'target',
                   type: 'article',
                   meta: '',
+                  index: '0-',
                 },
               ],
             },
@@ -55,6 +56,7 @@ describe('TableOfContents', () => {
                   slug: 'target',
                   type: 'article',
                   meta: '',
+                  index: '0-',
                 },
               ],
             },
@@ -87,8 +89,10 @@ describe('TableOfContents', () => {
                       slug: 'target',
                       type: 'article',
                       meta: '',
+                      index: '0-0-',
                     },
                   ],
+                  index: '0-',
                 },
               ],
             },
@@ -119,6 +123,7 @@ describe('TableOfContents', () => {
                   slug: 'target',
                   type: 'article',
                   meta: '',
+                  index: '0-',
                 },
               ],
             },
@@ -154,6 +159,7 @@ describe('TableOfContents', () => {
                   slug: 'target',
                   type: 'article',
                   meta: '',
+                  index: '0-',
                 },
               ],
             },
@@ -191,6 +197,7 @@ describe('TableOfContents', () => {
                   items: [],
                   meta: '',
                   version: '2',
+                  index: '0-',
                 },
                 {
                   id: 'def',
@@ -199,6 +206,7 @@ describe('TableOfContents', () => {
                   type: 'model',
                   meta: '',
                   version: '1.0.1',
+                  index: '1-',
                 },
                 {
                   id: 'ghi',
@@ -207,6 +215,7 @@ describe('TableOfContents', () => {
                   type: 'http_operation',
                   meta: 'get',
                   version: '1.0.2',
+                  index: '2-',
                 },
               ],
             },
@@ -238,13 +247,15 @@ describe('utils', () => {
               type: 'article',
               slug: 'abc-doc',
               meta: '',
+              index: '0-',
             },
             {
               id: 'targetId',
               title: 'Target',
               slug: 'target',
               type: 'article',
               meta: '',
+              index: '1-',
             },
           ],
         },
@@ -258,6 +269,7 @@ describe('utils', () => {
         type: 'article',
         slug: 'abc-doc',
         meta: '',
+        index: '0-',
       });
     });
 
@@ -276,13 +288,15 @@ describe('utils', () => {
               slug: 'def-get-todo',
               type: 'http_operation',
               meta: 'get',
+              index: '0-',
             },
             {
               id: 'ghi',
               title: 'Add Todo',
               slug: 'ghi-add-todo',
               type: 'http_operation',
               meta: 'post',
+              index: '1-',
             },
           ],
         },
@@ -295,6 +309,7 @@ describe('utils', () => {
         slug: 'def-get-todo',
         type: 'http_operation',
         meta: 'get',
+        index: '0-',
       });
     });
   });

packages/elements-core/src/components/TableOfContents/TableOfContents.stories.tsx

@@ -27,51 +27,59 @@ Playground.args = {
       title: 'Overview',
       type: 'overview',
       meta: '',
+      index: '0-',
     },
     {
       title: 'Endpoints',
+      index: '1-',
     },
     {
       id: '/operations/get-todos',
       slug: '/operations/get-todos',
       title: 'List Todos',
       type: 'http_operation',
       meta: 'get',
+      index: '2-',
     },
     {
       id: '/operations/post-todos',
       slug: '/operations/post-todos',
       title: 'Create Todo',
       type: 'http_operation',
       meta: 'post',
+      index: '3-',
     },
     {
       id: '/operations/get-todos-id',
       slug: '/operations/get-todos-id',
       title: 'Get Todo',
       type: 'http_operation',
       meta: 'get',
+      index: '4-',
     },
     {
       id: '/operations/put-todos-id',
       slug: '/operations/put-todos-id',
       title: 'Replace Todo',
       type: 'http_operation',
       meta: 'put',
+      index: '5-',
     },
     {
       id: '/operations/delete-todos-id',
       slug: '/operations/delete-todos-id',
       title: 'Delete Todo',
       type: 'http_operation',
       meta: 'delete',
+      index: '6-',
     },
     {
       id: '/operations/patch-todos-id',
       slug: '/operations/patch-todos-id',
       title: 'Update Todo',
       type: 'http_operation',
       meta: 'patch',
+      index: '7-',
     },
     {
       title: 'Users',
@@ -82,25 +90,30 @@ Playground.args = {
           title: 'Get User',
           type: 'http_operation',
           meta: 'get',
+          index: '8-0-',
         },
         {
           id: '/operations/delete-users-userID',
           slug: '/operations/delete-users-userID',
           title: 'Delete User',
           type: 'http_operation',
           meta: 'delete',
+          index: '8-1-',
         },
         {
           id: '/operations/post-users-userID',
           slug: '/operations/post-users-userID',
           title: 'Create User',
           type: 'http_operation',
           meta: 'post',
+          index: '8-2-',
         },
       ],
+      index: '8-',
     },
     {
       title: 'Schemas',
+      index: '9-',
     },
     {
       id: '/schemas/Todos',
@@ -109,13 +122,15 @@ Playground.args = {
       type: 'model',
       meta: '',
       version: '1.0.2',
+      index: '10-',
     },
     {
       id: '/schemas/User',
       slug: '/schemas/User',
       title: 'User',
       type: 'model',
       meta: '',
+      index: '11-',
     },
   ],
 };