> To build a Wix site agentically, follow https://www.wix.com/headless/skill.md
> 
> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - If a reference page seems to be missing its schema (parameters, return types, or type definitions), append `?schema=true` to its `.md` URL (e.g. `https://dev.wix.com/docs/contexts/contexts/stores/category-info/use-category-info-context.md?schema=true`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Migrate a Dashboard Modal Extension

## Article: Migrate a Dashboard Modal Extension

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-dashboard-modal-extension.md

## Article Content:

# Migrate a Dashboard Modal Extension

Add a dashboard modal extension to your new Wix CLI project as part of [migrating an app from the legacy Wix CLI](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli.md).

## Folder structure

| Legacy path | New path |
|--------|-----|
| `src/dashboard/modals/<name>/modal.json` | `src/extensions/dashboard/modals/<name>/<name>.extension.ts` |
| `src/dashboard/modals/<name>/modal.tsx` | `src/extensions/dashboard/modals/<name>/<name>.tsx` |

> **Note:** `<name>` is your extension's folder name in the legacy project. The new folder and files use the same name.

## Step 1 | Copy and rename the file

In the new project:

1. Create the folder `src/extensions/dashboard/modals/<name>/`.
2. From the legacy project's `src/dashboard/modals/<name>/` folder, copy `modal.tsx` into the new folder, and rename it to `<name>.tsx`.

Don't copy the legacy `modal.json` file. You recreate its values in `<name>.extension.ts`.

## Step 2 | Adapt the code to the new project

In `<name>.tsx`:

1. Replace any import from the legacy `modal.json` with the values themselves. The legacy CLI generates the extension with `import { width, height, title } from './modal.json'`, and your code may also import `id`. The JSON file isn't copied to the new project. Set the values directly in the component, or pass them as props.
2. Update any imports as needed, to use the new paths.
3. If the component imports shared code from outside the extension's folder, such as components or hooks under `src/dashboard/`, copy that code into the new project at the same path, and update the relative imports from the component's new location. See [Add the extension to the new project](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli.md#add-the-extension-to-the-new-project) in the main migration guide.
4. If the component calls a web method or an HTTP function, replace the call. Fixing the import path isn't enough, because the legacy backend code doesn't exist in that form after the migration. See [Migrate from Web Methods to HTTP Endpoints](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-from-web-methods-to-http-endpoints.md#update-your-frontend-call-sites-as-you-migrate-each-extension) or [Migrate from HTTP Functions to HTTP Endpoints](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-from-http-functions-to-http-endpoints.md#update-your-frontend-call-sites-as-you-migrate-each-extension).

## Step 3 | Create the extension file

In the new project:

1. In `src/extensions/dashboard/modals/<name>/`, create `<name>.extension.ts`.
2. Add the following code, and set each field to the value the table below specifies:

    ```ts
    import { extensions } from '@wix/custom-extensions';

    export default extensions.dashboardModal({
      id: '<value>',
      title: '<value>',
      component: './extensions/dashboard/modals/<name>/<name>.tsx',
    });
    ```

    | Field | Source in legacy project | What to specify |
    |-------|--------------------------|-----------------|
    | `id` | `id` in `modal.json` | Copy source as is |
    | `title` | `title` in `modal.json` | Copy source as is |
    | `component` | None | Path to `<name>.tsx`, relative to `src/` |

3. Add any of the following fields that apply, inside the same object:

    ```ts
    width: <value>,
    height: <value>,
    ```

    | Field | Source in legacy project | What to specify | Condition |
    |-------|--------------------------|-----------------|-----------|
    | `width` | `width` in `modal.json` | Copy source as is | Only if your legacy `modal.json` sets it |
    | `height` | `height` in `modal.json` | Copy source as is | Only if your legacy `modal.json` sets it |

<blockquote class="important">

__Important:__
The `id` must match the value from the legacy `modal.json`. Otherwise, the new entry is treated as a separate extension instead of a continuation of the legacy one.

</blockquote>

## Step 4 | Register the extension

In the new project, in `src/extensions.ts`:

1. Import the extension:

    ```ts
    import myDashboardModal from './extensions/dashboard/modals/<name>/<name>.extension';
    ```

2. Add a `.use()` call for it to the `app()` chain, on its own line:

    ```ts
    .use(myDashboardModal)
    ```

## Step 5 | Return to the main migration guide

Return to [Install the extension's dependencies](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli.md#install-the-extensions-dependencies) in the main migration guide.