fix: Fix workflow crawl list layout (#2309)

- Fixes workflow detail page crawls tab issue when the crawls list is
long
- Removes extraneous and incorrectly placed spinner
This commit is contained in:
sua yoo 2025-01-15 09:23:18 -08:00 committed by GitHub
parent 06eea7979a
commit 21db8e1b83
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -864,7 +864,7 @@ export class WorkflowDetail extends BtrixElement {
private renderCrawls() { private renderCrawls() {
return html` return html`
<section class="h-56 min-h-max"> <section>
<div <div
class="mb-3 flex items-center justify-end rounded-lg border bg-neutral-50 p-4" class="mb-3 flex items-center justify-end rounded-lg border bg-neutral-50 p-4"
> >
@ -912,36 +912,28 @@ export class WorkflowDetail extends BtrixElement {
<div class="mx-2"> <div class="mx-2">
<btrix-crawl-list workflowId=${this.workflowId}> <btrix-crawl-list workflowId=${this.workflowId}>
${when( ${when(this.crawls, () =>
this.crawls, this.crawls!.items.map(
() => (crawl: Crawl) =>
this.crawls!.items.map( html` <btrix-crawl-list-item
(crawl: Crawl) => href=${`${this.navigate.orgBasePath}/workflows/${this.workflowId}/crawls/${crawl.id}`}
html` <btrix-crawl-list-item .crawl=${crawl}
href=${`${this.navigate.orgBasePath}/workflows/${this.workflowId}/crawls/${crawl.id}`} >
.crawl=${crawl} ${when(
> this.isCrawler,
${when( () =>
this.isCrawler, html` <sl-menu slot="menu">
() => <sl-menu-item
html` <sl-menu slot="menu"> style="--sl-color-neutral-700: var(--danger)"
<sl-menu-item @click=${() => this.confirmDeleteCrawl(crawl)}
style="--sl-color-neutral-700: var(--danger)" >
@click=${() => this.confirmDeleteCrawl(crawl)} <sl-icon name="trash3" slot="prefix"></sl-icon>
> ${msg("Delete Crawl")}
<sl-icon name="trash3" slot="prefix"></sl-icon> </sl-menu-item>
${msg("Delete Crawl")} </sl-menu>`,
</sl-menu-item> )}</btrix-crawl-list-item
</sl-menu>`, >`,
)}</btrix-crawl-list-item ),
>`,
),
() =>
html`<div
class="my-24 flex w-full items-center justify-center text-3xl"
>
<sl-spinner></sl-spinner>
</div>`,
)} )}
</btrix-crawl-list> </btrix-crawl-list>
</div> </div>