added UI changes for API tokens page empty state

[vinay033]

Signed-off-by: vinay033 [email protected]

🔩 Description

Currently, when there are no api tokens on the API Tokens page we show an empty table, instead, we would like to follow the empty state pattern.

👟 Demo Script / Repro Steps

Existing UI

New changes

⛓️ Related Resources

#303

[susanev]

Thank you!!

[srenatus]

Thank you! 🎉

[srenatus]

💭 I wonder why we'd put this on chef-tr and not one of the parent tags? app-authorized or chef-table or chef-thead

[tylercloke]

Tested and added a few suggestions based on @srenatus's comments.

[tylercloke]

Suggested change

	<chef-table>
	<chef-table *ngIf="(sortedApiTokens$ | async)?.length > 0">

[vinay033]

Thanks for the review and suggestions, I will make these changes and update the PR by today itself.

[tylercloke]

Suggested change

	<chef-tr *ngIf="(sortedApiTokens$ | async)?.length > 0">
	<chef-tr>

[srenatus]

LGTM but I'm no CSS expert

[vinay033]

LGTM but I'm no CSS expert

CSS is only added for showing button in the center if there is no token available.

[msorens]

Note that for the failing integration test you will need to mock the <app-authorized> component with something like this:

       MockComponent({ selector: 'app-authorized',
                        inputs: ['allOf', 'anyOf'],
                        template: '<ng-content></ng-content>' })
      ],

You can see that in use in components/automate-ui/src/app/page-components/navbar/navbar.component.spec.ts

[vinay033]

Note that for the failing integration test you will need to mock the <app-authorized> component with something like this:

       MockComponent({ selector: 'app-authorized',
                        inputs: ['allOf', 'anyOf'],
                        template: '<ng-content></ng-content>' })
      ],

You can see that in use in components/automate-ui/src/app/page-components/navbar/navbar.component.spec.ts

Thanks for the suggestion, I will check and update the PR.

[vinay033]

MockComponent

@msorens I just checked <app-authorized> component already mocked in components/automate-ui/src/app/pages/api-token/list/api-token-list.component.spec.ts.
in logs show error like

1) Admin pages IAM v1 API Token list control button when clicked, shows Delete Token
--
  | - Failed: element not interactable
  | (Session info: headless chrome=73.0.3683.86)
  | (Driver info: chromedriver=2.46.628388 (4a34a70827ac54148e092aafb70504c4ea7ae926),platform=Linux 4.14.97-90.72.amzn2.x86_64 x86_64)

[msorens]

Ah, yes, you are correct... and then I notice it was a protractor test failing, not a unit test.
Reviewing the test case in question more closely, I did not see any reason for it to fail so I ran it locally, and it passed for me. So you could just do "retry" on the buildkite item, but before you do...

Take a look at my other comment I just posted for a slight optimization. If you make that change, it will of course, redo the buildkite item as well.

[msorens]

Suggested change

	<div *ngIf="(sortedApiTokens$ | async)?.length === 0" class="token-empty-state">
	<div *ngIf="(apiTokenCount$ | async) === 0" class="token-empty-state">

Same change in all 3 places where the original expression occurred.

[vinay033]

@msorens I added these changes.