NIFI-13089: Updating PR Template and README for new UI (#8693)

* NIFI-13089:
- Updating PR Template and README for new UI.

* Update nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/README.md

Reformatting the code structure layout.

Co-authored-by: Rob Fellows <rob.fellows@gmail.com>

---------

Co-authored-by: Rob Fellows <rob.fellows@gmail.com>

This closes #8693

.github/PULL_REQUEST_TEMPLATE.md

@@ -42,6 +42,10 @@ Please indicate the verification steps performed prior to pull request creation.
 - [ ] Build completed using `mvn clean install -P contrib-check`
   - [ ] JDK 21
 
+### UI Contributions
+
+- [ ] NiFi is modernizing its UI. Any contributions that update the [current UI](https://github.com/apache/nifi/tree/main/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui) also need to be implemented in the [new UI](https://github.com/apache/nifi/tree/main/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi).  
+
 ### Licensing
 
 - [ ] New dependencies are compatible with the [Apache License 2.0](https://apache.org/licenses/LICENSE-2.0) according to the [License Policy](https://www.apache.org/legal/resolved.html)

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/README.md

@@ -1,28 +1,58 @@
 # NiFi
 
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
-
 ## General Info
 
-### Nx
+This module is the primary UI for NiFi. It contains the canvas and all UI's for managing the NiFi instance. There are other modules within the codebase
+that support other UIs that intergate with this. These include documentation, data viewers, advanced configuration UIs, error handling, and Registry UIs.
+Overtime, these will all be modernized and possibly brought into this Nx repo to co-locate all the front end code.
 
-If you are unfamiliar Nx, you can learn more at https://nx.dev/getting-started/intro. They provide many solid resources to get you up to speed.
+In its current state it is not quite ready to replace the existing UI as there are a few features that are not implemented yet. The new UI will not
+be available with the default build. However, if the build activates the `include-new-ui` profile the new UI will be built and included. On startup,
+NiFi has been updated to locate the new UI and if present deploy it to a new context path (`/nf`). If the new UI is not found, nothing is deployed to
+the new context path and the application functions as it does today.
 
-_From Nx:_
+One thing to note, when using the new UI running in NiFi at `/nf`, the user can log in and use the application. When logging out however, there is
+a hardcoded redirect that happens from the back end which sends the user to the old UI (`/nifi`).
 
-> We created Nx because developers struggle to configure, maintain and especially integrate various tools and frameworks.
+Once the remaining features have been implemented, the look and feel has be polished, and it is ready for release the old UI will be removed, update
-> Setting up a system that works well for a handful of developers and at the same time, easily scales up to an entire organization is hard.
+the context path for the new UI to use `/nifi`, and remove the `include-new-ui` Maven profile. At that point, the logout redirection issue called out above won’t
-> This includes setting up low-level build tooling, configuring fast CI, and keeping your codebase healthy, up-to-date, and maintainable.
+be a problem anymore.
+
+## Source Structure
+
+The structure of the application is laid out in the following manner.
+
+app
+├── pages
+│   ├── flow-designer
+│   │   ├── feature
+│   │   ├── service
+│   │   ├── state
+│   │   └── ui
+│   ├── settings
+│   │   ├── feature
+│   │   ├── service
+│   │   ├── state
+│   │   └── ui
+├── service
+├── state
+└── ui
+
+Each page has its own directory inside `pages`. Within each page, the primary content is in `feature`, any services for that page are in `service`,
+state management for the feature is in `state`, and any ui components referenced by the feature are in `ui`. The app root also contains `state`,
+`service`, and `ui` which are available for use by anything in any page. Pages, however, should not access anything from any other pages.
+
+The application leverages `ngrx` state management throughout. This includes actions and selectors for all data flow. One approach that may be
+considered unique is that all dialogs and routing happen as side effects to actions dispatched by components. This leaves components less
+cluttered and can focus on its purpose and not needing to deal with activated routes, dialog references, etc.
 
 ## Development server
 
-Run `npx nx serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+Run `npx nx serve` for a dev server. Navigate to `http://localhost:4200/nf`. The application will automatically reload if you change any of the source files.
 
-## Code scaffolding
+When accessing the UI in this manner, the login form does not work. There is some server side login request handling that does not work through
-
+the development server. Fortunately, an authenticated user does not need to log in. So to work around this, simply log in to NiFi using the UI running in
-Run `npx nx generate <generator> <<generator args>>`.
+the application first. The authentication token will be available in a cookie that is also available in the UI hosted by the development server.
-
-Or better yet, have a look at the [Nx documentation on integrating with IDEs](https://nx.dev/features/integrate-with-editors)
 
 ## Build
 
@@ -30,12 +60,13 @@ Run `npx nx build` to build the project. The build artifacts will be stored in t
 
 ## Running unit tests
 
-Run `npx nx test` to execute the unit tests via Jest
+Run `npx nx test` to execute the unit tests via Jest.
 
 ## Linting the codebase
 
-Run `npx nx lint` to execute lint
+Run `npx nx lint` to execute lint. Additionally, run `npx nx lint:fix` to fix lint errors. Please run verify this prior to opening and PRs.
 
-## Further help
+## Prettier
 
-To get more help on the Nx CLI use `npx nx --help`.
+Run `npx nx prettier` to execute prettier to identify any formatting issues. Additionally, run `npx nx prettier:format` to fix any formatting issues.
+Please run verify this prior to opening and PRs.

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/project.json

@@ -82,6 +82,12 @@
             },
             "outputs": ["{options.outputFile}"]
         },
+        "lint:fix": {
+            "executor": "nx:run-commands",
+            "options": {
+                "command": "npm run lint:fix"
+            }
+        },
         "prettier": {
             "executor": "nx:run-commands",
             "options": {