ce-ui-common merge requestshttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests2022-08-19T06:39:06Zhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/1Prototype common UI module ICSHWI-99602022-08-19T06:39:06ZJohn SpargerPrototype common UI module ICSHWI-9960This merge request contains some initial implementation for the `ce-ui-common` component/hook library. It contains the following things:
## Hooks:
#### `useAsync`
- A React hook to call async functions and get the data as state
- I cha...This merge request contains some initial implementation for the `ce-ui-common` component/hook library. It contains the following things:
## Hooks:
#### `useAsync`
- A React hook to call async functions and get the data as state
- I changed the way it works a bit. `useAsync` now
- Returns an object instead of an array: `{ value, wrapper, loading, dataReady, error }`
- Has an dataReady state to let you know when the first data is available. (We have often wanted take action after the very first loading cycle completes. Now the clients don't need to keep track of this themselves)
- Allows you to await the wrapper and get the updated value, e.g. `const value = await wrapper(); doSomething(value)`. This will be very useful in callbacks and probably reduce the number of `useEffect` blocks we need.
- Just returns the error -- some external code should deal with it.
- Works for all async functions, not just API responses (this means some code will need to shift to `callAndUnpack` or similar.
- Has some tests for all this functionality
## Components:
All components have storybooks which you can run using `npm run storybook`
#### `GlobalAppBar`
- A top app bar and collapsible menu
- The app bar displays a home button, title, and action button
- These are supplied by the user, no defaults
- These can be set via the `GlobalAppBarContext`
- The collapsible menu
- displays whatever menu items the user configures through the `menuItems` prop
- can be collapsed or opened using a toggle button
- shifts the main content over when opening or closing
- The API of this component is completely changed from the deployment tool
- Before, the only prop it accepted was `children`
- This component combines two others:
- `ButtonAppBar`
- `MenuDrawer`
#### `Table`
- A styled version of the PrimeReact DataTable
- Based on `CustomTable` from the deployment tool
- Styling done with Material UI's `styled` utility (no custom CSS file anymore)
- An updated interface:
- The `pagination` prop must be supplied to make the table's paging controls appear. This object contains all the related configuration for the page controls. Having one object for this should reduce the amount of state other components need to keep track of when using a table.
- `rowClassName` allows you to supply a function mapping the row data to some class name for styling purposes. If you don't supply one, the default will map the `severity` field of the row data to the class.
- Setting the row class to `info`, `warn`, or `error` will change the row styling. These special styles no longer use hardcoded colors. Instead, you can configure them using the theme's color palette.
- Sorting functionality has not been implemented yet
## Styles
#### `theme`
- A theme which can be used in dependent apps
- Currently only sets the font families, main colors, and demos creating a component variant
#### `General styling comments`
- I have tried to use Material UI `styled` components and the theme for everything
- I have tried to avoid inline styling (e.g. `sx`)
- I have completely avoided the deprecated `makeStyles` API
- When using styled components, I have tried to be as specific as possible with selectors
- The selectors in `Table` need some improvement in this area
- I have NOT done a good job making safe class names. This needs to be fixed soon.
## Config/Other stuff
#### `README.md`
- The readme has been updated to contain a lot of information. You can read
- How to install the module into an app from Gitlab
- How to develop the module locally
- How some of the building works
- How to run tests and storybook
#### `.babelrc`
- Configuration for building the library
#### `package.json`
- Scripts which allow you to
- Build the module locally
- Install the module locally
- Install module from git
## TODO
- There is no Gitlab CI yet
- There are no component tests
- These components don't have as much functionality as the components that inspired them (yet)https://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/2Add gitlab ci icshwi 100622022-08-24T07:11:47ZJohn SpargerAdd gitlab ci icshwi 10062Working on adding gitlab-ci
Here's what the pipeline does:
- Gets all the dependencies for later stages to use
- Runs the tests (currently only unit tests)
- Checks that library transpilation works.
- Builds the storybook static site
-...Working on adding gitlab-ci
Here's what the pipeline does:
- Gets all the dependencies for later stages to use
- Runs the tests (currently only unit tests)
- Checks that library transpilation works.
- Builds the storybook static site
- Publishes the storybook static site to Gitlab pages http://ccce.pages.esss.lu.se/dev/ce-ui-common
-- code quality does not seem to be working like it did in the deploy-ui. I get some errors. Not sure why yet. So no linting yet
-- We probably want to publish the pages only on certain branches or manually. But for now it's useful to have it available at all.https://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/3API communication ICSHWI-101032022-08-31T09:37:28ZJohn SpargerAPI communication ICSHWI-10103This merge request adds:
- Hooks and contexts for generating/getting an OpenAPI client (`useCreateAPIClient` and `APIProvider`)
- Reentrance detection in `useAsync` (can be used to abort requests)
- (Reentrance is when you call a func...This merge request adds:
- Hooks and contexts for generating/getting an OpenAPI client (`useCreateAPIClient` and `APIProvider`)
- Reentrance detection in `useAsync` (can be used to abort requests)
- (Reentrance is when you call a function again before the last call to the function has finished)
- (This happens, for example, when we issue a second API request to an endpoint before the first has returned a response)
- A wrapper for api methods, `useAPIMethod`, which lets you:
- provide default parameters and options for the API call
- transform the response data and deal with status codes
- abort API requests with an `AbortController` on reentrance (optional)
- returns the normal `useAsync` stuff plus an `abort` command.
- Pagination hook `usePagination`
In addition:
- Tests are added for all new functionality
- A mock API and MSW interception have been added to support testing in
- unit-tests
- storybook
- Storybook for `Table` shows example of using `APIProvider`, `useAPIMethod`, and `usePagination`
- You should be able to see the Storybook here: http://ccce.pages.esss.lu.se/dev/ce-ui-commonhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/4Fix column width and alignment in Table2022-09-02T17:47:07ZJohn SpargerFix column width and alignment in TableFix to allow settings for column (min) width and alignment to take effect when using Table component.
Prime react has switched to using flexbox in the PrimeReact data table, so the code needed to be updated.
In addition, the CSS for Prim...Fix to allow settings for column (min) width and alignment to take effect when using Table component.
Prime react has switched to using flexbox in the PrimeReact data table, so the code needed to be updated.
In addition, the CSS for PrimeReact datatable does not work quite right, so we manually set some CSS styles for alignment.
Once the pipeline succeeds, Check the storybook for Table to see some examples of alignment on the "id" column and for a minimum width (if you make the window smaller, eventually the columns will stop shrinking)
http://ccce.pages.esss.lu.se/dev/ce-ui-commonhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/5Fix table min-widths, sizing, scrolling, truncation2022-09-06T07:51:15ZJohn SpargerFix table min-widths, sizing, scrolling, truncationActually fix the table so that min-widths, scrolling, table-resizing, truncation, and scrolling work
Check the storybook after the build:
http://ccce.pages.esss.lu.se/dev/ce-ui-commonActually fix the table so that min-widths, scrolling, table-resizing, truncation, and scrolling work
Check the storybook after the build:
http://ccce.pages.esss.lu.se/dev/ce-ui-commonhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/6More common UI components ICSHWI-102052022-09-07T11:47:15ZJohn SpargerMore common UI components ICSHWI-10205Adding some commonly used UI components:
- KeyValueTable
- Dialog + ConfirmationDialog
Also:
- Fix/refactor GlobalAppBar, especially the layout
Check storybook when pipeline is complete to see new components:
http://ccce.pages.esss.lu....Adding some commonly used UI components:
- KeyValueTable
- Dialog + ConfirmationDialog
Also:
- Fix/refactor GlobalAppBar, especially the layout
Check storybook when pipeline is complete to see new components:
http://ccce.pages.esss.lu.se/dev/ce-ui-commonhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/7File viewers ICSHWI-102392022-09-15T10:59:12ZJohn SpargerFile viewers ICSHWI-10239This merge request adds some components for viewing/editing files and JSON data:
- Editor: a code editor with syntax highlighting based on Ace (first draft)
- JSONEditor: a JSON specialization of the Editor which adds:
- JSON syntax c...This merge request adds some components for viewing/editing files and JSON data:
- Editor: a code editor with syntax highlighting based on Ace (first draft)
- JSONEditor: a JSON specialization of the Editor which adds:
- JSON syntax checking
- JSON schema validation
- Inline error annotations
- Optional error alerts
As always, check the storybook when the pipeline is complete:
http://ccce.pages.esss.lu.se/dev/ce-ui-commonhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/8Search bar simple accordion ICSHWI 103572022-09-28T14:50:54ZZoltan RunyoSearch bar simple accordion ICSHWI 10357https://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/9Remove undesired hover effects (not applied on not clickable rows)2022-10-03T09:36:04ZZoltan RunyoRemove undesired hover effects (not applied on not clickable rows)https://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/10Authentication & authorization2022-10-24T12:22:32ZZoltan RunyoAuthentication & authorizationhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/11Update main, fine.2022-11-10T13:09:18ZSimon RoseUpdate main, fine.Simon RoseSimon Rosehttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/12Expandable viewer2022-11-21T08:39:57ZZoltan RunyoExpandable viewerDetails: https://jira.esss.lu.se/browse/ICSHWI-10854Details: https://jira.esss.lu.se/browse/ICSHWI-10854https://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/13ICSHWI-10063: Install and write cypress tests for existing components2022-12-05T13:10:42ZAlexander MadsenICSHWI-10063: Install and write cypress tests for existing componentsInstalled cypress testing library to the project.
Add cypress tests for Login and Editor components.Installed cypress testing library to the project.
Add cypress tests for Login and Editor components.Alexander MadsenAlexander Madsenhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/14ICSHWI-10839: Extended documentation ce-ui-common2022-12-13T14:26:18ZAlexander MadsenICSHWI-10839: Extended documentation ce-ui-commonAdded some documentation for (in) the common components.
Changed some css properties to camelCase.
[Ticker](https://jira.esss.lu.se/browse/ICSHWI-10839)Added some documentation for (in) the common components.
Changed some css properties to camelCase.
[Ticker](https://jira.esss.lu.se/browse/ICSHWI-10839)Alexander MadsenAlexander Madsenhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/15ICSHWI-10837: Revised and extend README for ce-ui-common2022-12-13T14:42:52ZAlexander MadsenICSHWI-10837: Revised and extend README for ce-ui-commonAdded instructions about, node, peer dependencies, material ui & cypress to repo root README.md
[Ticket](https://jira.esss.lu.se/browse/ICSHWI-10837)Added instructions about, node, peer dependencies, material ui & cypress to repo root README.md
[Ticket](https://jira.esss.lu.se/browse/ICSHWI-10837)Alexander MadsenAlexander Madsenhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/16ICSHWI-10606: Revise definition tables2023-01-13T10:05:05ZAlexander MadsenICSHWI-10606: Revise definition tablesTicket: https://jira.esss.lu.se/browse/ICSHWI-10606
Changed text placement in cells according to definitions found in ticket.Ticket: https://jira.esss.lu.se/browse/ICSHWI-10606
Changed text placement in cells according to definitions found in ticket.Alexander MadsenAlexander Madsenhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/17Intorducing placeholder for searchbar2023-01-17T09:23:51ZImre TothIntorducing placeholder for searchbarImre TothImre Tothhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/18ICSHWI-11526: Implement automated formatting and linting for ce-ui-common2023-01-24T14:42:16ZAlexander MadsenICSHWI-11526: Implement automated formatting and linting for ce-ui-commonInstalled Prettier, ESLint and plugins.
Installed pre-commit config and added it to CI.
Updated files by running Prettier and ESLint.Installed Prettier, ESLint and plugins.
Installed pre-commit config and added it to CI.
Updated files by running Prettier and ESLint.Alexander MadsenAlexander Madsenhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/19ICSHWI-11528 - Improve file structure2023-02-03T10:59:56ZAlexander MadsenICSHWI-11528 - Improve file structureImprove file structure by separating storybook stories to it's own directory and component to there own directories.
Ticket: https://jira.esss.lu.se/browse/ICSHWI-11528Improve file structure by separating storybook stories to it's own directory and component to there own directories.
Ticket: https://jira.esss.lu.se/browse/ICSHWI-11528Alexander MadsenAlexander Madsenhttps://gitlab.esss.lu.se/ccce/dev/ce-ui-common/-/merge_requests/20ICSHWI-11540 - Cursor should indicate link on hover on table cells which are ...2023-02-07T08:44:08ZAlexander MadsenICSHWI-11540 - Cursor should indicate link on hover on table cells which are linksTicket: [ICSHWI-11540](https://jira.esss.lu.se/browse/ICSHWI-11540)
Add cursor pointer to linked table rows.Ticket: [ICSHWI-11540](https://jira.esss.lu.se/browse/ICSHWI-11540)
Add cursor pointer to linked table rows.Alexander MadsenAlexander Madsen