# Interface Editor

The Interface Editor is an application that allows to modify and customize the [coveo-search-ui](https://github.com/coveo/search-ui).

# Install

`npm install coveo-interface-editor --save`

# Options

### Required

* **`close: () => void`**

    The function called when closing the editor. Typically, it will redirect the user to the location they were before opening the editor.

* **`delete: () => void`**

    The function called when deleting the search page. Typically, it will send a request to delete the search page followed by redirecting to the Interface Editor creator.

* **`environment: Environments`**

    The environment the Interface Editor is instantiated in. Valid values include:
    
    `CloudV2HostedSearchPage`, `CoveoForDynamics`, `CoveoForSalesforcePro`, `CoveoForSalesforceEnterprise`, `salesforcefree`.

* **`load: () => Promise<ISearchPageContent>`**

    The function to retrieve the search page. The returned object should respect the `ISearchPageContent` interface:

```
    interface ISearchPageContent {
        head: string;
        body: string;
    }
```

* **`requireConfig: Record<string, string>`**

    The option tells the Interface Editor where to retrieve the files for the Monaco code editor. Note that we package these files as part of our build process. The object should take the following form:

```
    {
        url: '<path to Interface Editor directory>/js/vs/loader.js',
        paths: {
            vs: '<path to Interface Editor directory>/js/vs'
        }
    }
```

* **`save: (body: string) => Promise<void>`**

    The function called when saving. It receives the edited search page body. Typically, it should send a request to save the page.

### Optional

* **`containerClasses?: Partial<ISearchInterfaceData>`**

    Specifies the CSS classes of elements that contain coveo-search-ui components. The `ISearchInterfaceData` interface has the following properties:

```
    interface ISearchInterfaceData {
        facetsContainer: string;
        sortsContainer: string;
        foldingsContainer: string;
        templatesContainer: string;
    }
```
    
```
    Default values:

    facetsContainer: 'coveo-facet-column' (or 'coveo-facet-container' if the "mobile" option is true),
    sortsContainer: 'coveo-sort-section',
    foldingsContainer: 'CoveoSearchInterface',
    templatesContainer: 'CoveoResultList'
```

* **`displayMode?: string`**

    Sets the width of the search page iframe. Valid values and their corresponding pixel widths are:

```
    enum displayWidths {
        mobile = 480,
        mobileLandscape = 640,
        tablet = 767,
        laptop = 1024,
        desktop = 1920,
        ipx = desktop
    }
```
    
    Default value: `desktop`

* **`features?: ICustomizableFeatures`**

    An object that allows disabling features in the Interface Editor. The `ICustomizableFeatures` interface has the following properties:

```
    interface ICustomizableFeatures {
        hideNoResultsPageToggle?: boolean;
    }
```

* **`iconsUrl?: string`**

    Allows specifying a url to load additional icons from. The response should be a JSON string containing objects that respect the `IIconFromSearchUI` interface:

```
    interface IIconFromSearchUI {
        name: string;
        img: string;
        cssClass: string;
        isFileType: boolean;
    }
```

* **`iframeCss?: string[]`**

    Allows specifying additional CSS files to include inside the Interface Editor iframes. The files will be used inside the main search page, the result layout editor and the new result template editor. If you specify this option, you must include a reference to the `InterfaceEditorIFrame.css` styles file in your array for the iframe to render correctly.

* **`mobile?: boolean`**

    Specifies if the search page is in mobile mode.

* **`repositories?: IRepository[]`**

    Repository objects specified in this array become preconfigured options shown when a user creates a new search page or a `CoveoTab` component.
    
```
    interface IRepository {
        id: string;
        title: string;
        icon: string;
        description: string;
        queries: string[];
        tabs: string[];
        facets: string[];
        sorts: string[];
        templates: IRepositoryTemplate[];
        foldings: string[];
    }
```

* **`resultCss?: string`**

    Allows specifying additional CSS files to include inside the Interface Editor iframes. These include the the result layout editor and the new result template editor. This option will not be used if `iframeCss` is defined.

* **`rootSelector?: string`**

    A selector that should retrieve the root element of the search page.

    Default value: `.CoveoSearchInterface`

* **`visibleComponents?: IVisibleComponentCreator[]`**

    Allows specifying additional drag-and-drop components. The `IVisibleComponentCreator` interface is:
    
```
    export interface IVisibleComponentCreator {
        id: string;
        creator: (parser: any) => HTMLElement;
        onDrop?: (node: IParsedNode) => JQueryPromise<IEditableNode>;
        icon: React.DOMElement<React.SVGAttributes<SVGElement>, SVGElement>;
    }
```

* **`onModeChange?: (mode: string) => void;`**
    
    Allows specifying a callback function to be executed when the interface editor mode (ie: Interface versus Code versus Help) is modified by the end user.

# Development
    Node version 6+ required
    npm install -g gulp                 # Gulp is the build tool, -g to install globally (so you can call gulp directly in the cmd line)
    npm install                         # Install all the local dependencies for the project
    gulp                                # Compiles the project (you may need to use ./node_modules/.bin/gulp).

See `Gulpfile.js` for more options.

# Dev server

    gulp dev
    gulp dev --env.production           # Starts a dev server while compiling in production mode (useful for testing the build).

This starts a webpack dev server available on http://localhost:8083

It also starts a node js express server on http://localhost:3000 to act as a mock backend that allows to save and load search pages.

# Dev server for IPX

    * Create a new file in `backend/edit/ipx.config` by copying `backend/edit/ipx.config.sample`
    * The API key needs to have VIEW/EDIT search pages privilege, as well as EXECUTE_QUERY
    * Run `gulp dev` to start the dev server as usual
    * Access `localhost:8083/ipx` in your browser
    * `orgID`, `ipxID` and `ipxName` can all be obtained easily from the admin UI interface in the IPX section.
    * The API key can be created from the administration UI as well
    * You can alternatively load `localhost:8083/ipx?org={org}&id={id}&name={name}&access_token={token}` to override any local config


# Prod server

    gulp prod
    
Compiles resources in production mode and starts a node server on http://localhost:3000.

# Analyzing bundle sizes

    gulp prod --env.analyzeBundles

The webpack-bundle-analyzer package is included in the project. It can be activated by adding `--env.analyzeBundles` to any gulp task that includes a webpack compilation step (e.g. `gulp dev`, `gulp prod`, `gulp build`).

# License

(c) Copyright 2017 Coveo Solutions Inc, all rights reserved.