9b282a436d
Reduces the size of the tab buttons on the flag page: - Sets the min width to 100px instead of 160px on md screens. No change for smaller screens - Removes the min-height restriction imposed by theme.ts for the tab bar, instead relying on the tab buttons to determine the height (effectively changes the height from 70px to 62px). Additionally: fixes an issue where the action buttons would overlap with the tab buttons before wrapping and makes the tab bar scrollable. I can no longer reproduce the issue where the action buttons force the tab bar to be too small, but even if they should do that now, the tab bar is scrollable so the remaining tabs are still accessible. Because we only override the tabs' min-width on wider screens and mui sets a default min-width, I changed the `onNarrowHeader` function to `onWideHeader` and adjusted the other components accordingly. As a bonus, the tab width and header wrapping now happens at the same time 🥳 After the change:  ## Accessibility This PR also addresses some of the a11y issues with this tab bar, namely that it adds an `aria-label`, as mentioned in the [MUI docs](https://v5.mui.com/material-ui/react-tabs/#accessibility). It does **not**, however, connect the tabs to their corresponding tab panels. The main reason for this is that we're not using tab panels and that they're spread over 4 different components. We're probably using the tabs component for something it isn't really designed to do in this way. (Arguably they should be links and not buttons, for instance.) I'm not going to touch this now, because that would probably be a lot of work and it's not something I expect the business would prioritize. ## Changing theme.ts While it's tempting to go in and change the `min-height` in `theme.ts`, that would potentially affect all the other tab bars we have (although maybe not, because we set a different min height for the tabs themselves), I want to leave that for now. There is apparently some work being done/prepared for the tabs, so it's probably better to leave that for then. |
||
|---|---|---|
| .. | ||
| .yarn/releases | ||
| cypress | ||
| public | ||
| scripts | ||
| src | ||
| .editorconfig | ||
| .gitignore | ||
| .npmignore | ||
| .nvmrc | ||
| .yarnrc.yml | ||
| check-imports.rc | ||
| cypress.config.ts | ||
| cypress.d.ts | ||
| index.html | ||
| index.js | ||
| orval.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vercel.json | ||
| vite.config.mts | ||
| yarn.lock | ||
frontend
This directory contains the Unleash Admin UI frontend app.
Run with a local instance of the unleash-api
Refer to the Contributing to Unleash guide for instructions. The frontend dev server runs (in port 3000) simultaneously with the backend dev server (in port 4242):
yarn install
yarn dev
Run with a sandbox instance of the Unleash API
Alternatively, instead of running unleash-api on localhost, you can use a remote instance:
cd ./frontend
yarn install
yarn run start:sandbox
Running end-to-end tests
We have a set of Cypress tests that run on the build before a PR can be merged so it's important that you check these yourself before submitting a PR. On the server the tests will run against the deployed Heroku app so this is what you probably want to test against:
yarn run start:sandbox
In a different shell, you can run the tests themselves:
yarn run e2e:heroku
If you need to test against patches against a local server instance, you'll need to run that, and then run the end to end tests using:
yarn run e2e
You may also need to test that a feature works against the enterprise version of unleash. Assuming the Heroku instance is still running, this can be done by:
yarn run start:enterprise
yarn run e2e
Generating the OpenAPI client
The frontend uses an OpenAPI client generated from the backend's OpenAPI spec. Whenever there are changes to the backend API, the client should be regenerated:
For now we only use generated types (src/openapi/models). We will use methods (src/openapi/apis) for new features soon.
yarn gen:api
rm -rf src/openapi/apis
clean up src/openapi/index.ts imports, only keep first line export * from './models';
This script assumes that you have a running instance of the enterprise backend at http://localhost:4242.
The new OpenAPI client will be generated from the runtime schema of this instance.
The target URL can be changed by setting the UNLEASH_OPENAPI_URL env var.
Analyzing bundle size
npx vite-bundle-visualizer in the root of the frontend directory