Skip to content

[APIView SPA] Show prominent 'Approved' status pill for non-architect viewers (#14724) #15595

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
helen229 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[APIView SPA] Show prominent 'Approved' status pill for non-architect viewers (#14724) #15595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4615850
[APIView SPA] Show prominent 'Approved' status pill for non-architect…
helen229 May 11, 2026
ebf5a0e
Address review feedback: gate Approved pills on userProfile.permissio…
helen229 May 11, 2026
7fe172d
Merge branch 'main' into fix/14724-approved-revision-visual-treatment
helen229 May 12, 2026
99133b1
Merge branch 'main' into fix/14724-approved-revision-visual-treatment
helen229 May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions ...View/ClientSPA/src/app/_components/review-page-options/review-page-options.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,13 @@ <h6 class="mb-2 fw-semibold">Approval</h6>
</div>
</ng-template>
</ng-container>
<ng-container *ngIf="userProfile?.permissions && !canApproveForReviewLanguage && activeAPIRevision && activeAPIRevision!.approvers.length > 0">
<div class="d-grid gap-2">
<button class="btn btn-approved-pill" type="button" disabled aria-label="API revision approved">
<i class="bi bi-check-circle-fill me-2"></i>Approved
</button>
</div>
</ng-container>
<span *ngIf="activeAPIRevision && activeAPIRevision!.approvers.length > 0; else noAPIRevisionApprovers" class="small text-muted mt-1">
Approved by: <a *ngFor="let approver of activeAPIRevision!.approvers" href="{{webAppUrl}}Assemblies/Profile/{{approver}}">{{approver}},&nbsp;</a>
</span>
Expand All @@ -37,6 +44,13 @@ <h6 class="mb-2 fw-semibold">Approval</h6>
</div>
<div class="text-center py-2" *ngIf="review?.language !== 'TypeSpec' && review?.language !== 'Swagger'">
<ng-container *ngIf="reviewIsApproved; else reviewIsNotApproved">
<ng-container *ngIf="userProfile?.permissions && !canApproveForReviewLanguage">
<div class="d-grid gap-2 mb-1">
<button class="btn btn-approved-pill" type="button" disabled aria-label="First release approved">
<i class="bi bi-check-circle-fill me-2"></i>First Release Approved
</button>
</div>
</ng-container>
<span class="small text-muted mt-1" id="first-release-approval-message">Approved for first release by: <a href="{{webAppUrl}}Assemblies/Profile/{{reviewApprover}}">{{reviewApprover}}</a></span>
</ng-container>
<ng-template #reviewIsNotApproved>
Expand Down
23 changes: 23 additions & 0 deletions ...View/ClientSPA/src/app/_components/review-page-options/review-page-options.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,27 @@
:host ::ng-deep {
// Approved-status pill shown to non-architect viewers in place of the
// Approve action button. Mirrors the size/shape of .btn-success so the
// approval status is visually unmissable. See issue #14724.
.btn-approved-pill {
background-color: var(--alert-success-bg);
color: var(--alert-success-color);
border: 1px solid var(--success-color);
font-weight: 600;
cursor: default;

&:disabled,
&.disabled {
background-color: var(--alert-success-bg);
color: var(--alert-success-color);
border-color: var(--success-color);
opacity: 1;
}

i {
color: var(--success-color);
}
}

.p-multiselect .p-multiselect-label {
padding: 0.25rem 0.5rem;
}
Expand Down
Loading