Arches 7.1.0 release notes
------------------------


### Major enhancements
None

### Additional highlights
- Removes some unnecessary media that affecting package size PR #8943
- Fixes webpack compiler issue about not being able to find arches-core webpack config #8958
- Removes `webpack/webpack-meta-confg.js` and `webpack/webpack-user-config.js` and instead configures webpack via `settings.py` #8958
- Improves performance of `ResourceXResource` instance management #8974
- Other small improvements to the user interface and error messaging
  
### Dependency changes
```
Python:
    Upgraded:
        None

    Added:
        None

JavaScript:
    Upgraded:
        None

    Added:
        None
```

### Breaking changes
- `webpack/webpack-meta-confg.js` and `webpack/webpack-user-config.js` have been removed in favor of configuring webpack via `settings.py`

### Upgrading Arches

#### If upgrading from 7.0.0:
1. You must be upgraded to version 7.0.0 before proceeding. If you are on an earlier version, please skip to [Upgrading Arches :: If upgrading from version 6.1.x](#upgrading-arches-from-previous-version)

2. Be sure to backup your database before proceeding.

3. Upgrade to Arches 7.1.0
    ```
    pip install --upgrade arches
    ```

#### <a id="upgrading-arches-from-previous-version"></a> If upgrading from version 6.1.x:
1. You must be upgraded to at least version 6.1.0 before proceeding.

2. Remove django-revproxy `pip uninstall django-revproxy`

3. Be sure to backup your database before proceeding.

4. Upgrade to Arches 7.1.0
    ```
    pip install --upgrade arches
    ```

5. **Important:** If you are maintaining an Arches package, be sure to export your graphs and resource instance data before re-importing or reloading your package.
6. <a name="elasticsearch"></a> Elasticsearch 8 (ES 8) enables a feature called xpack security by default.  See the elasticsearch 8 documentation for details on the new features and how you can use them to secure your elasticsearch instance. 
    - By default, xpack security turns on SSL with a self-signed certificate and will expect requests to come from an ES user.  Elasticsearch users can be created via the elasticsearch-users command. Uncomment and override `ELASTICSEARCH_CONNECTION_OPTIONS` in `settings.py` line as needed (with an appropriate password and certificate settings) in your project settings or settings_local files.  
    - If you choose to turn off xpack security in your ES 8 instance (not recommended) you will need to override the `ELASTICSEARCH_HOSTS` setting and change the scheme to "http".

### Upgrading an Arches project

#### If upgrading from 7.0.0:
1. Your project must be upgraded to version 7.0.0 before proceeding. If you are on an earlier version, please skip to [Upgrading an Arches Project :: If upgrading from version 6.1.x:](#upgrading-project-from-previous-version)

2. Be sure to backup your database before proceeding.

3. In your project's `settings.py` file:
    - ensure `STATIC_URL` has a valid value
    - ensure `APP_ROOT` has a valid value
    - update the `package_settings` and `settings_local` import blocks:
        ```
            # 7.0.0

            try:
                from .package_settings import *
            except ImportError:
                pass

            try:
                from .settings_local import *
            except ImportError:
                pass
        ```
        ```
            # 7.1.0

            try:
                from .package_settings import *
            except ImportError:
                try: 
                    from package_settings import *
                except ImportError as e:
                    pass

            try:
                from .settings_local import *
            except ImportError as e:
                try: 
                    from settings_local import *
                except ImportError as e:
                    pass
        ```
    - add a return to the **bottom** of the file that NODEJS can parse:
        ```
            if __name__ == "__main__":
                print(
                    json.dumps({
                        'ARCHES_NAMESPACE_FOR_DATA_EXPORT': ARCHES_NAMESPACE_FOR_DATA_EXPORT,
                        'STATIC_URL': STATIC_URL,
                        'ROOT_DIR': ROOT_DIR,
                        'APP_ROOT': APP_ROOT,
                        'WEBPACK_DEVELOPMENT_SERVER_PORT': WEBPACK_DEVELOPMENT_SERVER_PORT,
                    })
                )
                sys.stdout.flush()
        ```
    - ( optional ) by default `ARCHES_NAMESPACE_FOR_DATA_EXPORT` is assigned the value `"http://localhost:8000/"`.
        If running your Django server elsewhere, overwrite `ARCHES_NAMESPACE_FOR_DATA_EXPORT` in your project's `settings.py` file.
    - ( optional ) by default `WEBPACK_DEVELOPMENT_SERVER_PORT` is assigned the value `9000`.
        If you want the webpack server to run on a different port, overwrite `WEBPACK_DEVELOPMENT_SERVER_PORT` in your project's `settings.py` file.

4. Within your project, with your Python 3 virtual environment activated:
    ```
        python manage.py migrate
        python manage.py updateproject
    ```

    NOTE: Running `python manage.py updateproject` will delete your `webpack` directory and replace it with an updated version from arches-core. 

5. If you have any project-level JavaScript dependencies, ensure they are aliased correctly in `webpack/webpack-node-modules-aliases.js`

6. Start your application server.

7. In a seperate terminal, navigate to the root directory of the project ( you should be on the same level as `package.json`) 
    - run `yarn`, this will install updated frontend dependencies in `/media/node_modules`.
    - run `yarn build_production`, `yarn build_development` or `yarn_start`. This will regenerate your `media/build` directory.
        - `yarn build_production` will build a minified production bundle for the frontend of the application -- this should complete in less than an hour
        - `yarn build_development` will build a development bundle for the frontend assests of the application -- this should complete in less than 2 minutes
        - `yarn start` will build the frontend of the application and then start a webpack development server

8. If you are running Arches on Apache, be sure to run:

    ```
    python manage.py build_production
    ```
    and restart your server.
    ```
    sudo service apache2 reload
    ```

9. Finally, If you are running Celery, you should also restart your Celery worker(s). The process for doing this depends on how Celery is being run.

#### <a id="upgrading-project-from-previous-version"></a> If upgrading from version 6.1.x:

1. Be sure to backup your database before proceeding.

2. in your project's `settings.py` file:
    1. `MOBILE_OAUTH_CLIENT_ID` must be renamed to `OAUTH_CLIENT_ID`
    2. ensure `webpack_loader` has been added to `INSTALLED_APPS`
    3. ensure `APP_NAME` and `ARCHES_NAMESPACE_FOR_DATA_EXPORT` have been defined
    4. ensure the following attributes exist in the file:
        ```
        STATIC_ROOT = os.path.join(ROOT_DIR, "staticfiles")
        ```
        ```
        STATIC_URL = "/static/"
        ```
        ```
        STATICFILES_DIRS =  (
            os.path.join(APP_ROOT, 'media', 'build'),
            os.path.join(APP_ROOT, 'media'),
        ) + STATICFILES_DIRS
        ```
        ```
        WEBPACK_LOADER = {
            "DEFAULT": {
                "STATS_FILE": os.path.join(APP_ROOT, "webpack/webpack-stats.json"),
            },
        }
        ```
    5. ensure `STATIC_URL` has a valid value
    6. ensure `APP_ROOT` has a valid value
    7. update the `package_settings` and `settings_local` import blocks:
        ```
            # 7.0.0

            try:
                from .package_settings import *
            except ImportError:
                pass

            try:
                from .settings_local import *
            except ImportError:
                pass
        ```
        ```
            # 7.1.0

            try:
                from .package_settings import *
            except ImportError:
                try: 
                    from package_settings import *
                except ImportError as e:
                    pass

            try:
                from .settings_local import *
            except ImportError as e:
                try: 
                    from settings_local import *
                except ImportError as e:
                    pass
        ```
    8. add a return to the **bottom** of the file that NODEJS can parse:
        ```
            if __name__ == "__main__":
                print(
                    json.dumps({
                        'ARCHES_NAMESPACE_FOR_DATA_EXPORT': ARCHES_NAMESPACE_FOR_DATA_EXPORT,
                        'STATIC_URL': STATIC_URL,
                        'ROOT_DIR': ROOT_DIR,
                        'APP_ROOT': APP_ROOT,
                        'WEBPACK_DEVELOPMENT_SERVER_PORT': WEBPACK_DEVELOPMENT_SERVER_PORT,
                    })
                )
                sys.stdout.flush()
        ```
    9. ( optional ) By default `ARCHES_NAMESPACE_FOR_DATA_EXPORT` is assigned the value `"http://localhost:8000/"`.
        If running your Django server elsewhere, overwrite `ARCHES_NAMESPACE_FOR_DATA_EXPORT` in your project's `settings.py` file.
    10. ( optional ) By default `WEBPACK_DEVELOPMENT_SERVER_PORT` is assigned the value `9000`.
        If you want the webpack server to run on a different port, overwrite `WEBPACK_DEVELOPMENT_SERVER_PORT` in your project's `settings.py` file.

3. Within your project with your Python 3 virtual environment activated:
    ```
        python manage.py migrate
        python manage.py es reindex_database
    ```

4. If you have not yet run `python manage.py updateproject`, do so now. It will create a `/webpack/` directory in your project and copy over the webpack configuration files from arches core.

5. If you have any project-level JavaScript dependencies, ensure they are aliased correctly in `webpack/webpack-node-modules-aliases.js`.

6. Copy `.eslintrc.js`, `.eslintignore`, `.babelrc`, `.browserslistrc` and `.stylelintrc.json` from arches-core to your project directory.

7. Update the project's `.gitignore` file to include:
    ```
    my_project/staticfiles
    my_project/webpack/webpack-stats.json
    node_modules
    ```

8. Update the contents of `.yarnrc` to reference `node_modules` instead of `packages`:
    ```
    --install.modules-folder "./media/node_modules"
    --add.modules-folder "./media/node_modules"
    ```

9. The project's `package.json` file will need to be manually updated to include `devDependencies` and updated yarn `scripts`. It should contain the following `scripts` object and `devDependencies` object:
    ```
    "scripts": {
        "build_production": "NODE_PATH=./media/node_modules NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production ./media/node_modules/.bin/webpack --config webpack/webpack.config.prod.js",
        "build_development": "NODE_PATH=./media/node_modules NODE_OPTIONS=--max_old_space_size=8192 ./media/node_modules/.bin/webpack --config webpack/webpack.config.dev.js",
        "build_test": "NODE_PATH=./media/node_modules NODE_OPTIONS=--max_old_space_size=8192 ./media/node_modules/.bin/webpack --config webpack/webpack.config.dev.js --env test=true",
        "start": "NODE_PATH=./media/node_modules NODE_OPTIONS=--max_old_space_size=8192 ./media/node_modules/.bin/webpack serve --config webpack/webpack.config.dev.js"
    },
    ```
    ```
    "devDependencies": {
        "arches-dev-dependencies": "archesproject/arches-dev-dependencies#dev/7.1.x"
    },
    ```

10. Update the templates in your project:
    - If a template is using the `{% load staticfiles %}` template tag, it must be updated to `{% load static %}`
    - If a template is using the `{% static '/path/to/file' %}` template tag, it must be updated to `{% webpack_static '/path/to/file' %}`
        - Be sure to include `{% load webpack_static from webpack_loader %}` at the top of any template where this change is made

11. The pattern used for JavaScript component template dependencies has changed, and any project components must be updated as well. Consider the
following example with our `reports/default.js` component:

    ```
    # dev/6.2.x

    define(['knockout', 'viewmodels/report'], function(ko, ReportViewModel) {
        return ko.components.register('default-report', {
            viewModel: function(params) {
                params.configKeys = [];

                ReportViewModel.apply(this, [params]);
            },
            template: { require: 'text!report-templates/default' }
        });
    });
    ```
    ```
    # dev/7.1.x

    define(['knockout', 'viewmodels/report' 'templates/views/report-templates/default.htm'], function(ko, ReportViewModel, defaultReportTemplate) {
        return ko.components.register('default-report', {
            viewModel: function(params) {
                params.configKeys = [];

                ReportViewModel.apply(this, [params]);
            },
            template: defaultReportTemplate
        });
    });
    ```

12. (optional) If internationalization is important to your project, strings in component templates (eg. any template that is a dependency of a JavaScript file) should be moved to `javascript.htm` and added as a key-value pair to an `arches-translations` HTML object. You must then update your component template to use the new string: 
    ```
    # my_project/my_project/templates/javascript.htm

    {% extends "javascript.htm" %}

    {% load static %}
    {% load l10n %}
    {% load i18n %}

    {% block arches_translations %}
    {{ block.super }}
    <div 
        class='arches-translations'
        my-key-name='{% trans "My key value." as myKeyValue %} "{{ myKeyValue|escapejs }}"'
    ></div>
    {% endblock arches_translations %}

    ```
    ```
    # my_project/my_project/templates/path/to/component.htm

    <span data-bind="text: $root.translations.textKeyOnArchesTranslationObject"></span>

    # OR

    <select 
        data-bind="placeholder: $root.translations.textKeyOnArchesTranslationObject"
    ></select>

    # OR

    <input data-bind="attr:{placeholder: $root.translations.textKeyOnArchesTranslationObject}></input>
    ```
    Note: Keys added to the `arches-translations` HTML object should be dash-delineated, eg. `my-key-name`. When referenced in a component template, the key should be camelcase instead, eg. `myKeyName`.

13. Update the project's `index.htm` `/package` references to `/node_modules` references, along with any other references to `/media/packaages` in your codebase.

14. Start your application server.

15. In a seperate terminal, navigate to the root directory of the project ( you should be on the same level as `package.json`) 
    - manually remove the `yarn.lock` file, eg. `rm yarn.lock`
    - run `yarn`, this will install updated frontend dependencies in `/media/node_modules`.
    - (optional) You can remove `/media/packages`

16. In the same terminal window where you ran `yarn`, run `yarn build_production`, `yarn build_development` or `yarn_start`. This will generate your `media/build` directory.
    - `yarn build_production` will build a minified production bundle for the frontend of the application -- this should complete in less than an hour
    - `yarn build_development` will build a development bundle for the frontend assests of the application -- this should complete in less than 2 minutes
    - `yarn start` will build the frontend of the application and then start a webpack development server

17. If you are running Arches on Apache, be sure to run:

    ```
    python manage.py build_production
    ```
    and restart your server.
    ```
    sudo service apache2 reload
    ```

18. Finally, If you are running Celery, you should also restart your Celery worker(s). The process for doing this depends on how Celery is being run.