fix(GDB-10638) Fix sonar stage #1766
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(cherry picked from commit 913dd67)
(cherry picked from commit affe559)
(cherry picked from commit a35fb20)
(cherry picked from commit e7b0ad6)
* Upgrade of webpack to latest version 5 which we need as precondition for running module federation. * Upgraded webpack and webpack-cli * Upgraded all used webpack plugins and loaders * Changed the legacy workbench to be single spa module * Added build scripts * Switch order of main and vendor bundles import as this affects the css order that is important. Removed hardcoded rest url. * Add some minor adjustments in formating and added test navigation links that work in different ways - these will be changed later. --------- Co-authored-by: boyantonchev <[email protected]> (cherry picked from commit 3da20cf)
* Add shared api module to the project * add the package.json with the updated start command * Add installation script for the `api` module as well as a build script which is run in the postinstall phase. * Changed the title in the index html. Removed the single-spa/welcome application from the import map. Moved the workbench-api application in the separate import map which is used for the shared stuff only. * updated the package-lock.json (cherry picked from commit 3077b5c)
* Add navbar MF * Register the navbar MF * Fix legacy-workbench app mounting in proper place in the DOM. Previously it was attached to the body, now it is inside the main where the single spa includes it by default. * Fix some style issues * navbar project is added in the build, clean and install scripts * Extract separate script for building the api module. Fixed the legacy-workbench module initialization to prevent cyclic reinitialization of the workbench. (cherry picked from commit bf4ff1f)
## What Some of the styles are not properly applied when switching between the old and the new workbench because styles are missing in the new one. ## Why Changed the new workbench layout a bit so that the styling to be applied more consistently. Extracted stylesheet for the root application that contains some base styling for now. Moved bootstrap stylesheet in the root and also installed the font-awesome and included its stylesheet in the root as well. Cleaned up the webpack.configs a bit. (cherry picked from commit 4e3d137)
## What Introduce new module components which exports reusable components for the workbench layout and replaces the old navbar module. ## Why To get the layout closer to the workbench original look. ## How Implemented new components module with the navbar, header and footer components and used them in the root application to build the layout. removed header and footer background and updated header to have a bit more meaningful content (cherry picked from commit c524e7f)
* GDB-10463 implemented dynamic navbar with stenciljs ## What Introduce dynamic navbar menu. ## Why The menu in the current workbench is dynamically built using plugins for the `main.menu` extension point via the PluginRegistry. ## How Add a new module `shared-components` which uses the stenciljs framework. Implemented the navbar, footer and header components with it and used them in the application layout. Cleanup * Updated clean script with shared-components module cleanup * Add additional build scripts * Changed deployUrl to point the actual module address. Removed the obsolete module from the externals array. Removed the custom component registration from the new angular module because we are registering those in the shell app and this isn't needed. Removed the script which was a test used to pass data to the navbar component. Removed the footer component which was added for test from the new workbench. * Updated some tests * Add cypress * Updated gitignore to allow cypress stuff in the shared-components * Added cypress stuff * Add some navbar tests * Add some basic tests for the header and footer (cherry picked from commit 9dad264)
* GDB-10512: Investigate how to run the host and legacy workbench on one server What Updates projects to build/start the root-config and legacy-workbench projects on one destination/server. Why The root-config is the main project that orchestrates all other ones. The legacy-workbench uses relative paths for endpoints. If both projects run on one server, no changes will be needed for the legacy-workbench to work. How Added webpack to the root container of all projects. Added configurations for development and production builds. # Known issues that will be fixed in next requests - version replacements for js files - license report - when a resource is changed the rebuild is trigered but browser page not refreshed. (cherry picked from commit 0bfa754)
## What Extended the webpack build process with functionality that replaces specific strings inside JS and HTML files with the actual version of the workbench. ## Why There was such functionality before, which prevented browsers from using cached resources if the workbench version changed. ## How The old plugin that performed this task is not supported in Webpack version 5. It was replaced with the "string-replace-loader" that performs the same function. (cherry picked from commit 5bdc319)
## What Added files to the build destination folder. These files contain license information about all the packages used in the workbench. ## Why There was existing functionality for this, but now we have more than one project, so we need to update it to parse all the projects. ## How - Moved the license checker functionality from legacy-workbench to the root directory; - Updated the license checker start script to build a report for all project dependencies. (cherry picked from commit dbb14d3)
…directive (#1484) What Resolved an issue with resource loading that was caused by restrictive Content Security Policy (CSP) directives. The CSP settings were updated to dynamically allow necessary endpoints. Why The application encountered errors loading resources due to CSP restrictions, particularly with WebSocket connections and resources loaded micro front ends. How - Updated the Content-Security-Policy directive to dynamically include allowed endpoints for WebSocket connections and other necessary resources. - Replaced external CDN resources by installing them via npm and copying them to the server. (cherry picked from commit 5b9390b)
* Move the services to a separate directory. * Implements Service Provider What Implemented a service provider. Why The new service provider is responsible for managing shared service instances across microfrontends. Frameworks like Angular and React provide dependency injection, allowing a single instance to be injected into all components. In a single-spa application, such functionality does not exist by default. The service provider addresses this need. How The service provider includes lazy loading functionality that returns an instance of an already instantiated service. If the service is not present, a new one is created and stored in a static map. The static modifier ensures that only one instance of each service class is used across the microfrontends. * GDB-10443: Implement i18n in the New Workbench ## What - Implemented core functionality for emitting events across all microfrontends. - Implemented global-context.service.ts. - Implemented language.service.ts. ## Why - Microfrontends are separate modules and should not be aware of each other. The API is a shared module across all of them. The event emitting functionality enables communication between these modules. - The global context will maintain shared state between all microfrontends. - The service will manage language functionality. ## How - Utilized the browser's built-in custom event propagation. Events are emitted from the document body, ensuring that all microfrontends can listen to them. - The global state is designed to be extendable with additional data as needed. Currently, it includes a language field that holds the user's selected language. This can be accessed through the onLanguageChanged function, which returns a Subject<string> and emits a value every time the language changes. - The language service manages language-related functionality. All microfrontends can use it to fetch and update the language. * GDB-10443: Implement i18n in the New Workbench ## What - Implemented core functionality for emitting events across all microfrontends; - Implemented global-context.service.ts; - Implemented language.service.ts; - Implemented translated label component in shared-components. ## Why - Microfrontends are separate modules and should not be aware of each other. The API is a shared module across all of them. The event emitting functionality enables communication between these modules; - The global context will maintain shared state between all microfrontends; - The service will manage language functionality; - To translate labels when the language is changed. ## How - Utilized the browser's built-in custom event propagation. Events are emitted from the document body, ensuring that all microfrontends can listen to them; - The global state is designed to be extendable with additional data as needed. Currently, it includes a language field that holds the user's selected language. This can be accessed through the onLanguageChanged function, which returns a Subject<string> and emits a value every time the language changes; - The language service manages language-related functionality. All microfrontends can use it to fetch and update the language. * GDB-10443: Implement i18n in the Legacy Workbench What Integrated the translation functionality of the legacy workbench with the new language change implementation. Why The language selection functionality has been moved to the shared-component microfrontend, centralizing language changes across the application. How Added a listener for the language change event. When the event is triggered, the new language value is set in the translation service, which triggers the re-translating the entire workbench. * Removes the Workbench prefix. * Remove usage of global context * Add some missing documentation and changed the event emitter to use the document.body as a source for the emitted events instead of just `div` --------- Co-authored-by: svilen.velikov <[email protected]> (cherry picked from commit d3b966f)
* GDB-10463 navbar toggle and improvements ## What Implemented navbar toggle behavior and other layout improvements. ## Why To match the current workbench behavior. ## How Implemented the toggle navbar function. Moved main-menu styles in the navbar component. Extended the tests. * fix the issue with the styles of the root level menu items when selected - should have a red background * expand or collapse navbar on window resize and make it work also with navbar state when the user closes the navbar * Extend menu toggle functionality and responsiveness based on resolution and user's selection. * resolve collisions after rebase * Implemented model driven approach for the navbar component. This allows the logic in the menu to be greatly simplified and moved inside the navbar model instead of using the DOM. * Removed redundant top level menu item definitions to simplify the UI model building. * Properly expand, collapse and highlight submenu items when the navbar is collapsed. Translate the labels used in the navbar. * disabled menu plugins processing in legacy-workbench app.js * Removed obsolete layout stylesheet from the shell app (cherry picked from commit 1e20cb7)
…inition for ttyg, i18n
…uired additional configuration in webpack config.
…loader in webpack config to account the new config format.
## What
Enhance the Translation service to support language bundles in hierarchical structure, allowing for hierarchical keys and nested objects within the translation files.
## Why
This change simplifies the management and maintenance of labels, especially for complex UIs with multiple nested elements. With this approach, translations can be organized into logical groups and sub-groups, making it easier to locate, update, and expand the labels as needed.
A sample translation file might look like this:
```
{
"visual.graph.label": "Visual graph",
"view.rdf.rank.title": "RDF Rank",
"language_selector": {
"toggle_menu": {
"label": "Select language",
"tooltip": ""
}
}
}
```
## How
Enhance the translation service to attempt extracting a translation from a hierarchical object if a simple key lookup does not return a value.
## What Introduce a reusable dropdown component onto-dropdown, designed to provide a flexible, customizable dropdown menu that integrates seamlessly with other components. The dropdown supports features such as configurable labels, tooltips, icons, and item lists. ## Why To enhance consistency and reduce repetitive code, a centralized and reusable dropdown component. Simplifies implementation of dropdowns across the application. Ensures uniform styling and behavior. ## How The onto-dropdown component was implemented using StencilJS. Key features include:
What Added a language selector to the header. Why To provide the ability to change the language of the workbench. How Implemented it as a Stencil component.
## What The browser console displays the following warning messages: - ```The resource http://localhost:9000/single-spa.min.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.``` - ```single-spa minified message [#41 See https://single-spa.js.org/error/?code=41](#41 See https://single-spa.js.org/error/?code=41)``` ## Why - An unnecessary <link> tag preloads single-spa.min.js in the index.html, but the resource does not exist on the server after building. - The shared-components module includes a single-spa dependency, which is loaded when the shared components are initialized in the browser. However, single-spa is already provided by the host application, leading to redundancy. ## How - Removed the unnecessary <link> tag for preloading single-spa.min.js. - Updated the Stencil configuration to mark single-spa as an external resource. This ensures the browser uses the already loaded instance of single-spa, as recommended by the Stencil error documentation.
## What A new tooltip component has been implemented. ## Why The tooltip component is designed for use within the shared-components module, ensuring consistency and reusability. ## How Implemented a tooltip component that serves as a wrapper for the tippy.js library to provide a feature-rich and customizable tooltip solution.
## WHAT: This commit introduces a Jenkins pipeline for the project, adding automation for build, test, lint, and validation processes across the projects. Along with the Jenkinsfile, several scripts have been added or modified to facilitate the build, testing, and cleaning operations. Additionally, TypeScript and ESLint configurations have been updated to improve code quality and consistency. ## WHY: To automate the CI/CD process, ensuring that the codebase is consistently built, tested, and validated before being merged. ## HOW: - Jenkins Pipeline: A new Jenkinsfile is added to define the stages for installing dependencies, linting, validating, building, testing, and running Cypress tests. - Build Scripts: New shell scripts (install.sh, build.sh, clean.sh, etc.) are introduced for handling installation, building, and cleaning tasks in a modular and reusable manner. - Linting and Testing: New ESLint configurations and Jest setup for different packages, along with scripts for running linting and tests. - Configuration Updates: TypeScript configurations are updated to enhance strictness and compatibility, and ESLint configurations are made more consistent across packages. - Cleanup: Removal of outdated configuration files and cleanup of unnecessary code.
…the header ## What Implemented a repository selector component that allows the selected repository to be changed within the workbench. ## Why This functionality exists in the legacy workbench and has been migrated to the new system. ## How The selector is implemented as a Stencil component that utilizes a dropdown component. Implemented Repository and Location services, along with the corresponding models. The dropdown component has been updated to support Stencil components as dropdown items. updated libraries migrated eslint config to the latest format updated webpack-config-single-spa library
removed old stuff left after rebase
## What Implement deep copy functionality. ## Why We use subscriptions to handle changes to certain values. When a context property value is changed, all subscribers are notified of the change and retrieve the new value. To ensure that each subscriber works with an independent copy of the value, we use deep copies. This guarantees that there are no side effects when one subscriber modifies the value. If a value needs to be changed, the client modifies its copy and updates it through the corresponding model's context service. ## How Create an abstract model class that implements the Copyable interface. This class will provide a copy method. All application models must extend this base model class. The class will also include generic methods common to all models. Create an abstract ModelList class for managing lists of models. This class will include generic methods for working with arrays of models.
## What Introduce MapperProvider. ## Why To easily retrieve a single instance of a given mapper. ## How Implement a MapperProvider that holds and returns the created instance of the specified mapper, with instances being created lazily upon the first request.
## WHAT: - Modified scripts/install.sh by adding npm ci for the main project - Updated webpack-config-single-spa from version 6.0.2 to 6.0.3 in package-lock.json. ## WHY: To fix potential issues caused by incorrect or missing installations ## HOW: - Adjusted the install.sh script to include a global npm ci execution for the root project - Updated package-lock.json - Updated README.md
Run api tests in the test script
## What Implement a service to manage REST API calls for the application. ## Why Centralizing REST API logic improves maintainability and reusability. ## How - Create a dedicated service class to encapsulate HTTP request logic. - Implement methods for all common HTTP verbs (GET, POST, PUT, DELETE). - Add functionality to process responses, extract useful data, and handle errors. - Include configurations for headers, query parameters, and timeouts. - Write unit tests to verify the functionality of the service.
api: updated single-spa to latest Updated webpack-config-single-spa-ts to latest in the api module. Updated the shared-components module to resolve the imports from the api properly. Add fake server to mock the responses in order to easily test all components Updated single-spa to latest 6.0.3 abd single-spa-layout to 3.0.0. Tweak project configs to make it work again. Make imports work in the tests and in the workbench. Fixes in the navbar and its tests Removed logging to make eslint happy Fix exporting of single-spa to root-config/resources in prod mode Make navigation to workbench work again Fixed a regression in language change observer Removed logging and part of the commented out code Removed systemjs dependency. Moved import-map-overrides in base package.json from root-config because the main webpack scripts are there and it's inconvenient to have it move dependencies from nested packages to the root level. Install import-map-injector and import-map-overrides in base app and provide them through the resources folder where the root config can find and load them instead of using the CDN versions.
Updated dependencies in base app Removed wrong route for sparql view in new workbench Updated jest and related libs in api module updated webpack-merge in api Updated the serve library to latest in the root-config package. Removed unused systemjs types and concurrently packages. Updated eslint and converted its config to the expected new format Updated all libraries in shared-components package Updated eslint and cypress to latest Updated a bunch of libraries in workbench.
## What - Fixed an issue where tooltips for dropdown items were not working; - Implemented tooltips for the repository selector. ## Why - We replaced item.tooltip ? item.tooltip : this.translate(item.tooltipLabelKey) with item.tooltip ?? this.translate(item.tooltipLabelKey). However, there is a subtle difference: if the tooltip is an empty string, the first approach uses the translation, while the second retains the empty string; - This change was made to improve usability and provide more contextual information. ## How - Updated the default value of the tooltip to undefined instead of an empty string; - Extended the dropdown configuration to support a promise that returns the tooltip string. A function was passed to the dropdown configuration to fetch additional repository information from the backend and convert it into an HTML string to be used as the tooltip content.
Changed dropdown alignment enum values to strings and updated related code to use them.
## WHAT - Added baseUrl to the tsconfig.json file in the shared-components package. - Mounted the api directory to the shared_components service in docker-compose.yaml. ## WHY baseUrl in tsconfig.json: - Required for proper resolution of module paths defined in the paths configuration, particularly for the @ontotext/workbench-api alias Mounting the api directory: - Enables the shared_components service to access the api directory on the host machine ## HOW - Updated tsconfig.json: Added "baseUrl": "./" under compilerOptions to support path alias resolution. - Updated docker-compose.yaml: Added ../api:/api as a volume for the shared_components service to expose the api directory inside the container
svilenvelikov
force-pushed
the
GDB-10373-workbench-with-single-spa
branch
from
fc84011 to
8c05785
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Why
How
Testing
Screenshots
Checklist