web/admin: improve empty state

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

# Conflicts:
#	web/src/elements/table/TablePage.ts
#	web/src/pages/applications/ApplicationListPage.ts

web/src/elements/table/TablePage.ts

@@ -1,3 +1,5 @@
+import { t } from "@lingui/macro";
+
 import { CSSResult } from "lit";
 import { TemplateResult, html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -26,6 +28,24 @@ export abstract class TablePage<T> extends Table<T> {
         return html``;
     }
 
+    renderEmpty(inner?: TemplateResult): TemplateResult {
+        return super.renderEmpty(html`
+            ${inner
+                ? inner
+                : html`<ak-empty-state icon=${this.pageIcon()} header="${t`No objects found.`}">
+                      <div slot="body">${this.renderObjectCreate()}</div>
+                  </ak-empty-state>`}
+        `);
+    }
+
+    renderObjectCreate(): TemplateResult {
+        return html``;
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`${this.renderObjectCreate()}${super.renderToolbar()}`;
+    }
+
     render(): TemplateResult {
         return html`<ak-page-header
                 icon=${this.pageIcon()}

web/src/locales/de.po

@@ -3363,6 +3363,7 @@ msgid "No matching events could be found."
 msgstr "Es konnten keine passenden Ereignisse gefunden werden."
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "Keine Objekte gefunden."
 

web/src/locales/en.po

@@ -3416,6 +3416,7 @@ msgid "No matching events could be found."
 msgstr "No matching events could be found."
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "No objects found."
 

web/src/locales/es.po

@@ -3356,6 +3356,7 @@ msgid "No matching events could be found."
 msgstr "No se han encontrado eventos coincidentes."
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "No se han encontrado objetos."
 

web/src/locales/fr_FR.po

@@ -3387,6 +3387,7 @@ msgid "No matching events could be found."
 msgstr "Aucun événement correspondant n'a été trouvé."
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "Aucun objet trouvé."
 

web/src/locales/pl.po

@@ -3353,6 +3353,7 @@ msgid "No matching events could be found."
 msgstr "Nie znaleziono pasujących zdarzeń."
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "Nie znaleziono żadnych obiektów."
 

web/src/locales/pseudo-LOCALE.po

@@ -3398,6 +3398,7 @@ msgid "No matching events could be found."
 msgstr ""
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr ""
 

web/src/locales/tr.po

@@ -3357,6 +3357,7 @@ msgid "No matching events could be found."
 msgstr "Eşleşen olay bulunamadı."
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "Nesne bulunamadı."
 

web/src/locales/zh-Hans.po

@@ -3339,6 +3339,7 @@ msgid "No matching events could be found."
 msgstr "未找到匹配的事件"
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "未找到对象。"
 

web/src/locales/zh-Hant.po

@@ -3342,6 +3342,7 @@ msgid "No matching events could be found."
 msgstr "找不到匹配的事件。"
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "未找到任何对象。"
 

web/src/locales/zh_TW.po

@@ -3342,6 +3342,7 @@ msgid "No matching events could be found."
 msgstr "找不到匹配的事件。"
 
 #: src/elements/table/Table.ts
+#: src/elements/table/TablePage.ts
 msgid "No objects found."
 msgstr "未找到任何对象。"
 

web/src/pages/applications/ApplicationListPage.ts

@@ -159,7 +159,7 @@ export class ApplicationListPage extends TablePage<Application> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal .open=${getURLParam("createForm", false)}>
                 <span slot="submit"> ${t`Create`} </span>
@@ -167,7 +167,6 @@ export class ApplicationListPage extends TablePage<Application> {
                 <ak-application-form slot="form"> </ak-application-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 }

web/src/pages/crypto/CertificateKeyPairListPage.ts

@@ -186,7 +186,7 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
             <td></td>`;
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -201,7 +201,6 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
                 </ak-crypto-certificate-generate-form>
                 <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Generate`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 }

web/src/pages/events/RuleListPage.ts

@@ -93,7 +93,7 @@ export class RuleListPage extends TablePage<NotificationRule> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -101,7 +101,6 @@ export class RuleListPage extends TablePage<NotificationRule> {
                 <ak-event-rule-form slot="form"> </ak-event-rule-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 

web/src/pages/events/TransportListPage.ts

@@ -101,7 +101,7 @@ export class TransportListPage extends TablePage<NotificationTransport> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -109,7 +109,6 @@ export class TransportListPage extends TablePage<NotificationTransport> {
                 <ak-event-transport-form slot="form"> </ak-event-transport-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 }

web/src/pages/flows/FlowListPage.ts

@@ -127,8 +127,9 @@ export class FlowListPage extends TablePage<Flow> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
-        return html` <ak-forms-modal>
+        return html`
+            <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
                 <span slot="header"> ${t`Create Flow`} </span>
                 <ak-flow-form slot="form"> </ak-flow-form>
@@ -140,6 +141,11 @@ export class FlowListPage extends TablePage<Flow> {
                 <ak-flow-import-form slot="form"> </ak-flow-import-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Import`}</button>
             </ak-forms-modal>
+        `;
+    }
+
+    renderToolbar(): TemplateResult {
+        return html`
             ${super.renderToolbar()}
             <ak-forms-confirm
                 successMessage=${t`Successfully cleared flow cache`}
@@ -158,6 +164,7 @@ export class FlowListPage extends TablePage<Flow> {
                     ${t`Clear cache`}
                 </button>
                 <div slot="modal"></div>
-            </ak-forms-confirm>`;
+            </ak-forms-confirm>
+        `;
     }
 }

web/src/pages/groups/GroupListPage.ts

@@ -95,7 +95,7 @@ export class GroupListPage extends TablePage<Group> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -103,7 +103,6 @@ export class GroupListPage extends TablePage<Group> {
                 <ak-group-form slot="form"> </ak-group-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 }

web/src/pages/groups/RelatedGroupList.ts

@@ -86,8 +86,4 @@ export class RelatedGroupList extends Table<Group> {
             </ak-forms-modal>`,
         ];
     }
-
-    renderToolbar(): TemplateResult {
-        return html` ${super.renderToolbar()} `;
-    }
 }

web/src/pages/outposts/OutpostListPage.ts

@@ -178,7 +178,7 @@ export class OutpostListPage extends TablePage<Outpost> {
         </ak-forms-delete-bulk>`;
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -186,7 +186,6 @@ export class OutpostListPage extends TablePage<Outpost> {
                 <ak-outpost-form slot="form"> </ak-outpost-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 }

web/src/pages/outposts/ServiceConnectionListPage.ts

@@ -123,8 +123,7 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
         </ak-forms-delete-bulk>`;
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
-        return html`<ak-service-connection-wizard></ak-service-connection-wizard>
+        return html`<ak-service-connection-wizard></ak-service-connection-wizard> `;
-            ${super.renderToolbar()}`;
     }
 }

web/src/pages/policies/BoundPoliciesList.ts

@@ -196,7 +196,6 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                     ${t`Create Binding`}
                 </button>
             </ak-forms-modal>
-            <ak-policy-wizard createText=${t`Create Policy`}></ak-policy-wizard>
+            <ak-policy-wizard createText=${t`Create Policy`}></ak-policy-wizard> `;
-            ${super.renderToolbar()}`;
     }
 }

web/src/pages/policies/PolicyListPage.ts

@@ -126,9 +126,12 @@ export class PolicyListPage extends TablePage<Policy> {
         </ak-forms-delete-bulk>`;
     }
 
+    renderObjectCreate(): TemplateResult {
+        return html`<ak-policy-wizard> </ak-policy-wizard>`;
+    }
+
     renderToolbar(): TemplateResult {
-        return html`<ak-policy-wizard> </ak-policy-wizard>
+        return html` ${super.renderToolbar()}
-            ${super.renderToolbar()}
             <ak-forms-confirm
                 successMessage=${t`Successfully cleared policy cache`}
                 errorMessage=${t`Failed to delete policy cache`}

web/src/pages/property-mappings/PropertyMappingListPage.ts

@@ -121,9 +121,8 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
-        return html`<ak-property-mapping-wizard></ak-property-mapping-wizard>
+        return html`<ak-property-mapping-wizard></ak-property-mapping-wizard> `;
-            ${super.renderToolbar()}`;
     }
 
     renderToolbarAfter(): TemplateResult {

web/src/pages/providers/ProviderListPage.ts

@@ -110,7 +110,7 @@ export class ProviderListPage extends TablePage<Provider> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
-        return html`<ak-provider-wizard> </ak-provider-wizard> ${super.renderToolbar()}`;
+        return html`<ak-provider-wizard> </ak-provider-wizard> `;
     }
 }

web/src/pages/sources/SourceListPage.ts

@@ -114,7 +114,7 @@ export class SourceListPage extends TablePage<Source> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
-        return html`<ak-source-wizard> </ak-source-wizard> ${super.renderToolbar()}`;
+        return html`<ak-source-wizard> </ak-source-wizard> `;
     }
 }

web/src/pages/stages/StageListPage.ts

@@ -132,7 +132,7 @@ export class StageListPage extends TablePage<Stage> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
-        return html`<ak-stage-wizard></ak-stage-wizard> ${super.renderToolbar()}`;
+        return html`<ak-stage-wizard></ak-stage-wizard> `;
     }
 }

web/src/pages/stages/invitation/InvitationListPage.ts

@@ -123,7 +123,7 @@ export class InvitationListPage extends TablePage<Invitation> {
             <td></td>`;
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -131,7 +131,6 @@ export class InvitationListPage extends TablePage<Invitation> {
                 <ak-invitation-form slot="form"> </ak-invitation-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 

web/src/pages/stages/prompt/PromptListPage.ts

@@ -99,7 +99,7 @@ export class PromptListPage extends TablePage<Prompt> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -107,7 +107,6 @@ export class PromptListPage extends TablePage<Prompt> {
                 <ak-prompt-form slot="form"> </ak-prompt-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 }

web/src/pages/tenants/TenantListPage.ts

@@ -95,7 +95,7 @@ export class TenantListPage extends TablePage<Tenant> {
         ];
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -103,7 +103,6 @@ export class TenantListPage extends TablePage<Tenant> {
                 <ak-tenant-form slot="form"> </ak-tenant-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 }

web/src/pages/tokens/TokenListPage.ts

@@ -92,7 +92,7 @@ export class TokenListPage extends TablePage<Token> {
         </ak-forms-delete-bulk>`;
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -100,7 +100,6 @@ export class TokenListPage extends TablePage<Token> {
                 <ak-token-form slot="form"> </ak-token-form>
                 <button slot="trigger" class="pf-c-button pf-m-primary">${t`Create`}</button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }
 

web/src/pages/users/UserListPage.ts

@@ -300,7 +300,7 @@ export class UserListPage extends TablePage<User> {
             <td></td>`;
     }
 
-    renderToolbar(): TemplateResult {
+    renderObjectCreate(): TemplateResult {
         return html`
             <ak-forms-modal>
                 <span slot="submit"> ${t`Create`} </span>
@@ -316,7 +316,6 @@ export class UserListPage extends TablePage<User> {
                     ${t`Create Service account`}
                 </button>
             </ak-forms-modal>
-            ${super.renderToolbar()}
         `;
     }