Merge pull request #2795 from devtron-labs/chore/empty-workflows

chore: enhance navbar animation and workflow editor empty states

Author: arunjaindev

src/components/common/navigation/NavigationRoutes.tsx

@@ -171,6 +171,7 @@ const NavigationRoutes = ({ reloadVersionConfig }: Readonly<NavigationRoutesType
             const controls = animate(navBarWidth, NAVBAR_WIDTH, {
                 duration: 0.3,
                 ease: 'easeOut',
+                delay: 1,
             })
             return controls.stop
         }

src/components/v2/appDetails/k8Resource/nodeType/Node.component.tsx

@@ -444,6 +444,7 @@ const NodeComponent = ({
                                                 className="dc__mxw-250--imp"
                                                 followCursor="horizontal"
                                                 plugins={[followCursor]}
+                                                placement="bottom"
                                             >
                                                 <span className="dc__truncate">
                                                     {node.health.message.toLowerCase()}

src/components/workflowEditor/workflowEditor.scss

@@ -39,27 +39,7 @@
         animation-fill-mode: forwards;
     }
 }
-.create-here {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    flex-direction: column;
-    margin: auto;
-    margin-top: 125px;
-    width: 300px;
-    border-radius: 4px;
-    margin-bottom: 20px;
-}
-.form__title {
-    &.form__title--workflow-editor {
-        margin-top: 20px;
-    }
-}
-.form__subtitle {
-    &.form__subtitle--workflow-editor {
-        margin-top: 4px;
-    }
-}
+
 .pipeline-select-container {
     width: 320px;
     box-shadow: 0 6px 12px -3px rgba(0, 56, 112, 0.3);

src/components/workflowEditor/workflowEditor.tsx

@@ -43,6 +43,7 @@ import {
     ButtonVariantType,
     ButtonStyleType,
     handleAnalyticsEvent,
+    GenericEmptyState,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { PipelineContext, WorkflowEditProps, WorkflowEditState } from './types'
 import { URLS, AppConfigStatus, ViewType } from '../../config'
@@ -832,28 +833,26 @@ class WorkflowEdit extends Component<WorkflowEditProps, WorkflowEditState> {
 
     renderEmptyState() {
         return (
-            <div className="create-here">
-                {this.props.isJobView ? (
-                    <img src={nojobs} width="250" height="200" alt="create-job-workflow" />
-                ) : (
-                    <img src={emptyWorkflow} alt="create-app-workflow" height="200" />
-                )}
-                <h1 className="form__title form__title--workflow-editor">Workflows</h1>
-                <p className="form__subtitle form__subtitle--workflow-editor">
-                    {this.props.isJobView
-                        ? 'Configure job pipelines to be executed. Pipelines can be configured to be triggered automatically based on code change or time.'
-                        : 'Workflows consist of pipelines from build to deployment stages of an application.'}
-                    <br />
-                    {!this.props.isJobView && (
+            <GenericEmptyState
+                title="Workflows"
+                subTitle={
+                    <div className="flexbox-col dc__gap-4">
+                        <span>
+                            {this.props.isJobView
+                                ? 'Configure job pipelines to be executed. Pipelines can be configured to be triggered automatically based on code change or time.'
+                                : 'Workflows consist of pipelines from build to deployment stages of an application.'}
+                        </span>
                         <DocLink
                             text="Learn about creating workflows"
                             docLinkKey="APP_CREATE_WORKFLOW"
                             dataTestId="learn-more-about-creating-workflow-link"
                         />
-                    )}
-                </p>
-                {this.renderWorkflowControlButton()}
-            </div>
+                    </div>
+                }
+                image={this.props.isJobView ? nojobs : emptyWorkflow}
+                isButtonAvailable
+                renderButton={this.renderWorkflowControlButton}
+            />
         )
     }