[Feature]: Show Quickstart button if user don't have any runs #2754 (#2770)

Author: olgenn

frontend/src/locale/en.json

@@ -46,7 +46,8 @@
     "discord": "Discord",
     "danger_zone": "Danger Zone",
     "control_plane": "Control plane",
-    "refresh": "Refresh"
+    "refresh": "Refresh",
+    "quickstart": "Quickstart"
   },
 
   "auth": {
@@ -318,6 +319,7 @@
       "search_placeholder": "Find runs",
       "empty_message_title": "No runs",
       "empty_message_text": "No runs to display.",
+      "quickstart_message_text": "No runs to display. Create a new one using the guide",
       "nomatch_message_title": "No matches",
       "nomatch_message_text": "We can't find a match. Try to change project or clear filter",
       "project": "Project",

frontend/src/pages/Runs/List/hooks/useEmptyMessages.tsx

@@ -3,16 +3,32 @@ import { useTranslation } from 'react-i18next';
 
 import { Button, ListEmptyMessage } from 'components';
 
+import { QUICK_START_URL } from 'consts';
+import { goToUrl } from 'libs';
+
 export const useEmptyMessages = ({
     clearFilter,
+    noData,
     isDisabledClearFilter,
 }: {
     clearFilter?: () => void;
+    noData?: boolean;
     isDisabledClearFilter?: boolean;
 }) => {
     const { t } = useTranslation();
 
     const renderEmptyMessage = useCallback<() => React.ReactNode>(() => {
+        if (noData && isDisabledClearFilter) {
+            return (
+                <ListEmptyMessage
+                    title={t('projects.run.empty_message_title')}
+                    message={t('projects.run.quickstart_message_text')}
+                >
+                    <Button onClick={() => goToUrl(QUICK_START_URL, true)}>{t('common.quickstart')}</Button>
+                </ListEmptyMessage>
+            );
+        }
+
         return (
             <ListEmptyMessage title={t('projects.run.nomatch_message_title')} message={t('projects.run.nomatch_message_text')}>
                 <Button disabled={isDisabledClearFilter} onClick={clearFilter}>

frontend/src/pages/Runs/List/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Button, Header, Loader, PropertyFilter, SpaceBetween, Table } from 'components';
+import { Button, Header, ListEmptyMessage, Loader, PropertyFilter, SpaceBetween, Table } from 'components';
 
 import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
 import { useBreadcrumbs, useCollection, useInfiniteScroll } from 'hooks';
@@ -61,6 +61,8 @@ export const RunList: React.FC = () => {
 
     const { renderEmptyMessage, renderNoMatchMessage } = useEmptyMessages({
         clearFilter,
+        noData: !data.length,
+        isDisabledClearFilter: Object.keys(filteringRequestParams).length <= 1 && !filteringRequestParams.only_active,
     });
 
     const { items, actions, collectionProps } = useCollection(data ?? [], {