web/admin: prevent file upload attempt when backend not managed

web/src/admin/files/FileListPage.ts

@@ -3,17 +3,20 @@ import "#elements/buttons/SpinnerButton/index";
 import "#elements/forms/DeleteBulkForm";
 import "#elements/forms/ModalForm";
 import "@patternfly/elements/pf-tooltip/pf-tooltip.js";
+import "#elements/EmptyState";
 
 import { DEFAULT_CONFIG } from "#common/api/config";
+import { docLink } from "#common/global";
 
+import { WithCapabilitiesConfig } from "#elements/mixins/capabilities";
 import { PaginatedResponse, TableColumn } from "#elements/table/Table";
 import { TablePage } from "#elements/table/TablePage";
 import { SlottedTemplateResult } from "#elements/types";
 
-import { AdminApi, AdminFileListUsageEnum } from "@goauthentik/api";
+import { AdminApi, AdminFileListUsageEnum, CapabilitiesEnum } from "@goauthentik/api";
 
 import { msg } from "@lit/localize";
-import { html, TemplateResult } from "lit";
+import { html, nothing, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 export interface FileItem {
@@ -25,7 +28,7 @@ export interface FileItem {
 export type FileListOrderKey = "name" | "mimeType";
 
 @customElement("ak-files-list")
-export class FileListPage extends TablePage<FileItem> {
+export class FileListPage extends WithCapabilitiesConfig(TablePage<FileItem>) {
     public override checkbox = true;
     public override clearOnRefresh = true;
 
@@ -67,7 +70,10 @@ export class FileListPage extends TablePage<FileItem> {
         [msg("Actions"), null, msg("Row Actions")],
     ];
 
-    renderToolbarSelected(): TemplateResult {
+    renderToolbarSelected() {
+        if (!this.can(CapabilitiesEnum.CanSaveMedia)) {
+            return nothing;
+        }
         const disabled = !this.selectedElements.length;
         const count = this.selectedElements.length;
         return html`<ak-forms-delete-bulk
@@ -116,7 +122,36 @@ export class FileListPage extends TablePage<FileItem> {
         ];
     }
 
-    protected renderObjectCreate(): TemplateResult {
+    protected renderEmpty(inner?: TemplateResult) {
+        if (this.can(CapabilitiesEnum.CanSaveMedia)) {
+            return super.renderEmpty(inner);
+        }
+        return super.renderEmpty(
+            html`<ak-empty-state icon=${this.pageIcon}
+                ><span
+                    >${msg("Configured file backend does not support file management.")}</span
+                >
+                <div slot="body">
+                    ${msg(
+                        "Please ensure the data folder is mounted or S3 storage is configured.",
+                    )}
+                </div>
+                <div slot="primary">
+                    <a
+                        target="_blank"
+                        class="pf-c-button pf-m-secondary"
+                        href=${docLink("/install-config/configuration/#storage-settings")}
+                        >${msg("Learn more")}</a
+                    >
+                </div>
+            </ak-empty-state>`,
+            );
+    }
+
+    protected renderObjectCreate() {
+        if (!this.can(CapabilitiesEnum.CanSaveMedia)) {
+            return nothing;
+        }
         return html`
             <ak-forms-modal>
                 <span slot="submit">${msg("Upload")}</span>

web/src/elements/table/TablePage.ts

@@ -1,3 +1,5 @@
+import "#elements/EmptyState";
+
 import { updateURLParams } from "#elements/router/RouteMatch";
 import { Table } from "#elements/table/Table";
 import { SlottedTemplateResult } from "#elements/types";