feat: Date range filter for workflow list. Fixes #8329

[momom-i]

Fixes #8329

Add a date range filter for workflow

Now if a user has more than 20 workflows, show them a pop-up window that warns it may takes time.
But this number is a kind of temporary value so I'd appreciate if you could let me know more appropriate value.

[alexec]

I've run this locally and it seems to work. You've changed the defaults. By default, all workflows are show. Now only the last month are shown. I like this new behaviour. But, we need to make sure the user knows.

That can be archived using the new <FirstTimeUserPanel/>. This panel is inspired by the same UI element that iPhone shows after upgrades:

This element replaces the element it explains, and once dismissed, is never shown again.

This panel needs some small improvements:

• Center the text.
• Allow the user to add a margin.

E.g.

export const FirstTimeUserPanel = ({id, explanation, children ,style}: {id: string; explanation: string; children: ReactChildren, style: CSSProperties}) => {
    const localStorageKey = 'FirstTimeUserPanel/' + id;
    const [dismissed, setDismissed] = useState(localStorage.getItem(localStorageKey) === 'true');

    useEffect(() => {
        localStorage.setItem(localStorageKey, String(dismissed));
    }, [dismissed]);

    if (!dismissed) {
        return (
            <div className='white-box' style={{textAlign: 'center', ...style }}>
                <p>{explanation}</p>
                <p>
                    <a onClick={() => setDismissed(true)}>Continue</a>
                </p>
            </div>
        );
    }
    return <>{children}</>;
};

The user may wish to quickly clear the dates, so can we add an "X" to the date-picker that clears the date?

[momom-i]

I'm sorry for the delay. Now it looks like as follows.

• Add clear button

• Add FirstTimeUserPanel

[alexec]

Suggested change

	'This page shows a list of your workflows. You can filter by namespace, label and now date and time. ' +
	'This page shows a list of your workflows. You can filter by namespace, label and date/time. ' +

[alexec]

Suggested change

	'By default, only the last months workflows are shown.'
	'By default, only the last month's workflows are shown.'