Create fastApi helper functions and update project config to export tooling files

[arnaugiralt]

• Created fastApiTableAdapter and fastApiTableAdapterComposable functions to act as an interface between the table component and a FastAPI-based backend
• Updated webpack, jest, eslint and babel configs to manage files in the /tools folder
• Fixed some lint issues that arised after the changes

---

Explanation about the PR

New export is added for the Connect UI Toolkit

Before we only had the main export:

import createToolkitApp, {
  Card,
} from '@cloudblueconnect/connect-ui-toolkit';

Now we also have the FastApi helpers, exported under the /tools namespace:

// This works fine, as it did before
import createToolkitApp, {
  Card,
} from '@cloudblueconnect/connect-ui-toolkit';

// We can also import the FastApi helpers from the tools namespace

import {
  fastApiTableAdapter,
  fastApiTableAdapterComposable,
} from '@cloudblueconnect/connect-ui-toolkit/tools/fastApi';

The helpers are exported into their own file so we can add new side functionality to the toolkit without adding extra weight into the core toolkit export.

FastApi helpers

Two new files are added to make our lives easier when using a FastApi-based backend for Connect extensions, fastApiTableAdapter and fastApiTableAdapterComposable.
These are meant to be used with the upcoming complex table component, so we don't have to repeat code in the extensions. fastApiTableAdapter is a vanilla JS module, a function that takes an endpoint string and returns some functions such as load, next or filter. fastApiTableAdapterComposable is a Vue 3 composable wrapper over the base adapter, that exports some reactive state besides the adapter methods. Check the files and their tests for more information on how they work, or just ask in the comments.

Example of how this could be used:

<template>
  <ui-complex-table
      :headers="headers"
      :items="items"
      :total="total",
      :loading="loading"
      :page="page"
      @next="next"
      @previous="previous"
      @filter="filter"
  >
    <!-- slot implementation here -->
  </ui-complex-table>
</template>

<script setup>
import { onMounted } from 'vue';

import {
  fastApiTableAdapterComposable
} from '@cloudblueconnect/connect-ui-toolkit/tools/fastApi';


const {
  load,
  next,
  previous,
  filter,
  loading,
  items,
  page,
  total,
} = fastApiTableAdapterComposable('/api/subscriptions');

onMounted(async () => {
  await load();
});
</script>

As you can see from this example, the only thing required is to specify the API endpoint used. The variables exposed by the composable are reactive, so when we call load, the loading variable will change its value to true, the endpoint will be called, the items and total properties will be updated from the response, and then the loading variable will be assigned to false automatically.

When the next event is triggered by the table, the next method from the composable will increase the page number and do the same as for the load method, and the same can be said for the other methods.

Changes in project configuration

Each subproject will have its own tooling configuration (config for build, test, etc.). Luckily for us, every tool we use supports this scenario. Let's see the example for webpack config:

In the root folder we have our base webpack.config.js. Webpack allows to export multiple configurations, so we can leverage this functionality by having a configuration for each subproject.
In our case, we have a config file for the base UI Toolkit (./components/webpack.config.js) and another for the tools (./tools/webpack.config.js). Each config is independent, so we can customise them to add only what is required. Simplifies the configs a lot.
If we want to add another export under tools, we only need to deal with the configuration files of the ./tools folder; less chance to mess other things.

Same pattern applies for Jest config. Let me know if you have any questions, I can explain further, it's a pretty interesting topic.

Other changes

• The ./tasks/start script is removed. This is not required, since we can have the same functionality just by running the base webpack-dev-server package with our current Webpack configuration. Also, this can handle multiple configurations perfectly fine. Less custom code -> better code.
• By using webpack-dev-server we can start an HTTPS server to serve the project while developing. Useful if we want to check this in some scenarios. The command is npm run start:https;
• Two new build commands are added, to allow more granularity into the build process:
  • npm run build:core builds the project using only the Webpack config for the ./components folder
  • npm run build:tools builds the project using only the Webpack config for the ./tools folder

[sonarqubecloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
98.1% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[maxipavlovic]

In general, LGTM 🚀