From d659511b827569e269f26360cf327578a2fc55c9 Mon Sep 17 00:00:00 2001
From: Anton Gilgur <agilgur5@gmail.com>
Date: Mon, 4 Sep 2023 02:33:50 -0400
Subject: [PATCH] fix(ui): merge WF List FTU Panel with New Version Modal

- Workflows being hidden behind a first-time user panel was confusing
  - reported in an issue with a few upvotes
  - personally, I did not even realize that panel specified a new default, it just seemed like another unnecessary FTU click when my cookies get cleared -- similar to the survey etc

- Move the description of the new default instead to the New Version Modal
  - and specify in **bold** that there is a new default

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
---
 .../modals/new-version/new-version-modal.tsx  |  3 +
 .../workflows-list/workflows-list.tsx         | 96 ++++++++-----------
 2 files changed, 42 insertions(+), 57 deletions(-)

diff --git a/ui/src/app/modals/new-version/new-version-modal.tsx b/ui/src/app/modals/new-version/new-version-modal.tsx
index b28b61b2554a..b0ab444bc56e 100644
--- a/ui/src/app/modals/new-version/new-version-modal.tsx
+++ b/ui/src/app/modals/new-version/new-version-modal.tsx
@@ -47,6 +47,9 @@ export const NewVersionModal = ({version, dismiss}: {version: string; dismiss: (
                     </a>
                     in the middle of the workflow
                 </li>
+                <li>
+                    Filter by date and time in the UI. <b>New default</b>: only show the past month's Workflows.
+                </li>
             </ul>
             <p>
                 <a href='https://blog.argoproj.io/what-to-expect-in-argo-workflows-v3-4-711702ad88e9?utm_source=argo-ui' target='_blank'>
diff --git a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
index 83a4dae3125c..5acc32f8b8ab 100644
--- a/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
+++ b/ui/src/app/workflows/components/workflows-list/workflows-list.tsx
@@ -10,7 +10,6 @@ import {BasePage} from '../../../shared/components/base-page';
 import {CostOptimisationNudge} from '../../../shared/components/cost-optimisation-nudge';
 import {ErrorNotice} from '../../../shared/components/error-notice';
 import {ExampleManifests} from '../../../shared/components/example-manifests';
-import {FirstTimeUserPanel} from '../../../shared/components/first-time-user-panel';
 import {Loading} from '../../../shared/components/loading';
 import {PaginationPanel} from '../../../shared/components/pagination-panel';
 import {ZeroState} from '../../../shared/components/zero-state';
@@ -179,62 +178,45 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
                                 ]
                             }
                         }}>
-                        <FirstTimeUserPanel
-                            id='WorkflowListPanel'
-                            explanation={
-                                'This page shows a list of your workflows. You can filter by namespace, label and now date and time. ' +
-                                'By default, only the last months workflows are shown.'
-                            }
-                            style={{margin: 20}}>
-                            <>
-                                <WorkflowsToolbar
-                                    selectedWorkflows={this.state.selectedWorkflows}
-                                    clearSelection={() => this.setState({selectedWorkflows: new Map<string, models.Workflow>()})}
-                                    loadWorkflows={() => {
-                                        this.setState({selectedWorkflows: new Map<string, models.Workflow>()});
-                                        this.changeFilters(
-                                            this.state.namespace,
-                                            this.state.selectedPhases,
-                                            this.state.selectedLabels,
-                                            this.state.minStartedAt,
-                                            this.state.maxStartedAt,
-                                            {
-                                                limit: this.state.pagination.limit
-                                            }
-                                        );
-                                    }}
-                                    isDisabled={this.state.batchActionDisabled}
-                                />
-                                <div className={`row ${this.state.selectedWorkflows.size === 0 ? '' : 'pt-60'}`}>
-                                    <div className='columns small-12 xlarge-2'>
-                                        <WorkflowsSummaryContainer workflows={this.state.workflows} />
-                                        <div>
-                                            <WorkflowFilters
-                                                workflows={this.state.workflows || []}
-                                                namespace={this.state.namespace}
-                                                phaseItems={WorkflowPhases}
-                                                selectedPhases={this.state.selectedPhases}
-                                                selectedLabels={this.state.selectedLabels}
-                                                minStartedAt={this.state.minStartedAt}
-                                                maxStartedAt={this.state.maxStartedAt}
-                                                onChange={(namespace, selectedPhases, selectedLabels, minStartedAt, maxStartedAt) =>
-                                                    this.changeFilters(namespace, selectedPhases, selectedLabels, minStartedAt, maxStartedAt, {limit: this.state.pagination.limit})
-                                                }
-                                            />
-                                        </div>
-                                    </div>
-                                    <div className='columns small-12 xlarge-10'>{this.renderWorkflows()}</div>
+                        <WorkflowsToolbar
+                            selectedWorkflows={this.state.selectedWorkflows}
+                            clearSelection={() => this.setState({selectedWorkflows: new Map<string, models.Workflow>()})}
+                            loadWorkflows={() => {
+                                this.setState({selectedWorkflows: new Map<string, models.Workflow>()});
+                                this.changeFilters(this.state.namespace, this.state.selectedPhases, this.state.selectedLabels, this.state.minStartedAt, this.state.maxStartedAt, {
+                                    limit: this.state.pagination.limit
+                                });
+                            }}
+                            isDisabled={this.state.batchActionDisabled}
+                        />
+                        <div className={`row ${this.state.selectedWorkflows.size === 0 ? '' : 'pt-60'}`}>
+                            <div className='columns small-12 xlarge-2'>
+                                <WorkflowsSummaryContainer workflows={this.state.workflows} />
+                                <div>
+                                    <WorkflowFilters
+                                        workflows={this.state.workflows || []}
+                                        namespace={this.state.namespace}
+                                        phaseItems={WorkflowPhases}
+                                        selectedPhases={this.state.selectedPhases}
+                                        selectedLabels={this.state.selectedLabels}
+                                        minStartedAt={this.state.minStartedAt}
+                                        maxStartedAt={this.state.maxStartedAt}
+                                        onChange={(namespace, selectedPhases, selectedLabels, minStartedAt, maxStartedAt) =>
+                                            this.changeFilters(namespace, selectedPhases, selectedLabels, minStartedAt, maxStartedAt, {limit: this.state.pagination.limit})
+                                        }
+                                    />
                                 </div>
-                                <SlidingPanel isShown={!!this.sidePanel} onClose={() => ctx.navigation.goto('.', {sidePanel: null})}>
-                                    {this.sidePanel === 'submit-new-workflow' && (
-                                        <WorkflowCreator
-                                            namespace={Utils.getNamespaceWithDefault(this.state.namespace)}
-                                            onCreate={wf => ctx.navigation.goto(uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`))}
-                                        />
-                                    )}
-                                </SlidingPanel>
-                            </>
-                        </FirstTimeUserPanel>
+                            </div>
+                            <div className='columns small-12 xlarge-10'>{this.renderWorkflows()}</div>
+                        </div>
+                        <SlidingPanel isShown={!!this.sidePanel} onClose={() => ctx.navigation.goto('.', {sidePanel: null})}>
+                            {this.sidePanel === 'submit-new-workflow' && (
+                                <WorkflowCreator
+                                    namespace={Utils.getNamespaceWithDefault(this.state.namespace)}
+                                    onCreate={wf => ctx.navigation.goto(uiUrl(`workflows/${wf.metadata.namespace}/${wf.metadata.name}`))}
+                                />
+                            )}
+                        </SlidingPanel>
                     </Page>
                 )}
             </Consumer>
@@ -274,7 +256,7 @@ export class WorkflowsList extends BasePage<RouteComponentProps<any>, State> {
         this.listWatch = new ListWatch(
             () =>
                 services.workflows.list(namespace, selectedPhases, selectedLabels, pagination).then(x => {
-                    x.items = x.items && x.items.filter(w => this.nullSafeTimeFilter(minStartedAt, maxStartedAt, w.status.startedAt, w.status.phase === NODE_PHASE.PENDING));
+                    x.items = x.items?.filter(w => this.nullSafeTimeFilter(minStartedAt, maxStartedAt, w.status.startedAt, w.status.phase === NODE_PHASE.PENDING));
                     return x;
                 }),
             (resourceVersion: string) => services.workflows.watchFields({namespace, phases: selectedPhases, labels: selectedLabels, resourceVersion}),