tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Allow users to set workflow description (#708)

Browse Source
This commit is contained in:
sua yoo 2023-03-21 13:40:23 -07:00 committed by GitHub
parent 4136bdad2e
commit 5f5bb5ea6e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 85 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/config-details.ts
View File

@ -45,6 +45,7 @@ export class ConfigDetails extends LiteElement {
render() { render() {
const crawlConfig = this.crawlConfig; const crawlConfig = this.crawlConfig;
const exclusions = crawlConfig?.config.exclude || []; const exclusions = crawlConfig?.config.exclude || [];
return html` return html`
<section id="crawler-settings" class="mb-8"> <section id="crawler-settings" class="mb-8">
<btrix-section-heading style="--margin: var(--sl-spacing-medium)" <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
@ -153,6 +154,12 @@ export class ConfigDetails extends LiteElement {
> >
<btrix-desc-list> <btrix-desc-list>
${this.renderSetting(msg("Name"), crawlConfig?.name)} ${this.renderSetting(msg("Name"), crawlConfig?.name)}
${this.renderSetting(
msg("Description"),
html`
<p class="font-sans max-w-prose">${crawlConfig?.description}</p>
`
)}
${this.hideTags ${this.hideTags
? "" ? ""
: this.renderSetting( : this.renderSetting(
@ -180,7 +187,8 @@ export class ConfigDetails extends LiteElement {
(url: any) => html` <li>${url}</li> ` (url: any) => html` <li>${url}</li> `
)} )}
</ul> </ul>
` `,
true
)} )}
${this.renderSetting( ${this.renderSetting(
msg("Include Any Linked Page"), msg("Include Any Linked Page"),
@ -201,7 +209,7 @@ export class ConfigDetails extends LiteElement {
} }
const includeUrlList = primarySeedConfig.include || seedsConfig.include; const includeUrlList = primarySeedConfig.include || seedsConfig.include;
return html` return html`
${this.renderSetting(msg("Primary Seed URL"), primarySeedUrl)} ${this.renderSetting(msg("Primary Seed URL"), primarySeedUrl, true)}
${this.renderSetting( ${this.renderSetting(
msg("Crawl Scope"), msg("Crawl Scope"),
this.scopeTypeLabels[ this.scopeTypeLabels[
@ -221,7 +229,8 @@ export class ConfigDetails extends LiteElement {
)} )}
</ul> </ul>
` `
: msg("None") : msg("None"),
true
)} )}
${this.renderSetting( ${this.renderSetting(
msg("Include Any Linked Page (“one hop out”)"), msg("Include Any Linked Page (“one hop out”)"),
@ -235,7 +244,8 @@ export class ConfigDetails extends LiteElement {
${additionalUrlList.map((url) => html`<li>${url}</li>`)} ${additionalUrlList.map((url) => html`<li>${url}</li>`)}
</ul> </ul>
` `
: msg("None") : msg("None"),
true
)} )}
${this.renderSetting( ${this.renderSetting(
msg("Max Pages"), msg("Max Pages"),
@ -259,7 +269,7 @@ export class ConfigDetails extends LiteElement {
`; `;
} }
private renderSetting(label: string, value: any) { private renderSetting(label: string, value: any, breakAll?: boolean) {
let content = value; let content = value;
if (!this.crawlConfig) { if (!this.crawlConfig) {
@ -272,7 +282,7 @@ export class ConfigDetails extends LiteElement {
>`; >`;
} }
return html` return html`
<btrix-desc-list-item label=${label} class="break-all"> <btrix-desc-list-item label=${label} class=${breakAll ? "break-all" : ""}>
${content} ${content}
</btrix-desc-list-item> </btrix-desc-list-item>
`; `;

104
frontend/src/pages/org/workflow-editor.ts
View File

@ -98,6 +98,7 @@ type FormState = {
jobName: WorkflowParams["name"]; jobName: WorkflowParams["name"];
browserProfile: Profile | null; browserProfile: Profile | null;
tags: Tags; tags: Tags;
description: WorkflowParams["description"];
}; };
const getDefaultProgressState = (hasConfigId = false): ProgressState => { const getDefaultProgressState = (hasConfigId = false): ProgressState => {
@ -163,6 +164,7 @@ const getDefaultFormState = (): FormState => ({
jobName: "", jobName: "",
browserProfile: null, browserProfile: null,
tags: [], tags: [],
description: null,
}); });
const defaultProgressState = getDefaultProgressState(); const defaultProgressState = getDefaultProgressState();
const orderedTabNames = STEPS.filter( const orderedTabNames = STEPS.filter(
@ -233,6 +235,7 @@ export class CrawlConfigEditor extends LiteElement {
}); });
private validateNameMax = maxLengthValidator(50); private validateNameMax = maxLengthValidator(50);
private validateDescriptionMax = maxLengthValidator(350);
private get formHasError() { private get formHasError() {
return ( return (
@ -469,6 +472,7 @@ export class CrawlConfigEditor extends LiteElement {
runNow: false, runNow: false,
tags: this.initialWorkflow.tags, tags: this.initialWorkflow.tags,
jobName: this.initialWorkflow.name || "", jobName: this.initialWorkflow.name || "",
description: this.initialWorkflow.description,
browserProfile: this.initialWorkflow.profileid browserProfile: this.initialWorkflow.profileid
? ({ id: this.initialWorkflow.profileid } as Profile) ? ({ id: this.initialWorkflow.profileid } as Profile)
: null, : null,
@ -639,19 +643,21 @@ export class CrawlConfigEditor extends LiteElement {
private renderFooter({ isFirst = false, isLast = false }) { private renderFooter({ isFirst = false, isLast = false }) {
return html` return html`
<div class="px-6 py-4 border-t flex justify-between"> <div class="px-6 py-4 border-t flex justify-between">
${isFirst ${
? html` isFirst
? html`
<sl-button size="small" type="reset"> <sl-button size="small" type="reset">
<sl-icon slot="prefix" name="chevron-left"></sl-icon> <sl-icon slot="prefix" name="chevron-left"></sl-icon>
${this.configId ? msg("Cancel") : msg("Start Over")} ${this.configId ? msg("Cancel") : msg("Start Over")}
</sl-button> </sl-button>
` `
: html` : html`
<sl-button size="small" @click=${this.backStep}> <sl-button size="small" @click=${this.backStep}>
<sl-icon slot="prefix" name="chevron-left"></sl-icon> <sl-icon slot="prefix" name="chevron-left"></sl-icon>
${msg("Previous Step")} ${msg("Previous Step")}
</sl-button> </sl-button>
`} `
}
${when( ${when(
this.configId, this.configId,
() => html` () => html`
@ -686,12 +692,14 @@ export class CrawlConfigEditor extends LiteElement {
?disabled=${this.isSubmitting || this.formHasError} ?disabled=${this.isSubmitting || this.formHasError}
?loading=${this.isSubmitting} ?loading=${this.isSubmitting}
> >
${this.formState.scheduleType === "now" || ${
this.formState.runNow this.formState.scheduleType === "now" ||
? msg("Save & Run Crawl") this.formState.runNow
: this.formState.scheduleType === "none" ? msg("Save & Run Crawl")
? msg("Save Workflow") : this.formState.scheduleType === "none"
: msg("Save & Schedule Crawl")} ? msg("Save Workflow")
: msg("Save & Schedule Crawl")
}
</sl-button>` </sl-button>`
: html` : html`
<div> <div>
@ -1050,9 +1058,11 @@ https://example.net`}
<btrix-details ?open=${exclusions.length > 0}> <btrix-details ?open=${exclusions.length > 0}>
<span slot="title" <span slot="title"
>${msg("Exclusions")} >${msg("Exclusions")}
${exclusions.length ${
? html`<btrix-badge>${exclusions.length}</btrix-badge>` exclusions.length
: ""}</span ? html`<btrix-badge>${exclusions.length}</btrix-badge>`
: ""
}</span
> >
<div class="grid grid-cols-5 gap-4 py-2"> <div class="grid grid-cols-5 gap-4 py-2">
${this.renderFormCol(html` ${this.renderFormCol(html`
@ -1089,9 +1099,11 @@ https://example.net`}
<btrix-details> <btrix-details>
<span slot="title"> <span slot="title">
${msg("Additional URLs")} ${msg("Additional URLs")}
${additionalUrlList.length ${
? html`<btrix-badge>${additionalUrlList.length}</btrix-badge>` additionalUrlList.length
: ""} ? html`<btrix-badge>${additionalUrlList.length}</btrix-badge>`
: ""
}
</span> </span>
<div class="grid grid-cols-5 gap-4 py-2"> <div class="grid grid-cols-5 gap-4 py-2">
${this.renderFormCol(html` ${this.renderFormCol(html`
@ -1172,9 +1184,11 @@ https://archiveweb.page/images/${"logo.svg"}`}
> >
<span slot="suffix">${msg("pages")}</span> <span slot="suffix">${msg("pages")}</span>
<div slot="help-text"> <div slot="help-text">
${minPages === 1 ${
? msg(str`Minimum ${minPages} page`) minPages === 1
: msg(str`Minimum ${minPages} pages`)} ? msg(str`Minimum ${minPages} page`)
: msg(str`Minimum ${minPages} pages`)
}
</div> </div>
</sl-input> </sl-input>
</sl-mutation-observer> </sl-mutation-observer>
@ -1415,9 +1429,11 @@ https://archiveweb.page/images/${"logo.svg"}`}
${msg( ${msg(
html`Schedule: html`Schedule:
<span class="text-blue-500" <span class="text-blue-500"
>${utcSchedule >${
? humanizeSchedule(utcSchedule) utcSchedule
: msg("Invalid date")}</span ? humanizeSchedule(utcSchedule)
: msg("Invalid date")
}</span
>.` >.`
)} )}
</p> </p>
@ -1425,9 +1441,11 @@ https://archiveweb.page/images/${"logo.svg"}`}
${msg( ${msg(
html`Next scheduled run: html`Next scheduled run:
<span <span
>${utcSchedule >${
? humanizeNextDate(utcSchedule) utcSchedule
: msg("Invalid date")}</span ? humanizeNextDate(utcSchedule)
: msg("Invalid date")
}</span
>.` >.`
)} )}
</p> </p>
@ -1451,7 +1469,6 @@ https://archiveweb.page/images/${"logo.svg"}`}
}; };
private renderJobMetadata() { private renderJobMetadata() {
const { helpText, validate } = this.validateNameMax;
return html` return html`
${this.renderFormCol(html` ${this.renderFormCol(html`
<sl-input <sl-input
@ -1459,18 +1476,28 @@ https://archiveweb.page/images/${"logo.svg"}`}
name="jobName" name="jobName"
label=${msg("Name")} label=${msg("Name")}
autocomplete="off" autocomplete="off"
placeholder=${msg("Example (example.com) Weekly Crawl", { placeholder=${msg("Our Website (example.com)")}
desc: "Example Workflow name",
})}
value=${this.formState.jobName} value=${this.formState.jobName}
help-text=${helpText} help-text=${this.validateNameMax.helpText}
@sl-input=${validate} @sl-input=${this.validateNameMax.validate}
></sl-input> ></sl-input>
`)} `)}
${this.renderHelpTextCol( ${this.renderHelpTextCol(
msg(`Customize this Workflow and crawl name. Crawls are named after msg(`Customize this Workflow's name. Workflows are named after
the starting URL(s) by default.`) the first Crawl URL by default.`)
)} )}
${this.renderFormCol(html`
<sl-textarea
class="with-max-help-text"
name="description"
label=${msg("Description")}
autocomplete="off"
value=${this.formState.description}
help-text=${this.validateDescriptionMax.helpText}
@sl-input=${this.validateDescriptionMax.validate}
></sl-textarea>
`)}
${this.renderHelpTextCol(msg(`Provide details about this Workflow.`))}
${this.renderFormCol( ${this.renderFormCol(
html` html`
<btrix-tag-input <btrix-tag-input
@ -1856,10 +1883,12 @@ https://archiveweb.page/images/${"logo.svg"}`}
const renderDetail = ({ loc, msg: detailMsg }: any) => html` const renderDetail = ({ loc, msg: detailMsg }: any) => html`
<li> <li>
${loc.some((v: string) => v === "seeds") && ${
typeof loc[loc.length - 1] === "number" loc.some((v: string) => v === "seeds") &&
? msg(str`Seed URL ${loc[loc.length - 1] + 1}: `) typeof loc[loc.length - 1] === "number"
: `${loc[loc.length - 1]}: `} ? msg(str`Seed URL ${loc[loc.length - 1] + 1}: `)
: `${loc[loc.length - 1]}: `
}
${detailMsg} ${detailMsg}
</li> </li>
`; `;
@ -1900,6 +1929,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
const config: NewCrawlConfigParams = { const config: NewCrawlConfigParams = {
jobType: this.jobType || "custom", jobType: this.jobType || "custom",
name: this.formState.jobName || "", name: this.formState.jobName || "",
description: this.formState.description,
scale: this.formState.scale, scale: this.formState.scale,
profileid: this.formState.browserProfile?.id || "", profileid: this.formState.browserProfile?.id || "",
runNow: this.formState.runNow || this.formState.scheduleType === "now", runNow: this.formState.runNow || this.formState.scheduleType === "now",

1
frontend/src/pages/org/workflows-new.ts
View File

@ -13,6 +13,7 @@ import urlListSvg from "../../assets/images/new-crawl-config_URL-List.svg";
const defaultValue = { const defaultValue = {
name: "", name: "",
description: null,
profileid: null, profileid: null,
schedule: "", schedule: "",
config: { config: {

1
frontend/src/types/crawler.ts
View File

@ -39,6 +39,7 @@ export type WorkflowParams = {
config: SeedConfig; config: SeedConfig;
tags: string[]; tags: string[];
crawlTimeout: number | null; crawlTimeout: number | null;
description: string | null;
}; };
export type CrawlConfig = WorkflowParams & { export type CrawlConfig = WorkflowParams & {