LITE-29547: Control if next & previous actions are allowed in fast API adapter & fix export config for tools

components/src/index.js

@@ -1,42 +1,26 @@
-import $injector from './core/injector';
-import registerWidget from './core/registerWidget';
+import $injector from '~core/injector';
+import registerWidget from '~core/registerWidget';
 
-import tabs from './widgets/tabs/widget.vue';
-import tab from './widgets/tab/widget.vue';
-import pad from './widgets/pad/widget.vue';
-import card from './widgets/card/widget.vue';
-import icon from './widgets/icon/widget.vue';
-import view from './widgets/view/widget.vue';
-import navigation from './widgets/navigation/widget.vue';
-import status from './widgets/status/widget.vue';
-import textfield from './widgets/textfield/widget.vue';
-import table from './widgets/table/widget.vue';
-import button from './widgets/button/widget.vue';
-import complexTable from './widgets/complexTable/widget.vue';
 
-import _store from './core/store';
-import _bus from './core/eventBus';
-import {
-  connectPortalRoutesDict,
-} from './constants/portal-routes';
+export { default as Tabs } from '~widgets/tabs/widget.vue';
+export { default as Tab } from '~widgets/tab/widget.vue';
+export { default as Pad } from '~widgets/pad/widget.vue';
+export { default as Card } from '~widgets/card/widget.vue';
+export { default as Icon } from '~widgets/icon/widget.vue';
+export { default as View } from '~widgets/view/widget.vue';
+export { default as Navigation } from '~widgets/navigation/widget.vue';
+export { default as Status } from '~widgets/status/widget.vue';
+export { default as Textfield } from '~widgets/textfield/widget.vue';
+export { default as Table } from '~widgets/table/widget.vue';
+export { default as ComplexTable } from './widgets/complexTable/widget.vue';
+export { default as Button } from '~widgets/button/widget.vue';
 
-export const Tabs = tabs;
-export const Tab = tab;
-export const Pad = pad;
-export const Card = card;
-export const Icon = icon;
-export const View = view;
-export const Navigation = navigation;
-export const Status = status;
-export const Textfield = textfield;
-export const Table = table;
-export const Button = button;
-export const ComplexTable = complexTable;
+export { default as store } from '~core/store';
+export { default as bus } from '~core/eventBus';
 
-export const bus = _bus;
-export const store = _store;
-
-export const connectPortalRoutes = connectPortalRoutesDict;
+export {
+  connectPortalRoutesDict as connectPortalRoutes,
+} from '~constants/portal-routes';
 
 export default (widgets = {}, options = {}) => {
   for (const widget in widgets) registerWidget(widget, widgets[widget]);

components/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = {
     outputModule: true,
   },
 
-  entry: path.resolve(__dirname, './src/index.js'),
+  entry: path.resolve(__dirname, 'src/index.js'),
 
   output: {
     path: path.resolve(__dirname, '..', 'dist'),
@@ -37,7 +37,7 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [path.resolve('app'), path.resolve('test')],
+        include: [path.resolve(__dirname, 'src'), path.resolve('test')],
         exclude: /node_modules/,
       },
       {
@@ -61,9 +61,9 @@ module.exports = {
 
   resolve: {
     alias: {
-      '~core': path.resolve(__dirname, './src/core'),
-      '~widgets': path.resolve(__dirname, './src/widgets'),
-      '~constants': path.resolve(__dirname, './src/constants'),
+      '~core': path.resolve(__dirname, 'src/core'),
+      '~widgets': path.resolve(__dirname, 'src/widgets'),
+      '~constants': path.resolve(__dirname, 'src/constants'),
     },
   },
 

package.json

@@ -3,13 +3,13 @@
   "version": "30.1.0",
   "exports": {
     ".": "./dist/index.js",
-    "./tools": "./dist/tools"
+    "./tools/*": "./dist/tools/*"
   },
   "scripts": {
     "build": "NODE_ENV=production webpack --config ./webpack.config.js",
     "build:core": "NODE_ENV=production webpack --config ./components/webpack.config.js",
     "build:tools": "NODE_ENV=production webpack --config ./tools/webpack.config.js",
-    "start": "NODE_ENV=development webpack serve",
+    "start": "NODE_ENV=development webpack serve --config ./webpack-dev.config.js",
     "start:https": "npm run start -- --server-type https",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
     "test": "jest --config ./jest.config.js",

tools/api/fastApi/adapter.js

@@ -54,18 +54,22 @@ export const fastApiTableAdapter = (endpoint, rowsPerPage = 10) => {
   };
 
   /**
-   * @returns {Promise<{total: number, page: number, items: *[]}>}
+   * @returns {{total: number, page: number, items: *[]}|Promise<{total: number, page: number, items: *[]}>}
    */
   const next = () => {
+    if (state.page >= Math.ceil(state.total / limit)) return state;
+
     state.page++;
 
     return load();
   };
 
   /**
-   * @returns {Promise<{total: number, page: number, items: *[]}>}
+   * @returns {{total: number, page: number, items: *[]}|Promise<{total: number, page: number, items: *[]}>}
    */
   const previous = () => {
+    if (state.page <= 1) return state;
+
     state.page--;
 
     return load();

tools/api/fastApi/adapter.spec.js

@@ -111,47 +111,100 @@ describe('#fastApiTableAdapter', () => {
     });
 
     describe('#next', () => {
-      beforeEach(async () => {
-        fetchResponse.contentRangeTotal = 1;
-        fetchResponse.items = ['foo'];
+      describe('if there is a next page', () => {
+        beforeEach(async () => {
+          fetchResponse.contentRangeTotal = 11;
+          fetchResponse.items = ['foo'];
 
-        result = await adapter.next();
-      });
+          await adapter.load();
+          result = await adapter.next();
+        });
 
-      it('increases the current page and performs a request', () => {
-        expect(fetch).toHaveBeenCalledWith('/foo?limit=10&offset=10');
+        it('increases the current page and performs a request', () => {
+          expect(fetch).toHaveBeenCalledTimes(2);
+          expect(fetch).toHaveBeenCalledWith('/foo?limit=10&offset=10');
+        });
+
+        it('returns the result of calling load', () => {
+          expect(result).toEqual({
+            page: 2,
+            total: 11,
+            items: ['foo'],
+          });
+        });
       });
 
-      it('returns the result of calling load', () => {
-        expect(result).toEqual({
-          page: 2,
-          total: 1,
-          items: ['foo'],
+      describe('if there is NOT a next page', () => {
+        beforeEach(async () => {
+          fetchResponse.contentRangeTotal = 10;
+          fetchResponse.items = ['foo'];
+
+          await adapter.load();
+          result = await adapter.next();
+        });
+
+        it('does not perform a request', () => {
+          expect(fetch).toHaveBeenCalledTimes(1);
+        });
+
+        it('returns the current state', () => {
+          expect(result).toEqual({
+            page: 1,
+            total: 10,
+            items: ['foo'],
+          });
         });
       });
     });
 
     describe('#previous', () => {
-      beforeEach(async () => {
-        fetchResponse.contentRangeTotal = 1;
-        fetchResponse.items = ['bar'];
+      describe('if there is a previous page', () => {
+        beforeEach(async () => {
+          fetchResponse.contentRangeTotal = 33;
+          fetchResponse.items = ['bar'];
 
-        // Increase page to 3
-        await adapter.next();
-        await adapter.next();
+          // Increase page to 3
+          await adapter.load();
+          await adapter.next();
+          await adapter.next();
 
-        result = await adapter.previous();
-      });
+          result = await adapter.previous();
+        });
 
-      it('decreases the current page and performs a request', () => {
-        expect(fetch).toHaveBeenCalledWith('/foo?limit=10&offset=20');
+        it('decreases the current page and performs a request', () => {
+          expect(fetch).toHaveBeenCalledWith('/foo?limit=10&offset=20');
+        });
+
+        it('returns the result of calling load', () => {
+          expect(result).toEqual({
+            page: 2,
+            total: 33,
+            items: ['bar'],
+          });
+        });
       });
 
-      it('returns the result of calling load', () => {
-        expect(result).toEqual({
-          page: 2,
-          total: 1,
-          items: ['bar'],
+      describe('if there is NOT a previous page', () => {
+        beforeEach(async () => {
+          fetchResponse.contentRangeTotal = 33;
+          fetchResponse.items = ['bar'];
+
+          // Do not increase page
+          await adapter.load();
+
+          result = await adapter.previous();
+        });
+
+        it('does not performs a request', () => {
+          expect(fetch).toHaveBeenCalledTimes(1);
+        });
+
+        it('returns the current state', () => {
+          expect(result).toEqual({
+            page: 1,
+            total: 33,
+            items: ['bar'],
+          });
         });
       });
     });

tools/api/fastApi/vue-composable.js

@@ -11,7 +11,7 @@ import { fastApiTableAdapter } from './adapter';
  *
  * @returns {{next: ((function(): Promise<void>)|*), filter: ((function(*): Promise<void>)|*), total: Ref<UnwrapRef<number>>, load: ((function(): Promise<void>)|*), previous: ((function(): Promise<void>)|*), setRowsPerPage: ((function(*): Promise<void>)|*), page: Ref<UnwrapRef<number>>, loading: Ref<UnwrapRef<boolean>>, items: Ref<UnwrapRef<[]>>}}
  */
-export const fastApiTableAdapterComposable = (endpoint, rowsPerPage = 10) => {
+export const useFastApiTableAdapter = (endpoint, rowsPerPage = 10) => {
   const adapter = fastApiTableAdapter(endpoint, rowsPerPage);
 
   const items = ref(adapter.items);

tools/api/fastApi/vue-composable.spec.js

@@ -1,4 +1,4 @@
-import { fastApiTableAdapterComposable } from './vue-composable';
+import { useFastApiTableAdapter } from './vue-composable';
 import { fastApiTableAdapter } from './adapter';
 
 
@@ -23,13 +23,13 @@ jest.mock('./adapter', () => ({
   }),
 }));
 
-describe('#fastApiTableAdapterComposable', () => {
+describe('#useFastApiTableAdapter', () => {
   let composable;
   let adapter;
 
   describe('#constructor', () => {
     beforeEach(() => {
-      composable = fastApiTableAdapterComposable('/foo');
+      composable = useFastApiTableAdapter('/foo');
     });
 
     it('creates a new fastApiTableAdapter', () => {
@@ -52,7 +52,7 @@ describe('#fastApiTableAdapterComposable', () => {
 
   describe('methods', () => {
     beforeEach(() => {
-      composable = fastApiTableAdapterComposable('/foo', 10);
+      composable = useFastApiTableAdapter('/foo', 10);
       adapter = composable._adapter;
     });
 

tools/webpack.config.js

@@ -9,9 +9,13 @@ module.exports = {
   },
 
   entry: {
-    fastApi: {
-      import: path.resolve(__dirname, 'api/fastApi/index.js'),
-      filename: 'tools/[name].js',
+    fastApiAdapter: {
+      import: path.resolve(__dirname, 'api/fastApi/adapter.js'),
+      filename: 'tools/fastApi/index.js',
+    },
+    fastApiAdapterVue: {
+      import: path.resolve(__dirname, 'api/fastApi/vue-composable.js'),
+      filename: 'tools/fastApi/vue.js',
     },
   },
 
@@ -31,4 +35,8 @@ module.exports = {
       },
     ],
   },
+
+  externals: {
+    vue: 'vue',
+  },
 };

webpack-dev.config.js

@@ -0,0 +1,23 @@
+const configs = require('./webpack.config');
+const { parallelism } = require('./webpack.config');
+
+
+const devServerConfig = {
+  devServer: {
+    compress: true,
+    port: process.env.PORT || 3003,
+    allowedHosts: 'all',
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    static: false,
+  },
+};
+
+module.exports = [
+  devServerConfig,
+  ...configs,
+];
+
+
+module.exports.parallelism = parallelism;

webpack.config.js

@@ -4,19 +4,7 @@ const componentsConfig = require('./components/webpack.config');
 const toolsConfig = require('./tools/webpack.config');
 
 
-const devServerConfig = {
-  devServer: {
-    compress: true,
-    port: process.env.PORT || 3003,
-    allowedHosts: 'all',
-    headers: {
-      "Access-Control-Allow-Origin": "*",
-    },
-  },
-};
-
 module.exports = [
-  devServerConfig,
   componentsConfig,
   toolsConfig,
 ];