Skip to content

Commit b09b49a

Browse files
cryptalithcryptalith
authored
PD-4789 (#2748)
* ENGAGE-243 * PD-0000 Fix CSRF token issues * Revert "ENGAGE-243" This reverts commit 7469a7e. * ENGAGE-243 * PD-0000 allow new branch names' * ENGAGE-243 * ENGAGE-243 * ENGAGE-243 * ENGAGE-243 * ENGAGE-243
1 parent 42edd0f commit b09b49a

82 files changed

Lines changed: 2588 additions & 172 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎AGENTS.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Orcid Angular — Agent Notes
2+
3+
Monorepo: main app (`src/`, project `ng-orcid`), docs (`projects/orcid-ui-docs`), and libraries. Use this for fast orientation.
4+
5+
> **Note for future agents:** This file is intended to be edited over time. Any section—relevant or not—may be updated, trimmed, or reorganized so the document stays lean and useful for future agents. Prefer keeping only what helps the next AI work effectively with this project.
6+
7+
## Quick reference: libraries
8+
9+
- **@orcid/ui** — `projects/orcid-ui` — Agnostic UI components, design tokens, modal shell. See `projects/orcid-ui/AGENTS.md`.
10+
- **@orcid/registry-ui** — `projects/orcid-registry-ui` — Registry-specific components (e.g. import-works-dialog). See `projects/orcid-registry-ui/AGENTS.md`.
11+
12+
Both are path-mapped from repo root (`tsconfig.json`). Main app and docs consume them from source.
13+
14+
## When changing a library component’s API
15+
16+
Update the main app and that component’s doc page (usage snippet, inputs list, examples).
17+
18+
## If component styles differ between docs and main app
19+
20+
If a library component (e.g. in orcid-registry-ui) looks correct in the docs app but wrong in the main app (e.g. missing margins or spacing), try **resetting the main project**: clean build artifacts, reinstall, or reset local overrides. Stale or inconsistent build/cache state in the main app can cause component styles to not apply as in docs; a fresh build often resolves it.
21+
22+
23+
## Dialogs and async data
24+
25+
When a dialog or view needs data from an HTTP (or other async) call, opening the dialog only after the request completes can feel slow. Consider opening the dialog **immediately** with skeleton or static data (e.g. labels, empty lists, or a `loading: true` flag), then assigning the full payload to the dialog’s component instance when the observable emits. The dialog can show placeholders or a loading state until then.

‎projects/orcid-registry-ui/AGENTS.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# Orcid Registry UI — Agent Notes (for future GPTs)
2+
3+
This package (`projects/orcid-registry-ui`, published as `@orcid/registry-ui`) contains **feature-oriented UI components** for the main orcid-angular application only. It is not intended for reuse outside this project.
4+
5+
> **Note for future agents:** This file is intended to be edited over time. Any section—relevant or not—may be updated, trimmed, or reorganized so the document stays lean and useful for future agents. Prefer keeping only what helps the next AI work effectively with this library.
6+
7+
## Library scope: orcid-registry-ui vs orcid-ui
8+
9+
- **orcid-ui** (`@orcid/ui`): Fully **agnostic** UI building blocks. No feature names or domain-specific wording. Open source–friendly and reusable across any ORCID or non-ORCID project. Components use Angular Material when possible and design tokens for styling.
10+
11+
- **orcid-registry-ui** (`@orcid/registry-ui`): **Registry-specific** components for the orcid-angular app only. May use feature names (e.g. “Import your works”, “Permission notifications”). Builds on **orcid-ui** components, Angular Material, and **orcid-tokens**. More flexible and app-coupled.
12+
13+
## Conventions
14+
15+
- **Package entry**: `projects/orcid-registry-ui/src/public-api.ts`
16+
- **Components**: `projects/orcid-registry-ui/src/lib/components/**`
17+
- Prefer **standalone components**. Use `@orcid/ui` for base primitives (modals, action surfaces, etc.) and **orcid-tokens** CSS variables for layout/color/typography.
18+
- Dialogs that use the shared modal chrome should use `OrcidModalComponent` and `ORCID_MODAL_DIALOG_PANEL_CLASS` from `@orcid/ui` when opening with `MatDialog`.
19+
- **Dialog data (MAT_DIALOG_DATA):** If the host may open the dialog first and assign full data later (e.g. after an async request), the data interface can include an optional flag (e.g. `loading?: boolean`) so the dialog can show a skeleton or placeholder until the host sets the complete data.
20+
21+
## Dependencies
22+
23+
- Peer: `@angular/common`, `@angular/core`, `@angular/material`, `@orcid/ui`, `rxjs`
24+
- The host app (orcid-angular) supplies `@orcid/ui` and design tokens (e.g. via `tokens.css`).
25+
26+
## Building
27+
28+
- From repo root: `ng build orcid-registry-ui` (or use the npm script if defined).
29+
30+
## When changing this library’s API
31+
32+
If you add or change **inputs**, **data types**, or **public behavior** in a registry-ui component, update **both** the main app usage (under `src/`) and the component’s doc page (usage snippet, inputs list, examples) so they stay in sync.
33+
34+
## Docs site (`projects/orcid-ui-docs`)
35+
36+
Registry-ui doc pages live under **`src/app/pages/orcid-registry-ui/`** (orcid-ui pages live under `pages/orcid-ui/`). When adding a new registry-ui component doc:
37+
38+
- Add the page in `projects/orcid-ui-docs/src/app/pages/orcid-registry-ui/<name>-page.component.{ts,html,scss}`
39+
- Import `DocumentationPageComponent` from `'../../components/documentation-page/documentation-page.component'`
40+
- Register a lazy route in `app.routes.ts` pointing to `./pages/orcid-registry-ui/<name>-page.component`
41+
- Add a sidebar link under the “Orcid Registry UI” section in `docs-shell.component.html`

‎projects/orcid-registry-ui/src/lib/components/import-works-dialog/import-works-dialog.component.html‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
<orcid-modal [title]="title">
2+
<div orcidModalBody>
3+
<div class="import-works-dialog__intro" *ngIf="introText">
4+
<p class="import-works-dialog__intro-text">{{ introText }}</p>
5+
<a
6+
*ngIf="supportLink"
7+
class="import-works-dialog__support-link"
8+
[href]="supportLink.url"
9+
target="_blank"
10+
rel="noopener noreferrer"
11+
>
12+
{{ supportLink.label }}
13+
</a>
14+
</div>
15+
16+
<section class="import-works-dialog__section" *ngIf="loading || certifiedLinks.length">
17+
<h3 class="import-works-dialog__section-heading">
18+
{{ certifiedSectionHeading }}
19+
</h3>
20+
<div class="import-works-dialog__card-list">
21+
<!-- Shimmer skeleton cards while loading -->
22+
<ng-container *ngIf="loading">
23+
<div
24+
*ngFor="let _ of certifiedSkeletonCount"
25+
class="import-works-dialog__card import-works-dialog__card--certified import-works-dialog__card--skeleton"
26+
aria-hidden="true"
27+
>
28+
<div class="import-works-dialog__card-icon">
29+
<orcid-skeleton-placeholder [accentBackground]="false" shape="square" width="48px" height="48px"></orcid-skeleton-placeholder>
30+
</div>
31+
<div class="import-works-dialog__card-content">
32+
<orcid-skeleton-placeholder [accentBackground]="false" class="import-works-dialog__skeleton-title" height="27px" width="60%"></orcid-skeleton-placeholder>
33+
<orcid-skeleton-placeholder [accentBackground]="false" class="import-works-dialog__skeleton-line" height="21px" width="85%"></orcid-skeleton-placeholder>
34+
</div>
35+
<div class="import-works-dialog__card-actions">
36+
<orcid-skeleton-placeholder [accentBackground]="false" class="import-works-dialog__skeleton-btn" height="36px" width="120px"></orcid-skeleton-placeholder>
37+
</div>
38+
</div>
39+
</ng-container>
40+
<!-- Real certified links -->
41+
<ng-container *ngIf="!loading">
42+
<div
43+
*ngFor="let link of certifiedLinks"
44+
class="import-works-dialog__card import-works-dialog__card--certified"
45+
>
46+
<div class="import-works-dialog__card-icon" *ngIf="link.imageUrl || link.icon">
47+
<img *ngIf="link.imageUrl" [src]="link.imageUrl" [alt]="link.name + ' logo'" class="import-works-dialog__card-img" />
48+
<mat-icon *ngIf="!link.imageUrl && link.icon" [attr.aria-hidden]="true">{{ link.icon }}</mat-icon>
49+
</div>
50+
<div class="import-works-dialog__card-content">
51+
<p class="import-works-dialog__card-title">{{ link.name }}</p>
52+
<p class="import-works-dialog__card-description">
53+
{{ link.description }}
54+
</p>
55+
</div>
56+
<div class="import-works-dialog__card-actions">
57+
<ng-container *ngIf="link.connected; else connectCertified">
58+
<span class="import-works-dialog__connected">
59+
<span class="import-works-dialog__connected-dot" aria-hidden="true"></span>
60+
{{ connectedLabel }}
61+
</span>
62+
</ng-container>
63+
<ng-template #connectCertified>
64+
<button
65+
mat-flat-button
66+
class="import-works-dialog__btn-connect"
67+
(click)="openInNewTab(link.url)"
68+
>
69+
{{ connectNowLabel }}
70+
</button>
71+
</ng-template>
72+
</div>
73+
</div>
74+
</ng-container>
75+
</div>
76+
</section>
77+
78+
<section class="import-works-dialog__section import-works-dialog__section--more" *ngIf="loading || moreServicesLinks.length">
79+
<div class="import-works-dialog__more-panel">
80+
<button
81+
type="button"
82+
class="import-works-dialog__more-header"
83+
(click)="toggleMoreServices()"
84+
[attr.aria-expanded]="moreServicesExpanded"
85+
[attr.aria-controls]="'import-works-more-list'"
86+
id="import-works-more-heading"
87+
>
88+
<mat-icon class="import-works-dialog__more-chevron" aria-hidden="true">
89+
{{ moreServicesExpanded ? 'expand_more' : 'expand_less' }}
90+
</mat-icon>
91+
<span class="import-works-dialog__more-heading-text">
92+
{{ moreServicesHeading }}
93+
<span class="import-works-dialog__more-count" *ngIf="!loading">({{ moreServicesLinks.length }})</span>
94+
</span>
95+
</button>
96+
<div
97+
id="import-works-more-list"
98+
class="import-works-dialog__more-list"
99+
role="region"
100+
[attr.aria-labelledby]="'import-works-more-heading'"
101+
[hidden]="!moreServicesExpanded"
102+
>
103+
<!-- Shimmer skeleton cards while loading -->
104+
<ng-container *ngIf="loading">
105+
<div
106+
*ngFor="let _ of moreServicesSkeletonCount"
107+
class="import-works-dialog__card import-works-dialog__card--more import-works-dialog__card--skeleton"
108+
aria-hidden="true"
109+
>
110+
<div class="import-works-dialog__card-icon">
111+
<orcid-skeleton-placeholder [accentBackground]="false" shape="square" width="48px" height="48px"></orcid-skeleton-placeholder>
112+
</div>
113+
<div class="import-works-dialog__card-content">
114+
<orcid-skeleton-placeholder [accentBackground]="false" class="import-works-dialog__skeleton-title" height="27px" width="55%"></orcid-skeleton-placeholder>
115+
<orcid-skeleton-placeholder [accentBackground]="false" class="import-works-dialog__skeleton-line" height="21px" width="100%"></orcid-skeleton-placeholder>
116+
<orcid-skeleton-placeholder [accentBackground]="false" class="import-works-dialog__skeleton-line" height="21px" width="80%"></orcid-skeleton-placeholder>
117+
</div>
118+
<div class="import-works-dialog__card-actions">
119+
<orcid-skeleton-placeholder [accentBackground]="false" class="import-works-dialog__skeleton-btn" height="36px" width="120px"></orcid-skeleton-placeholder>
120+
</div>
121+
</div>
122+
</ng-container>
123+
<!-- Real more services links -->
124+
<ng-container *ngIf="!loading">
125+
<div
126+
*ngFor="let link of moreServicesLinks"
127+
class="import-works-dialog__card import-works-dialog__card--more"
128+
>
129+
<div class="import-works-dialog__card-icon" *ngIf="link.imageUrl || link.icon">
130+
<img *ngIf="link.imageUrl" [src]="link.imageUrl" [alt]="link.name + ' logo'" class="import-works-dialog__card-img" />
131+
<mat-icon *ngIf="!link.imageUrl && link.icon" [attr.aria-hidden]="true">{{ link.icon }}</mat-icon>
132+
</div>
133+
<div class="import-works-dialog__card-content">
134+
<p class="import-works-dialog__card-title">{{ link.name }}</p>
135+
<p class="import-works-dialog__card-description">
136+
{{ link.description }}
137+
</p>
138+
</div>
139+
<div class="import-works-dialog__card-actions">
140+
<button
141+
mat-stroked-button
142+
class="import-works-dialog__btn-connect-more"
143+
(click)="openInNewTab(link.url)"
144+
>
145+
{{ connectNowLabel }}
146+
</button>
147+
</div>
148+
</div>
149+
</ng-container>
150+
</div>
151+
</div>
152+
</section>
153+
</div>
154+
</orcid-modal>

0 commit comments

Comments
 (0)