sap / knowledge-hub-extension

A collaborative project driven by the SAP development community to build and enhance a Visual Studio Code extension that aggregates SAP development resources (tutorials, blogs, walkthroughs, and more) in the user's development environment.

Knowledge Hub extension by SAP

Knowledge Hub is an open source Visual Studio Code extension maintained by SAP that aggregates developer resources (tutorials, blogs, and more) in the user's IDE.

Description

This project is intended bring together both the internal and external SAP development communities to build and improve on an extension that provides streamlined access to a wide variety of development resources. Our goal is help our users understand what is possible with their SAP projects and then help them implement it.

Requirements

Ensure that the minimum system requirements for installing Visual Studio Code are met. For more information, see Requirements for Visual Studio Code.

Development Setup

Install pnpm globally

To install pnpm globally using npm, run the following:

npm install -g pnpm

More information on pnpm installation options can be found here.

Install dependencies

To install dependencies and devDependencies, run following command at root of the repository:

pnpm install

Build packages

To transpile the packages, run the following command at the root of the repository or in the individual package:

pnpm build

Format sources using prettier

To format sources, run the following command at the root of the repository or in the individual package:

pnpm format

Run linting of sources using eslint

To run linting of sources, run the following command at the root of the repository or in the individual package:

pnpm lint

To fix linting errors that can be fixed automatically, run the following command at the root of the repository or in the individual package:

pnpm lint:fix

Run unit tests in packages

To run unit tests using jest, run the following command at the root of the repository or in the individual package:

pnpm test

Note: if the test run fails due to dependency issues, run pnpm install && pnpm build in the root of the repository again to make sure all projects are up-to-date.

Debug packages

When analyzing a problem, it is helpful to be able to debug the modules. How to debug them depends on the IDE you are using. In this section, it is described how you could debug with VSCode.

Each of the packages has an extensive set of unit tests covering as many as possible different scenarios, therefore, as a starting point for debugging, it is a good idea to use the tests. The easiest (but not the only) way to debug a specific test in VSCode is to open a JavaScript Debug Terminal and then go to the package that needs to be debugged. Using the debug terminal, execute all tests with pnpm test.

Create changesets for feature or bug fix branches

A changeset workflow has been setup to version and publish packages to npmjs.com. To create changesets in a feature or bug fix branch, run one of the following commands:

pnpm cset

pnpm changeset

This command brings up an inquirer.js style command line interface with prompts to capture changed packages, bump versions (patch, minor or major) and a message to be included in the changelog files. The changeset configuration files in the .changeset folder at the root need to be committed and pushed to the branch. These files will be used in the GitHub Actions workflow to bump versions and publish the packages.

The general recommendation is to run this changeset command after a feature or bug fix is completed and before creating a pull request.

A GitHub bot changeset-bot has been enabled that adds a comment to pull requests with changeset information from the branch and includes a warning when no changesets are found.

Contributing

Contribution and feedback are encouraged and always welcome. For more information about how to contribute, the project structure, as well as additional contribution information; see our Contribution Guidelines.

Code of Conduct

We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone. By participating in this project, you agree to abide by its Code of Conduct at all times.

Licensing

Copyright 2023 SAP SE or an SAP affiliate company and knowledge-hub-extension contributors. Please see our LICENSE for copyright and license information. Detailed information including third-party components and their licensing/copyright information is available via the REUSE tool.

Download & Installation

The Knowledge Hub extension by SAP will be available for download via the VS Code Marketplace. It will also be available for download for SAP Business Application Studio.

Known Issues

https://github.com/SAP/knowledge-hub-extension/issues?q=is%3Aopen+is%3Aissue+label%3Abug

How to obtain support

This project is open to feature requests/suggestions, bug reports etc. via GitHub issues.

knowledge-hub-extension's Issues

[rl-readme_file-2] README is incomplete. Please check the following sections: Requirements, Contributing, Code of Conduct, Licensing

This issue was generated by the SAP Repository Linter. It checks repositories for their compliance with the SAP open source project guidelines. As an SAP employee you can see further details at https://wiki.one.int.sap/wiki/display/ospodocs/Repository+Linter+Findings#RepositoryLinterFindings-Readme(rl-readme_file-XX)

FEATURE - Pass Key for Telemetry Action based on the system(DEV/PROD)

As a persona,
I want to pass azure keys,
so that I can enable telemetry for dev/prod systems separately.

Description

Enable Telemetry for Knowledge Hub by passing relevant key details

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have a ...
when I execute ...
then ... will happen.

Notes

Tasks

• Unit Tests added
• Test Cases defined

FEATURE - Introduce global search

As a Knowledge Hub user,
I want to be able to search for content across all of the resources available in Knowledge Hub,
so that I do not have to enter my search terms across various tabs

Description

Currently Knowledge Hub has local search for all tabs. We can simplify our users' information search by allowing them to search across all of the materials they can access in KH. Similar implementations exist on the SAP homepage, which searches across SAP Community and Documentation: (https://www.sap.com/index.html); as well as SAP For Me, which searches SAP Community, documentation, and various other support materials (https://me.sap.com/home).

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have a Knowledge Hub open
when I enter a term in the search bar and press enter
then ... a search results tab will appear with relevant results, separated by resource.

Notes

Tasks

• Unit Tests added
• Test Cases defined

TBI - Provide telemetry data for the blogs and tags opened

Description (include screenshots)

In order to better understand the content our users access with knowledge hub, we should be able to see the blogs and blog tags opened by our users. A blog (and its tag) should only be recorded if the user clicks on the card and opens the blog in the browser. This will help us to better understand the topics that are of interest to our users.

No user data should be recorded.

Architecture Elaboration

The VS Code telemetry extension authors guide contains guidelines to collect and report telemetry data to Azure Monitor and Application Insights from VS Code extensions.

A few implementation details to be considered:

• Use the @vscode/extension-telemetry npm module since the telemetry data is reported to Azure Monitor and Application Insights
• Add a telemetry.json as recommended here

Note: This backlog item depends on tasks from #35

Tasks

• Add a new message and message handler to handle the click event of a blog card and trigger telemetry event - 2 days
• Define test case -- 1 day
• Add unit tests
• Add a new dashboard with charts for the telemetry events - 1 day

FEATURE - Enable multi-select for blogs filters

As a developer searching for blogs in knowledge hub,
I want to select multiple filters at once,
so that I can narrow down the list of results more precisely

Description

The first implementation of filters (handled here: #31) will allow for single selection. In order to allow users to explore topics more precisely, we should implement the ability to select multiple filters.

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given that I have the filter interface open on the Blogs tab ...
when I select multiple filters ...
then the list of content will update to reflect all of my filter selections.

Notes

Tasks

• Unit Tests added
• Test Cases defined

FEATURE - Introduce Home page search

As a Knowledge Hub user,
I want to search all of the available content from the Home page,
so that I can begin my information search from the 1st page in the extension, rather than have to switch back and forth between tabs

Description

Currently users need to navigate to either the Blogs or Tutorials tab to begin a search for information (that persists across tabs). We can simplify their user experience by introducing a search bar on the Knowledge Hub Home page. The top three relevant results should then be displayed on the Home page with a link that allows users to jump to the respective tabs to see more results.

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have the Home tab open ...
when I execute a search in the search bar...
then ... I will see the top 3 most-relevant results for blogs and tutorials (the currently available resources) on the Home tab
AND I can click a View More link that will navigate me to the relevant tab
AND the number of search results available will be displayed in the respective tabs to indicate to users a search was performed across all tabs
AND any search made in the Blogs or Tutorials tabs should persist on the Home page.

Notes

Tasks

• Unit Tests added
• Test Cases defined

FEATURE - Introduce "View All" view to Blogs filters

As a developer looking for specific content in the blogs tab of knowledge hub,
I want to see all of the filters available to me,
so that I can better understand the different topics I can read about

Description

blogs.sap.com has a View all feature that allows users to see all of the tags that exist on the platform. In order to create feature parity with the site and help users understand the wide variety of topics available to them, we should also introduce similar functionality: https://blogs.sap.com/tags/. The tags are searchable and update based on the users current input.

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have the filter interface open in the Blogs tab ...
when I click the View all button ...
then all of the tags available on blogs.sap.com should be viewable in a pop-up
and I should be able to search for existing tags
and I should be able to select a tag and go back to the blog tab
and then I should be able to click View All again and select another tag in addition if required.

Notes

Tasks

• Create a new tag page -- 2 days
• Update routing for clicking tags -- 2 days
• Unit Tests added -- 2 days
• Test Cases defined

TBI - Provide telemetry data for the tutorials and tutorial tags opened

Description (include screenshots)

In order to better understand the content our users access with the knowledge hub, we should be able to see the tutorial cards and primary tags opened by our users. A tutorial (and its primary tag) should only be recorded if the user clicks on the card and opens the tutorial in the browser. This will help us to better understand the topics that are of interest to our users.

No user data should be recorded.

Architecture Elaboration

The VS Code telemetry extension authors guide contains guidelines to collect and report telemetry data to Azure Monitor and Application Insights from VS Code extensions.

A few implementation details to be considered:

• Use the @vscode/extension-telemetry npm module since the telemetry data is reported to Azure Monitor and Application Insights
• Add a telemetry.json as recommended here

Tasks

• Initialize the telemetry library on activating extension and add a telemetry.json file at the root of the ide-extension package and make it available in the dist folder - 0.5 day
• Add utility functions to send telemetry events - 2 days
• Add a new message and message handler to handle the click event of a tutorial card and trigger telemetry event - 2 days
• Define test case -- 1 day
• Add unit tests
• Add a new dashboard with charts for the telemetry events - 1 day

FEATURE - Introduce basic tag filtering from existing tutorial cards

As a Knowledge Hub user,
I want to be able use a filter to narrow down the number of tutorials displayed in the tutorial tab by clicking on a tag on an existing tutorial card,
so that I can see tutorials that use that tag.

Description

To introduce filters in Knowledge Hub, we should allow users to narrow down the tutorials displayed by selecting relevant tutorial tags. To start, let's allow users to select tags from existing tutorial cards

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given that I have Knowledge Hub open ...
when I click on a tag in a tutorial card ...
then ... the tutorial tab will open
and tutorials with the selected tag will be displayed.

Notes

Tasks

• Unit Tests added
• Test Cases defined

FEATURE - Introduce global filters for all tabs

As a Knowledge Hub user,
I want to be able to select filter values in one tab (for example, Tutorials) that are then maintained across all tabs,
so that I can more easily search for a variety of resources focused on my topic of interest

Description

This simplifies the user's information search by making it easier to filter for topics across tabs. Currently, if a user wants to look for tutorials and blogs (the two tabs currently in Knowledge Hub) on a certain subject, they need to apply filters to both tabs. This ticket would make it so that the filtering on one tab is carried over to another.

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have selected filters for a tab ...
when I switch to other tabs...
then ... similar filters to the ones previously selected should be present in my current tab
and the content in the tab should reflect those filters.

Notes

The Tutorials and Blogs sites use different sets of filters, so considerations will need to be made accounting for this. Perhaps it would be best to only serve users tags that match exactly in order to avoid serving unrelated information.

Tasks

• Unit Tests added
• Test Cases defined

FEATURE - Provide SAP Developer tutorial filters on tutorial tab

As a Knowledge Hub user working in the Tutorials tab,
I want to select my filters using the same interface as the SAP Developers tutorial site,
so that I have a consistent experience between the knowledge hub extension and developers.sap.com

Description

To allow users to more easily find tutorials that they are looking for, we need to provide filtering functionality. To start, we can provide an experience similar to the one users expect from the SAP Developer tutorials site.

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have the Tutorials tab open ...
when I click on the Filter button ...
then ... the same filters that are displayed on the tutorials site should be displayed in the Tutorials tab (Topic, Software product, experience, type)
and selecting a filter in the Tutorials tab should display the same results as on the tutorials site

Given I have a filter interface that is identical to the one used on developers.sap.com ...
when I search for specific filters ...
then ... the list of filters should narrow based on my terms

Notes

Tasks

• Unit Tests added
• Test Cases defined

DOCUMENTATION - Update Debug Packages in README file

Issue Description

The Debug packages section of the README.md file makes reference to the wrong extension. In order to reduce the risk of user confusion, we should correct it.

Issue Type

• Documentation is unclear
• Documentation is incorrect
• Documentation is missing
• Other

FEATURE - Introduce context-specific content for SAP Fiori SBAS devspaces

As an SAP Fiori developer working in SAP Business Application Studio,
I want Knowledge Hub to serve me SAP Fiori development-specific content when I am working in an SAP Fiori devspace,
so that I have faster and meaningful access to content relevant to my Fiori projects in my workspace

Description

In order to improve and simplify the experience of using Knowledge Hub for developers, we should introduce context-specific content based on the type of project in the user's workspace. As SAP Fiori is the user experience of SAP, we should start with serving up content relevant to developers creating SAP Fiori applications. This project-specific experience can get more granular in future iterations (CAP/non-CAP, SAP Fiori elements adaptation project, etc.).

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have an SAP Fiori devspace open in SAP Business Application Studio ...
when I open Knowledge Hub ...
then ... I should see SAP Fiori filtered for and displayed in the Blogs and Tutorials tabs through the use of SAP Fiori - related tags (see the Notes below for SAP Fiori-related tags).

Notes

SAP Fiori-related tags for blogs.sap.com

• SAP Fiori
• SAP Fiori elements
• SAP Fiori tools
• SAP Fiori Client (can likely be ignored as this was discontinued?)
• SAP Fiori Cloud
• SAP Fiori for request approvals
• SAP Fiori for SAP CRM
• SAP Fiori for SAP ERP
• SAP Fiori for SAP ERP HCM
• SAP Fiori for SAP S/4HANA
• SAP Fiori for SAP Student Lifecycle Management, admissions portal
• SAP Fiori front-end server
• SAP Fiori Launchpad

SAP Fiori-related tags for SAP Developer tutorials

• SAP Fiori
• SAP Fiori Elements
• SAP Fiori tools

Tasks

• Unit Tests added
• Test Cases defined

FEATURE - Introduce SAP Help Portal (Documentation) tab

As a developer using Knowledge Hub,
I want to be able to search official SAP product documentation (help.sap.com),
so that I can learn more about a given product or find code snippets that will help me implement some sort of functionality in my project.

Description

This will create additional value for developers, who may need more technical help with their project. While blogs and tutorials are good for high level knowledge, including product documentation will allow users to access deeper levels of information.

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have the Knowledge Hub Documentation tab open ...
when I use the search bar ...
then Knowledge Hub will aggregate related results from help.sap.com.

Notes

help.sap.com currently allows global search for all documentation -- we should check if there is an API available to use to tie it into KH: https://help.sap.com/docs/

In order to streamline the search experience, we should try to create a similar experience to the Search Results page rather than the initial search.

Currently available filters are Product, Format, and Language. There is also an advanced search feature, but this can be pursued in another ticket. This ticket is concerned with allowing users to access SAP documentation on help.sap.com and perform as quick search.

Tasks

• Get access to documentation API endpoint (for elastic search)
• Integration of backend API -- 1 day
• Update navigation bar
• Update routing to Documentation tab
• Create new tab view for search-only
• Convert "show more" behavior to pagination
• Map search results to tab view
• Provide filtering for specific product versions
• Hide search when Documentation/Help tab is opened
• Unit Tests added
• Test Cases defined

FEATURE - Introduce ability to save Favorites in Blogs and Tutorials tabs

As a Knowledge Hub user,
I want to save blogs and tutorials that are interesting to me,
so that I read/use them later without having to search again

Description

Users may have articles or blogs they have discovered via Knowledge Hub that they wish to return to later -- either because they use the contents frequently or they didn't have time to start/finish the content. We can simplify their experience of finding the materials again by allowing users to save them as a "Favorite".

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have the blogs/tutorials tab open with content displayed
when I click the Favorites icon next to a blog/tutorial
then that piece of content will be saved in a favorites list to be referred to later.

Given I have previously saved contents for my Favorites list
when I click on the button/tab to open the Favorites list
then a list of content that I have previously marked as a Favorite will be displayed.

Given I have the Favorites list open
when I click on content that has been saved in the Favorites list
then the content will open in the browser.

Notes

Tasks

• Locally store blog post and tutorial IDs (extension storage)
• Get data from stored IDs and display in Favorites tab/section
• Unit Tests added
• Test Cases defined

Renovate Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update dependencies [commitlint] to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependencies [esbuild] (major) (esbuild-css-modules-plugin, esbuild-plugin-svgr, esbuild-sass-plugin)
• chore(deps): update dependencies [eslint] (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint-config-prettier, eslint-plugin-jsdoc, eslint-plugin-prettier, lint-staged)
• chore(deps): update dependencies [prettier] (major) (prettier, pretty-quick)
• chore(deps): update dependencies [react] (major) (react-i18next, react-redux)
• chore(deps): update dependencies [redux] (major) (@reduxjs/toolkit, redux)
• chore(deps): update dependency @testing-library/jest-dom to v6
• chore(deps): update dependency husky to v9
• chore(deps): update dependency i18next to v23
• chore(deps): update dependency jsdom to v24
• chore(deps): update dependency rimraf to v5
• chore(deps): update dependency typescript to v5
• chore(deps): update node.js to v20 (node, @types/node)
• fix(deps): update dependency framer-motion to v11
• 🔐 Create all pending approval PRs at once 🔐

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependencies [jest] (@types/jest, jest, jest-environment-jsdom)
• chore(deps): update dependencies [redux] (@reduxjs/toolkit, @types/redux-logger, @types/redux-mock-store, @types/remote-redux-devtools)
• chore(deps): update dependencies [testing-library] (@testing-library/dom, @testing-library/jest-dom, @testing-library/react, @testing-library/user-event, @types/testing-library__jest-dom)
• chore(deps): update dependency autoprefixer to v10.4.17
• chore(deps): update dependency ts-jest to v29.1.2
• chore(deps): update dependency ts-node to v10.9.2
• chore(deps): update dependency uuid to v9.0.1
• chore(deps): update dependency vscode-uri to v3.0.8
• fix(deps): update dependency @types/qs to v6.9.12
• chore(deps): update dependency @types/vscode to v1.86.0
• chore(deps): update dependency moment to v2.30.1
• chore(deps): update dependency pretty-quick to v3.3.1
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency postcss to v8.4.31 [security]
• chore(deps): update dependency axios to v1.6.0 [security]
• chore(deps): update dependencies [react] (@types/react, @types/react-dom, @types/react-redux, react-redux, react-router-dom)
• chore(deps): update dependency @types/node to v16.18.84
• chore(deps): update dependencies [commitlint] to v17.8.1 (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependencies [esbuild] (esbuild, esbuild-css-modules-plugin, esbuild-plugin-copy, esbuild-plugin-replace, esbuild-plugin-svgr, esbuild-sass-plugin)
• chore(deps): update dependencies [eslint] (@typescript-eslint/eslint-plugin, @typescript-eslint/parser, eslint, eslint-config-prettier, eslint-import-resolver-typescript, eslint-plugin-import, eslint-plugin-jsx-a11y, eslint-plugin-react, eslint-plugin-sonarjs, lint-staged)
• chore(deps): update dependency @changesets/cli to v2.27.1
• chore(deps): update pnpm to v8.15.4
• fix(deps): update dependencies [fluentui] (@fluentui/react, @fluentui/react-components, @fluentui/react-experiments)
• fix(deps): update dependency @sap-ux/ui-components to v1.15.5
• fix(deps): update dependency framer-motion to v10.18.0
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @changesets/cli 2.26.1
• @commitlint/cli 17.6.5
• @commitlint/config-conventional 17.6.5
• @types/jest 29.5.2
• @types/node 16.18.36
• @typescript-eslint/eslint-plugin 5.60.0
• @typescript-eslint/parser 5.60.0
• eslint 8.43.0
• eslint-config-prettier 8.8.0
• eslint-import-resolver-typescript 3.5.5
• eslint-plugin-import 2.27.5
• eslint-plugin-jsdoc 40.3.0
• eslint-plugin-prettier 4.2.1
• eslint-plugin-promise 6.1.1
• eslint-plugin-react 7.32.2
• eslint-plugin-sonarjs 0.19.0
• husky 8.0.3
• jest 29.5.0
• jest-sonar 0.2.16
• lint-staged 13.2.2
• prettier 2.8.8
• pretty-quick 3.1.3
• rimraf 4.4.1
• ts-jest 29.1.0
• ts-node 10.9.1
• typescript 4.9.5
• uuid 9.0.0
• pnpm 8.14.0
• node >=16.1.0 < 17.0.0 || >=18.0.0 < 19.0.0
• react-virtualized 9.22.5
• pnpm 8.14.0

packages/core/package.json

• @types/qs 6.9.7
• axios 1.4.0
• qs 6.11.2

packages/ide-extension/package.json

• @types/vscode 1.79.1
• esbuild 0.15.12
• esbuild-plugin-copy 2.1.0
• i18next 22.5.1
• jsdom 21.1.2
• vsce 2.15.0
• vscode-uri 3.0.7
• axios 1.4.0
• qs 6.11.2
• vscode ^1.39.0

packages/types/package.json

packages/webapp/package.json

• @fluentui/react 8.110.4
• @fluentui/react-components 9.22.0
• @fluentui/react-experiments 8.14.92
• @sap-ux/ui-components 1.8.2
• framer-motion 10.12.16
• @reduxjs/toolkit 1.9.5
• @testing-library/dom 9.3.0
• @testing-library/jest-dom 5.16.5
• @testing-library/react 14.0.0
• @testing-library/react-hooks 8.0.1
• @testing-library/user-event 14.4.3
• @types/testing-library__jest-dom 5.14.6
• @types/react 18.2.13
• @types/react-dom 18.2.6
• @types/react-redux 7.1.25
• @types/redux-logger 3.0.9
• @types/remote-redux-devtools 0.5.5
• @types/redux-mock-store 1.0.3
• autoprefixer 10.4.14
• eslint-plugin-jsx-a11y 6.7.1
• eslint-plugin-react 7.32.2
• eslint-plugin-react-hooks 4.6.0
• esbuild 0.15.12
• esbuild-css-modules-plugin 2.6.2
• esbuild-plugin-replace 1.3.0
• esbuild-plugin-svgr 1.0.1
• esbuild-sass-plugin 2.4.0
• i18next 22.5.1
• jest-css-modules-transform 4.4.2
• jest-environment-jsdom 29.5.0
• path 0.12.7
• postcss 8.4.24
• moment 2.29.4
• react 18.2.0
• react-dom 18.2.0
• react-i18next 12.3.1
• react-moment 1.1.3
• react-paginate 8.2.0
• react-redux 8.1.1
• react-router-dom 6.13.0
• redux 4.2.1
• redux-logger 3.0.6
• redux-mock-store 1.5.4

---

• Check this box to trigger a request for Renovate to run again on this repository

FEATURE - Provide saved filters for users

As a developer regularly using knowledge hub,
I want to be able to open knowledge hub with my previously used filters retained,
so that I don't have to apply filters every time I open the extension

Description

Some users may only use Knowledge Hub to access materials on a certain topic. To provide a more convenient experience for them, we should allow them to save the filters they typically use so that they do not have to apply them every time. This will allow users to create their own personalized experience where their home tab, tutorials, and blogs tabs reflect their interests.

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have Knowledge Hub open ...
when I set my preferred filters and then close the extension ...
then knowledge hub should open the next time I use it with the same filters applied, meaning:
the home tab will open with them applied the next time I access it
and the tutorials tab will open with them applied the next time I access it, provided filters are set for it
and the blogs tab will open with its saved filters applied the next time I access it, provided filters are set for it.

Notes

Tasks

• [ ]
• Unit Tests added
• Test Cases defined

FEATURE - Introduce filtering to the Blogs tab

As a developer using knowledge hub,
I want to filter the blogs that are being displayed in the blogs tab,
so that I can more easily find content related to my interests

Description

In order to help users that may be looking to get caught up on a topic -- say "SAP Fiori development" -- we should allow them to filter the results on the blog tab using the tags that are in place on the blogs.sap.com site. In order to have a consistent experience with the tutorials tab, we should use the same filtering mechanism but reduced in the number of columns. Unlike tutorials, blogs tags exist for only two categories (more-or-less "product" and blog category) rather than four categories.

This story should focus on only SAP managed tags for now. Another ticket should be created for user tags once we can decide how to present and filter those results.

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have the blogs tab open
when I click on the filter button ...
then I will be provided with a list of filters for Blog categories, Tags, and Language taken from blogs.sap.com
and I can search the list of filters to narrow my results
and selecting a filter by clicking a check box (or radio button in the case of language) will narrow the list of results.

Notes

Tasks

• Unit Tests added
• Test Cases defined

FEATURE - Provide search result sorting by date for the Blogs tab

As a user searching for blogs related to my topic of interest,
I want to be able to sort the search results,
so that I can view either the latest or oldest blogs first, depending on my needs.

Description

This feature would allow users to look for blogs that were published during certain time periods. If they want to view the latest and greatest on a certain topic, they can sort by "Newest first". If they want to see the first discussions on a particular topic, they can sort by "Oldest first".

Technical Design

What modules need to be created or enhanced?
How would the functionality be exposed and how can it be consumed?

Acceptance Criteria

GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)

Given I have a search executed in the Blogs tab ...
when I click the sort button ...
then ... I will be provided with options for sorting my search results: "Newest first" and "oldest first"
and then the results will be sorted by my selection, with either the newest blogs relevant to my search being displayed first or the oldest blogs relevant to my search being displayed first.

Notes

Something to consider: SAP Community currently allows for sorting by Relevance and Last Updated. If there are limitations to the blogs API, then we can start by using these two sort methods. But it would be nice to also allow Oldest First sort as well.

Tasks

• Add Most Recent button to re-sort results
• Unit Tests added
• Test Cases defined