Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity
d1ea959486
unleash.unleash/frontend
History
renovate[bot] d1ea959486
chore(deps): update react-router monorepo to v6.21.1 (#5886) 
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [react-router](https://togithub.com/remix-run/react-router)
([source](https://togithub.com/remix-run/react-router/tree/HEAD/packages/react-router))
| [`6.20.1` ->
`6.21.1`](https://renovatebot.com/diffs/npm/react-router/6.20.1/6.21.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-router/6.21.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-router/6.21.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-router/6.20.1/6.21.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-router/6.20.1/6.21.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
| [react-router-dom](https://togithub.com/remix-run/react-router)
([source](https://togithub.com/remix-run/react-router/tree/HEAD/packages/react-router-dom))
| [`6.20.1` ->
`6.21.1`](https://renovatebot.com/diffs/npm/react-router-dom/6.20.1/6.21.1)
|
[![age](https://developer.mend.io/api/mc/badges/age/npm/react-router-dom/6.21.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/react-router-dom/6.21.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/react-router-dom/6.20.1/6.21.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/react-router-dom/6.20.1/6.21.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>remix-run/react-router (react-router)</summary>

###
[`v6.21.1`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router/CHANGELOG.md#6211)

[Compare
Source](https://togithub.com/remix-run/react-router/compare/react-router@6.21.0...react-router@6.21.1)

##### Patch Changes

- Fix bug with `route.lazy` not working correctly on initial SPA load
when `v7_partialHydration` is specified
([#&#8203;11121](https://togithub.com/remix-run/react-router/pull/11121))
-   Updated dependencies:
    -   `@remix-run/router@1.14.1`

###
[`v6.21.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router/CHANGELOG.md#6210)

[Compare
Source](https://togithub.com/remix-run/react-router/compare/react-router@6.20.1...react-router@6.21.0)

##### Minor Changes

- Add a new `future.v7_relativeSplatPath` flag to implement a breaking
bug fix to relative routing when inside a splat route.
([#&#8203;11087](https://togithub.com/remix-run/react-router/pull/11087))

This fix was originally added in
[#&#8203;10983](https://togithub.com/remix-run/react-router/issues/10983)
and was later reverted in
[#&#8203;11078](https://togithub.com/remix-run/react-router/pull/11078)
because it was determined that a large number of existing applications
were relying on the buggy behavior (see
[#&#8203;11052](https://togithub.com/remix-run/react-router/issues/11052))

    **The Bug**
The buggy behavior is that without this flag, the default behavior when
resolving relative paths is to *ignore* any splat (`*`) portion of the
current route path.

    **The Background**
This decision was originally made thinking that it would make the
concept of nested different sections of your apps in `<Routes>` easier
if relative routing would *replace* the current splat:

    ```jsx
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="dashboard/*" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
    ```

Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects`
will match the `Dashboard` route. The dashboard component itself can
then render nested `<Routes>`:

    ```jsx
    function Dashboard() {
      return (
        <div>
          <h2>Dashboard</h2>
          <nav>
            <Link to="/">Dashboard Home</Link>
            <Link to="team">Team</Link>
            <Link to="projects">Projects</Link>
          </nav>

          <Routes>
            <Route path="/" element={<DashboardHome />} />
            <Route path="team" element={<DashboardTeam />} />
            <Route path="projects" element={<DashboardProjects />} />
          </Routes>
        </div>
      );
    }
    ```

Now, all links and route paths are relative to the router above them.
This makes code splitting and compartmentalizing your app really easy.
You could render the `Dashboard` as its own independent app, or embed it
into your large app without making any changes to it.

    **The Problem**

The problem is that this concept of ignoring part of a path breaks a lot
of other assumptions in React Router - namely that `"."` always means
the current location pathname for that route. When we ignore the splat
portion, we start getting invalid paths when using `"."`:

    ```jsx
// If we are on URL /dashboard/team, and we want to link to
/dashboard/team:
    function DashboardTeam() {
      // ❌ This is broken and results in <a href="/dashboard">
      return <Link to=".">A broken link to the Current URL</Link>;

// ✅ This is fixed but super unintuitive since we're already at
/dashboard/team!
      return <Link to="./team">A broken link to the Current URL</Link>;
    }
    ```

We've also introduced an issue that we can no longer move our
`DashboardTeam` component around our route hierarchy easily - since it
behaves differently if we're underneath a non-splat route, such as
`/dashboard/:widget`. Now, our `"."` links will, properly point to
ourself *inclusive of the dynamic param value* so behavior will break
from it's corresponding usage in a `/dashboard/*` route.

    Even worse, consider a nested splat route configuration:

    ```jsx
    <BrowserRouter>
      <Routes>
        <Route path="dashboard">
          <Route path="*" element={<Dashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>
    ```

Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard`
component go to the same place! That is definitely not correct!

Another common issue arose in Data Routers (and Remix) where any
`<Form>` should post to it's own route `action` if you the user doesn't
specify a form action:

    ```jsx
    let router = createBrowserRouter({
      path: "/dashboard",
      children: [
        {
          path: "*",
          action: dashboardAction,
          Component() {
// ❌ This form is broken! It throws a 405 error when it submits because
// it tries to submit to /dashboard (without the splat value) and the
parent
            // `/dashboard` route doesn't have an action
            return <Form method="post">...</Form>;
          },
        },
      ],
    });
    ```

This is just a compounded issue from the above because the default
location for a `Form` to submit to is itself (`"."`) - and if we ignore
the splat portion, that now resolves to the parent route.

    **The Solution**
If you are leveraging this behavior, it's recommended to enable the
future flag, move your splat to it's own route, and leverage `../` for
any links to "sibling" pages:

    ```jsx
    <BrowserRouter>
      <Routes>
        <Route path="dashboard">
          <Route index path="*" element={<Dashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>

    function Dashboard() {
      return (
        <div>
          <h2>Dashboard</h2>
          <nav>
            <Link to="..">Dashboard Home</Link>
            <Link to="../team">Team</Link>
            <Link to="../projects">Projects</Link>
          </nav>

          <Routes>
            <Route path="/" element={<DashboardHome />} />
            <Route path="team" element={<DashboardTeam />} />
            <Route path="projects" element={<DashboardProjects />} />
          </Router>
        </div>
      );
    }
    ```

This way, `.` means "the full current pathname for my route" in all
cases (including static, dynamic, and splat routes) and `..` always
means "my parents pathname".

##### Patch Changes

- Properly handle falsy error values in ErrorBoundary's
([#&#8203;11071](https://togithub.com/remix-run/react-router/pull/11071))
-   Updated dependencies:
    -   `@remix-run/router@1.14.0`

</details>

<details>
<summary>remix-run/react-router (react-router-dom)</summary>

###
[`v6.21.1`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#6211)

[Compare
Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.21.0...react-router-dom@6.21.1)

##### Patch Changes

-   Updated dependencies:
    -   `react-router@6.21.1`
    -   `@remix-run/router@1.14.1`

###
[`v6.21.0`](https://togithub.com/remix-run/react-router/blob/HEAD/packages/react-router-dom/CHANGELOG.md#6210)

[Compare
Source](https://togithub.com/remix-run/react-router/compare/react-router-dom@6.20.1...react-router-dom@6.21.0)

##### Minor Changes

- Add a new `future.v7_relativeSplatPath` flag to implement a breaking
bug fix to relative routing when inside a splat route.
([#&#8203;11087](https://togithub.com/remix-run/react-router/pull/11087))

This fix was originally added in
[#&#8203;10983](https://togithub.com/remix-run/react-router/issues/10983)
and was later reverted in
[#&#8203;11078](https://togithub.com/remix-run/react-router/pull/11078)
because it was determined that a large number of existing applications
were relying on the buggy behavior (see
[#&#8203;11052](https://togithub.com/remix-run/react-router/issues/11052))

    **The Bug**
The buggy behavior is that without this flag, the default behavior when
resolving relative paths is to *ignore* any splat (`*`) portion of the
current route path.

    **The Background**
This decision was originally made thinking that it would make the
concept of nested different sections of your apps in `<Routes>` easier
if relative routing would *replace* the current splat:

    ```jsx
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="dashboard/*" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
    ```

Any paths like `/dashboard`, `/dashboard/team`, `/dashboard/projects`
will match the `Dashboard` route. The dashboard component itself can
then render nested `<Routes>`:

    ```jsx
    function Dashboard() {
      return (
        <div>
          <h2>Dashboard</h2>
          <nav>
            <Link to="/">Dashboard Home</Link>
            <Link to="team">Team</Link>
            <Link to="projects">Projects</Link>
          </nav>

          <Routes>
            <Route path="/" element={<DashboardHome />} />
            <Route path="team" element={<DashboardTeam />} />
            <Route path="projects" element={<DashboardProjects />} />
          </Routes>
        </div>
      );
    }
    ```

Now, all links and route paths are relative to the router above them.
This makes code splitting and compartmentalizing your app really easy.
You could render the `Dashboard` as its own independent app, or embed it
into your large app without making any changes to it.

    **The Problem**

The problem is that this concept of ignoring part of a path breaks a lot
of other assumptions in React Router - namely that `"."` always means
the current location pathname for that route. When we ignore the splat
portion, we start getting invalid paths when using `"."`:

    ```jsx
// If we are on URL /dashboard/team, and we want to link to
/dashboard/team:
    function DashboardTeam() {
      // ❌ This is broken and results in <a href="/dashboard">
      return <Link to=".">A broken link to the Current URL</Link>;

// ✅ This is fixed but super unintuitive since we're already at
/dashboard/team!
      return <Link to="./team">A broken link to the Current URL</Link>;
    }
    ```

We've also introduced an issue that we can no longer move our
`DashboardTeam` component around our route hierarchy easily - since it
behaves differently if we're underneath a non-splat route, such as
`/dashboard/:widget`. Now, our `"."` links will, properly point to
ourself *inclusive of the dynamic param value* so behavior will break
from it's corresponding usage in a `/dashboard/*` route.

    Even worse, consider a nested splat route configuration:

    ```jsx
    <BrowserRouter>
      <Routes>
        <Route path="dashboard">
          <Route path="*" element={<Dashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>
    ```

Now, a `<Link to=".">` and a `<Link to="..">` inside the `Dashboard`
component go to the same place! That is definitely not correct!

Another common issue arose in Data Routers (and Remix) where any
`<Form>` should post to it's own route `action` if you the user doesn't
specify a form action:

    ```jsx
    let router = createBrowserRouter({
      path: "/dashboard",
      children: [
        {
          path: "*",
          action: dashboardAction,
          Component() {
// ❌ This form is broken! It throws a 405 error when it submits because
// it tries to submit to /dashboard (without the splat value) and the
parent
            // `/dashboard` route doesn't have an action
            return <Form method="post">...</Form>;
          },
        },
      ],
    });
    ```

This is just a compounded issue from the above because the default
location for a `Form` to submit to is itself (`"."`) - and if we ignore
the splat portion, that now resolves to the parent route.

    **The Solution**
If you are leveraging this behavior, it's recommended to enable the
future flag, move your splat to it's own route, and leverage `../` for
any links to "sibling" pages:

    ```jsx
    <BrowserRouter>
      <Routes>
        <Route path="dashboard">
          <Route index path="*" element={<Dashboard />} />
        </Route>
      </Routes>
    </BrowserRouter>

    function Dashboard() {
      return (
        <div>
          <h2>Dashboard</h2>
          <nav>
            <Link to="..">Dashboard Home</Link>
            <Link to="../team">Team</Link>
            <Link to="../projects">Projects</Link>
          </nav>

          <Routes>
            <Route path="/" element={<DashboardHome />} />
            <Route path="team" element={<DashboardTeam />} />
            <Route path="projects" element={<DashboardProjects />} />
          </Router>
        </div>
      );
    }
    ```

This way, `.` means "the full current pathname for my route" in all
cases (including static, dynamic, and splat routes) and `..` always
means "my parents pathname".

##### Patch Changes

-   Updated dependencies:
    -   `@remix-run/router@1.14.0`
    -   `react-router@6.21.0`

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 7pm every weekday,before 5am
every weekday" in timezone Europe/Madrid, Automerge - At any time (no
schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these
updates again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/Unleash/unleash).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xMjcuMCIsInVwZGF0ZWRJblZlciI6IjM3LjEyNy4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-01-12 22:46:33 +00:00
..
cypress chore: wait for post to finish instead of waiting a fixed time (#5851) 2024-01-11 11:03:01 +01:00
public
scripts feat: Generate new OAS types, tags component upgrade (#3269) 2023-03-15 11:35:24 +02:00
src chore: fix lints on main (#5877) 2024-01-12 11:38:08 +00:00
.editorconfig add editorconfig 2016-12-05 23:08:32 +01:00
.gitignore
.nvmrc chore: update to node 18 (#3527) 2023-04-18 10:35:32 +02:00
cypress.config.ts chore: upgrading vite to newer version (#5703) 2023-12-20 14:48:18 +01:00
cypress.d.ts feat: biome lint frontend (#4903) 2023-10-02 13:25:46 +01:00
index.html feat: dynamic icons by adding material symbols font (#5008) 2023-10-12 11:22:23 +01:00
index.js feat: biome lint frontend (#4903) 2023-10-02 13:25:46 +01:00
orval.config.js feat: features list pagination (#5496) 2023-12-01 14:53:05 +00:00
package.json chore(deps): update react-router monorepo to v6.21.1 (#5886) 2024-01-12 22:46:33 +00:00
README.md feat: application usage frontend (#4561) 2023-08-24 13:13:02 +03:00
tsconfig.json
tsconfig.node.json chore: upgrading vite to newer version (#5703) 2023-12-20 14:48:18 +01:00
vercel.json
vite.config.mts fix: fix assets not showing up (#5757) 2024-01-04 12:11:42 +02:00
yarn.lock chore(deps): update react-router monorepo to v6.21.1 (#5886) 2024-01-12 22:46:33 +00:00

README.md

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