Expressive application integration preview¶
Temporary implementation plan; retire after acceptance evidence is recorded.
Scope and acceptance¶
Integrate the reviewed CAMARADES package into the actual SyRF application: all dialog surfaces, application search, and project navigation. Preserve dialog data/results, cancellation, permissions, focus and keyboard behavior, responsive layouts, dark theme and reduced motion. Assess additional controls only where a bounded replacement is justified.
Deliver a hosted PR preview using synthetic/disposable data and normal authentication, with screenshots and navigation instructions. Never use production data, merge this PR, or deploy production. PR #4412 remains separate package acceptance evidence.
Critical path¶
- Inventory dialog openers/content and coordinate navigation/search ownership.
- Install the checksummed reviewed package and migrate complete application surfaces.
- Run focused contracts, theme guards, production build and real browser workflows.
- Enable standard PR preview; verify readiness and synthetic access. If infrastructure blocks it, record the precise failure and prepare a private full-app tunnel.
- Obtain current-head Opus review with organization account B after CI passes; address findings.
Flag decision¶
Not flagged: this is a presentation replacement with existing domain contracts, routes and permissions retained. The PR is unmerged and scoped to preview acceptance; production rollout is not authorized. A normal code revert restores the previous presentation without a data migration.
Status¶
Implementation and preview verification are pending. This document is not evidence of completion.
Dialog inventory¶
All application Material dialog imports route through the typed Expressive adapter; native content and action layout directives are retained. Explicit close controls use the Expressive reference. The following statically opened components retain their existing data and results; dynamic titles from dialog data take precedence.
| Dialog | Source |
|---|---|
| AccessDeniedDialogComponent | src/services/web/src/app/shared/dialogs/access-denied-dialog/access-denied-dialog.component.ts |
| AddEmailComponent | src/services/web/src/app/manage/profile/add-email/add-email.component.ts |
| BulkConfirmationDialogComponent | src/services/web/src/app/project/project-admin/project-members/bulk-confirmation-dialog/bulk-confirmation-dialog.component.ts |
| BulkPdfUploadDialogComponent | src/services/web/src/app/project/project-admin/bulk-pdf-upload/bulk-pdf-upload-dialog/bulk-pdf-upload-dialog.component.ts |
| ConfirmImpersonationDialogComponent | src/services/web/src/app/admin/impersonation/confirm-impersonation-dialog.component.ts |
| CreateProjectWizardComponent | src/services/web/src/app/project-index/dialogs/create-project-wizard/create-project-wizard.component.ts |
| CreateQuestionComponent | src/services/web/src/app/project/project-admin/annotation-question-designer/create-question/create-question.component.ts |
| CreateSearchComponent | src/services/web/src/app/project/project-overview/create-search/create-search.component.ts |
| CreateStageComponent | src/services/web/src/app/project/project-overview/stages-panel/create-stage/create-stage.component.ts |
| DataExtractionFormComponent | src/services/web/src/app/shared/annotation/annotation-form/data-extraction-form/data-extraction-form.component.ts |
| DeleteModalComponent | src/services/web/src/app/shared/dialogs/delete-modal/delete-modal.component.ts |
| DeleteSearchComponent | src/services/web/src/app/project/project-overview/delete-search/delete-search.component.ts |
| EditEntityDialogComponent | src/services/web/src/app/project/project-admin/project-members/edit-entity-dialog/edit-entity-dialog.component.ts |
| EnvironmentWarningDialogComponent | src/services/web/src/app/core/components/environment-warning-dialog/environment-warning-dialog.component.ts |
| ErrorDialogComponent | src/services/web/src/app/shared/dialogs/error-dialog/error-dialog.component.ts |
| ErrorRecoveryDialogComponent | src/services/web/src/app/core/components/error-recovery-dialog/error-recovery-dialog.component.ts |
| ExportErrorDetailsDialogComponent | src/services/web/src/app/project/data-export/shared/export-error-details-dialog/export-error-details-dialog.component.ts |
| Graph2DataComponent | src/services/web/src/app/shared/annotation/annotation-form/graph2data/graph2data.component.ts |
| GraphSelectorComponent | src/services/web/src/app/shared/annotation/annotation-form/graph-selector/graph-selector.component.ts |
| GuidDecodeComponent | src/services/web/src/app/admin/guid-decode/guid-decode.component.ts |
| ImageCropperDialogComponent | src/services/web/src/app/manage/profile/image-cropper-dialog/image-cropper-dialog.component.ts |
| InfoConfirmationDialogComponent | src/services/web/src/app/shared/dialogs/info-confirmation-dialog/info-confirmation-dialog.component.ts |
| MemberTimeProgressComponent | src/services/web/src/app/stage/stage-overview/member-time-progress/member-time-progress.component.ts |
| OutcomeCellEditorComponent | src/services/web/src/app/shared/annotation/annotation-form-v2/outcome-cell-editor/outcome-cell-editor.component.ts |
| PermissionsDialogComponent | src/services/web/src/app/shared/dialogs/permissions-dialog/permissions-dialog.component.ts |
| PreviewPullRequestDescriptionDialogComponent | src/services/web/src/app/core/components/environment-warning-dialog/preview-pull-request-description-dialog.component.ts |
| QuestionSelectionDialogComponent | src/services/web/src/app/project/data-export/quantitative-data/question-selection-dialog/question-selection-dialog.component.ts |
| ReviewPreferencesDialogComponent | src/services/web/src/app/stage/stage-review/review-preferences-dialog/review-preferences-dialog.component.ts |
| ReviewProgressDialogComponent | src/services/web/src/app/stage/stage-review/review-progress/review-progress-dialog/review-progress-dialog.component.ts |
| RuntimeFeatureFlagChangeDialogComponent | src/services/web/src/app/admin/runtime-feature-flags/runtime-feature-flag-change-dialog.component.ts |
| RuntimePolicyDialogComponent | src/services/web/src/app/admin/runtime-feature-flags/runtime-policy-dialog.component.ts |
| SaveAnnotationDialogComponent | src/services/web/src/app/stage/stage-review/save-annotation-dialog/save-annotation-dialog.component.ts |
| SearchErrorComponent | src/services/web/src/app/project/project-admin/systematic-searches/search-error/search-error.component.ts |
| StageOverviewDialogComponent | src/services/web/src/app/shared/dialogs/stage-overview-dialog/stage-overview-dialog.component.ts |
| StageProgressDialogComponent | src/services/web/src/app/stage/stage-review/stage-progress/stage-progress-dialog.component.ts |
| SurplusNotificationDialogComponent | src/services/web/src/app/shared/dialogs/surplus-notification-dialog/surplus-notification-dialog.component.ts |
| UnitDeleteDialogComponent | src/services/web/src/app/shared/annotation/annotation-form-v2/unit-delete-dialog/unit-delete-dialog.component.ts |
| UnmaskBlindingComponent | src/services/web/src/app/project/data-export/unmask-blinding/unmask-blinding.component.ts |
| UpdateStudiesComponent | src/services/web/src/app/project/project-overview/update-studies/update-studies.component.ts |
| VersionInfoDialogComponent | src/services/web/src/app/shared/dialogs/version-info-dialog/version-info-dialog.component.ts |
Integration decisions¶
- Use the library dialog container, motion, reference and close directive throughout the app. Keep Material content/title/action layout directives so existing forms and destructive-action contracts do not need a parallel rewrite. Existing explicit widths, scoped injectors and close predicates are preserved. All statically identified openers have a stable fallback accessible title; dynamic data titles take precedence.
- Use Expressive search for project-list and study-list filters. Filtering remains local to those authorized lists; universal-search backend work stays in #4343. Enter closes the search surface to show the existing results.
- The project shell uses the library standard rail on desktop and hidden modal rail on compact screens. The permission-filtered tree, keyboard roving, disabled explanations, persisted preference, pointer delays and keyboard expansion remain SyRF-owned. Standard expansion moves content instead of the former hover overlay; compact mode traps/restores focus through the library.
- Retain existing Material toolbars, buttons, menus, lists and tooltips in this first integration. Their established action, hierarchy and disabled-reason behavior is useful; replacing them does not improve acceptance of the required dialogs/search/rail and would broaden regression scope. Follow-up order: dialog action-button treatments, selected page toolbars, then menus/lists after explicit interaction parity checks.
- Mechanical dialog imports do not trigger unrelated store, signal-form or constructor rewrites. Existing domain state machines are preserved.
Validation and external dependencies¶
- Production build passes with the new package and application surfaces.
- 451 tests across 37 files pass: dialogs, project/study search, navigation, theme guards, and detached-panel dialog ownership. Browser checks remain in progress.
- Full ESLint reports 16 pre-existing errors in untouched files. Changed-source lint is checked separately; no new baseline entries are added.
- Account B review is blocked by the still-open organization selector PR #4252: current main consumes only the original OAuth secret. This integration does not change organization variables or credentials.
- Hosted preview will use the standard
previewlabel, with no snapshot label or production data. Readiness and the URL are not yet verified.