From 0d30f4c7313915fb71af15d1567c700552448754 Mon Sep 17 00:00:00 2001 From: SleeplessOne1917 Date: Tue, 16 May 2023 13:08:52 +0000 Subject: [PATCH] Make admin UI for allowing/blocking instances easier to work with (#1012) * Make admin UI for allowing/blocking instances easier to work with * Tweak styles * Remove log statements * Trim instance names and slight refactor * Use linkEvent --- src/assets/symbols.svg | 3 + src/shared/components/home/site-form.tsx | 193 ++++++++++++++++------- webpack.config.js | 5 +- 3 files changed, 141 insertions(+), 60 deletions(-) diff --git a/src/assets/symbols.svg b/src/assets/symbols.svg index 43efa4b9..2fb8eac7 100644 --- a/src/assets/symbols.svg +++ b/src/assets/symbols.svg @@ -106,6 +106,9 @@ + + + diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx index ec37af6d..ea4d25e8 100644 --- a/src/shared/components/home/site-form.tsx +++ b/src/shared/components/home/site-form.tsx @@ -1,4 +1,9 @@ -import { Component, InfernoMouseEvent, linkEvent } from "inferno"; +import { + Component, + InfernoKeyboardEvent, + InfernoMouseEvent, + linkEvent, +} from "inferno"; import { Prompt } from "inferno-router"; import { CreateSite, @@ -15,7 +20,7 @@ import { myAuth, wsClient, } from "../../utils"; -import { Spinner } from "../common/icon"; +import { Icon, Spinner } from "../common/icon"; import { ImageUploadForm } from "../common/image-upload-form"; import { LanguageSelect } from "../common/language-select"; import { ListingTypeSelect } from "../common/listing-type-select"; @@ -31,14 +36,24 @@ interface SiteFormState { siteForm: EditSite; loading: boolean; themeList?: string[]; + instance_select: { + allowed_instances: string; + blocked_instances: string; + }; } +type InstanceKey = "allowed_instances" | "blocked_instances"; + export class SiteForm extends Component { state: SiteFormState = { siteForm: { auth: "TODO", }, loading: false, + instance_select: { + allowed_instances: "", + blocked_instances: "", + }, }; constructor(props: any, context: any) { @@ -554,44 +569,8 @@ export class SiteForm extends Component { {this.state.siteForm.federation_enabled && ( <>
- -
- -
-
-
- -
- -
+ {this.federatedInstanceSelect("allowed_instances")} + {this.federatedInstanceSelect("blocked_instances")}
@@ -930,6 +909,86 @@ export class SiteForm extends Component { ); } + federatedInstanceSelect(key: InstanceKey) { + const id = `create_site_${key}`; + const value = this.state.instance_select[key]; + const selectedInstances = this.state.siteForm[key]; + return ( +
+ +
+ + +
+ {selectedInstances && selectedInstances.length > 0 && ( +
    + {selectedInstances.map(instance => ( +
  • + + +
    • + ))} +
+ )} +
+ ); + } + + handleInstanceTextChange(type: InstanceKey, event: any) { + this.setState(s => ({ + ...s, + instance_select: { + ...s.instance_select, + [type]: event.target.value, + }, + })); + } + + handleInstanceEnterPress( + key: InstanceKey, + event: InfernoKeyboardEvent + ) { + if (event.code.toLowerCase() === "enter") { + event.preventDefault(); + + this.handleAddInstance(key); + } + } + handleCreateSiteSubmit(i: SiteForm, event: any) { event.preventDefault(); i.setState({ loading: true }); @@ -986,18 +1045,43 @@ export class SiteForm extends Component { i.setState(i.state); } - instancesToString(opt?: string[]): string { - return opt ? opt.join(",") : ""; + handleAddInstance(key: InstanceKey) { + const instance = this.state.instance_select[key].trim(); + if (!this.state.siteForm[key]?.includes(instance)) { + this.setState(s => ({ + ...s, + siteForm: { + ...s.siteForm, + [key]: [...(s.siteForm[key] ?? []), instance], + }, + instance_select: { + ...s.instance_select, + [key]: "", + }, + })); + + const oppositeKey: InstanceKey = + key === "allowed_instances" ? "blocked_instances" : "allowed_instances"; + if (this.state.siteForm[oppositeKey]?.includes(instance)) { + this.handleRemoveInstance({ key: oppositeKey, instance }); + } + } } - handleSiteAllowedInstances(i: SiteForm, event: any) { - let list = splitToList(event.target.value); - i.setState(s => ((s.siteForm.allowed_instances = list), s)); - } - - handleSiteBlockedInstances(i: SiteForm, event: any) { - let list = splitToList(event.target.value); - i.setState(s => ((s.siteForm.blocked_instances = list), s)); + handleRemoveInstance({ + key, + instance, + }: { + key: InstanceKey; + instance: string; + }) { + this.setState(s => ({ + ...s, + siteForm: { + ...s.siteForm, + [key]: s.siteForm[key]?.filter(i => i !== instance), + }, + })); } handleSiteNameChange(i: SiteForm, event: any) { @@ -1259,12 +1343,3 @@ export class SiteForm extends Component { this.setState(s => ((s.siteForm.default_post_listing_type = val), s)); } } - -function splitToList(commaList: string): string[] { - if (commaList !== "") { - let list = commaList.trim().split(","); - return list; - } else { - return []; - } -} diff --git a/webpack.config.js b/webpack.config.js index ef5717fe..51ca81db 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -123,9 +123,12 @@ const createClientConfig = (_env, mode) => { urlPattern: ({ url: { pathname, host }, sameOrigin }) => (sameOrigin || host.includes("localhost")) && pathname.includes("static"), - handler: "CacheFirst", + handler: mode === "development" ? "NetworkFirst" : "CacheFirst", options: { cacheName: "static-cache", + expiration: { + maxAgeSeconds: 60 * 60 * 24, + }, }, }, {