chore(ui): don't display push instructions for non vendors (#788)

Signed-off-by: Philip Miglinci <[email protected]>

Author: pmig

frontend/ui/src/app/artifacts/artifacts/artifacts.component.html

@@ -14,10 +14,10 @@
               >
               and log in to the registry from your machine:
               <code class="mt-1 select-all block text-sm text-gray-900 dark:text-gray-200 whitespace-pre-line">
-                echo "your-personal-access-token-here" | docker login {{ host }} --password-stdin -u -
+                echo "YOUR-ACCESS-TOKEN" | docker login {{ host }} --password-stdin -u -
               </code>
             </div>
-            <div class="font-medium mt-1">
+            <div class="font-medium mt-1" *appRequiredRole="'vendor'">
               Then you can start tagging and pushing your images. For example, you can try the following commands to
               push your own
               <a
@@ -37,6 +37,14 @@
                 docker push {{ host }}/{{ slug }}/hello-world:v1.0.0
               </code>
             </div>
+            <div *appRequiredRole="'customer'">
+              <div class="font-medium mt-1">
+                After the login you can start pulling images from the registry. For example, you can try the following
+              </div>
+              <code class="mt-1 select-all block text-sm text-gray-900 dark:text-gray-200 whitespace-pre-line">
+                docker pull {{ host }}/{{ slug }}/IMAGE:VERSION
+              </code>
+            </div>
           } @else {
             Your Distr Hub does not have the registry enabled. You can enable it by setting the corresponding
             environment variables of the Distr Hub.

frontend/ui/src/app/artifacts/artifacts/artifacts.component.ts

@@ -3,16 +3,16 @@ import {Component, inject} from '@angular/core';
 import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {RouterLink} from '@angular/router';
 import {FaIconComponent} from '@fortawesome/angular-fontawesome';
-import {faBox, faDownload, faLightbulb, faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons';
+import {faBox, faLightbulb, faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons';
 import {combineLatest, map, startWith} from 'rxjs';
 import {UuidComponent} from '../../components/uuid';
 import {ArtifactsService} from '../../services/artifacts.service';
 import {ArtifactsDownloadCountComponent, ArtifactsDownloadedByComponent} from '../components';
-import {faDocker} from '@fortawesome/free-brands-svg-icons';
 import {AutotrimDirective} from '../../directives/autotrim.directive';
 import {getRemoteEnvironment} from '../../../env/remote';
 import {fromPromise} from 'rxjs/internal/observable/innerFrom';
 import {OrganizationService} from '../../services/organization.service';
+import {RequireRoleDirective} from '../../directives/required-role.directive';
 
 @Component({
   selector: 'app-artifacts',
@@ -25,6 +25,7 @@ import {OrganizationService} from '../../services/organization.service';
     ArtifactsDownloadCountComponent,
     ArtifactsDownloadedByComponent,
     AutotrimDirective,
+    RequireRoleDirective,
   ],
   templateUrl: './artifacts.component.html',
 })
@@ -33,7 +34,6 @@ export class ArtifactsComponent {
 
   protected readonly faMagnifyingGlass = faMagnifyingGlass;
   protected readonly faBox = faBox;
-  protected readonly faDownload = faDownload;
 
   protected readonly filterForm = new FormGroup({
     search: new FormControl(''),
@@ -48,7 +48,6 @@ export class ArtifactsComponent {
       artifacts.filter((it) => !formValue.search || it.name.toLowerCase().includes(formValue.search.toLowerCase()))
     )
   );
-  protected readonly faDocker = faDocker;
   protected readonly faLightbulb = faLightbulb;
 
   private readonly organizationService = inject(OrganizationService);