refactor(ui): Created common Empty State Component #228

aarya-16 · 2025-10-10T20:30:00Z

Description

Overview

Replaced three duplicate empty state components (DestinationEmptyState, SourceEmptyState, JobEmptyState) with a single reusable EmptyState component, while preserving existing functionality and visual styling.

File Changes

New Files Added

ui/src/modules/common/components/EmptyState.tsx

Generic empty state component with configuration-driven rendering
Handles asset mapping, icon mapping, and HTML content support

ui/src/utils/emptyStateConfigs.ts

Configuration objects for destination, source, and job empty states
Contains styling, content, and asset paths for each variant

Files Modified

ui/src/types/commonTypes.ts

Added EmptyStateConfig and EmptyStateProps interfaces for TypeScript support

ui/src/modules/destinations/components/DestinationEmptyState.tsx

Now uses generic EmptyState component with destination configuration

ui/src/modules/sources/components/SourceEmptyState.tsx

Now uses generic EmptyState component with source configuration

ui/src/modules/jobs/components/JobEmptyState.tsx

Now uses generic EmptyState component with job configuration

fixes #220

Type of change

Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Ran pre-commit checks
Ensure UI remains consistent before and after refactoring and adding the changes

Related PR's (If Any):

* chore: add comments * chore: 🚨 lint fix

…atazip-inc#195) * feat: add error logs i check conenction for source and destination * fix: parse json message as string * chore: update response key * chore: refactor * chore: remove logEntry struct * fix: log parsing * fix: log parsing * fix: logs parsing logic * docs: updated api contract

…ogs-in-test-connection feat: show error logs in test connection

…omponent with configs

CLAassistant · 2025-10-10T20:30:10Z

All committers have signed the CLA.

aarya-16 · 2025-10-10T20:31:44Z

@tarakaswathi-datazip please review this PR, and let me know if any changes are necessary.

Akshay-datazip · 2025-10-15T05:29:14Z

hey thanks a lot for your contribution @aarya-16 can you also go ahead and share the pr on our slack in contribute-to-olake channel?
Would help our devs to expedite
regards
https://join.slack.com/t/getolake/

* test: ✅ base setup for automation testing using playwright , add test cases fro major flows * fix: integration workflow changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * fix: ci changes * test: add postgres flow * fix: lint changes * test: add iceberg specific test * fix: tests * fix: stream name * fix: test fix * fix: test fix * fix: test fix * fix: test fix * fix: changes * fix: ci changes * fix: ci changes * fix: ci changes * test: fail test on test connection failure * fix: ci changes * fix: changes * fix: changes * fix: changes * fix: changes * fix: changes * fix: changes * fix: test fix * fix: changes * fix: changes * fix: test-data fix * fix: test-data fix * fix: changes * fix: changes * fix: changes * fix: host and port changes * fix: changes * fix: change * test: login test updated * test: refactor create source and destination page * test: refactor tests * fix: test fix * fix: changes * fix: fix changes * fix: changes * fix: changes * fix: review changes * refactor: refactor tests to use authenticated state of playwright * fix: changes * docs: update tests readme * test: intercept and log destination spec response * docs: update readme * fix: update timeouts for playwright tests * test: update readme * fix: add retries in playwright config * test: fix timeout duration * fix: update readme * test: add connector data test-id * fix: resolve comments * refactor(test): make and use enums instead of strings * fix: fix test data builder * fix: test data job name * fix: add todo --------- Co-authored-by: Duke Dhal <[email protected]> Co-authored-by: deepanshupal09-datazip <[email protected]>

deepanshupal09-datazip · 2025-10-23T06:58:39Z

Hi @aarya-16, have you tested your changes? can you share screenshot of your changes made?
Thanks

deepanshupal09-datazip · 2025-10-23T07:21:45Z

ui/src/modules/destinations/components/DestinationEmptyState.tsx

The goal of this issue was to consolidate all Empty State components into a single shared one
Please remove this component and use the common EmptyState.tsx instead

deepanshupal09-datazip · 2025-10-23T07:22:05Z

ui/src/modules/jobs/components/JobEmptyState.tsx

same for this

deepanshupal09-datazip · 2025-10-23T07:22:18Z

ui/src/modules/sources/components/SourceEmptyState.tsx

and this too

deepanshupal09-datazip · 2025-10-23T07:31:09Z

ui/src/types/commonTypes.ts

+export interface EmptyStateConfig {
+	image: string
+	welcomeText: string
+	welcomeTextColor: string
+	heading: string
+	description: string
+	descriptionColor: string
+
+	button: {
+		text: string
+		icon: string
+		className: string
+	}
+
+	tutorial: {
+		link: string
+		image: string
+		altText: string
+	}
+}
+
+export interface EmptyStateProps {
+	config: EmptyStateConfig
+	onButtonClick: () => void
+}


We don’t need to pass this much information into the EmptyState component. Instead, the props can be simplified to something like:

export interface EmptyStateProps { page: "job" | "sources" | "destinations"; onButtonClick: () => void }

The config logic can live inside the EmptyState component itself... since it’s only used there and not reused elsewhere. This way, we can conditionally render based on the page prop instead of passing the entire config through props.

deepanshupal09-datazip · 2025-10-23T07:33:37Z

ui/src/utils/emptyStateConfigs.ts

As mentioned in the above comment, please remove this file from utils, and keep the config inside the EmptyState Component itself

deepanshupal09-datazip · 2025-10-23T07:36:52Z

ui/src/modules/common/components/EmptyState.tsx

@@ -0,0 +1,87 @@
+import { Button } from "antd"
+import { PlayCircle, Plus, GitCommit } from "@phosphor-icons/react"


Please change this to

Suggested change

import { PlayCircle, Plus, GitCommit } from "@phosphor-icons/react"

import { PlayCircleIcon, PlusIcon, GitCommitIcon } from "@phosphor-icons/react"

as these are depracted icon, and there is a separate PR to replace them everywhere, so let's keep it consistent here too

deepanshupal09-datazip · 2025-10-23T07:41:40Z

ui/src/utils/emptyStateConfigs.ts

+		image: "/src/assets/FirstDestination.svg",
+		welcomeText: "Welcome User !",
+		welcomeTextColor: "text-brand-blue",
+		heading: "Ready to create your first destination",
+		description:
+			"Get started and experience the speed of OLake by running jobs",
+		descriptionColor: "text-text-primary",
+		button: {
+			text: "New Destination",
+			icon: "Plus",
+			className:
+				"border-1 mb-12 border-[1px] border-[#D9D9D9] bg-white px-6 py-4 text-black",
+		},
+		tutorial: {
+			link: "https://youtu.be/Ub1pcLg0WsM?si=V2tEtXvx54wDoa8Y",
+			image: "/src/assets/DestinationTutorial.svg",
+			altText: "Destination Tutorial",
+		},


Also, I don't think we need these many things in the config... some attributes here are common in all three configs(job, source, destination)

Please remove such attributes that are common, and try to keep the attributes here to minimum, things that are actually different in all three.

deepanshupal09-datazip · 2025-10-23T07:43:25Z

ui/src/types/commonTypes.ts

+export interface EmptyStateConfig {
+	image: string
+	welcomeText: string
+	welcomeTextColor: string
+	heading: string
+	description: string
+	descriptionColor: string
+
+	button: {
+		text: string
+		icon: string
+		className: string
+	}
+
+	tutorial: {
+		link: string
+		image: string
+		altText: string
+	}
+}
+


Since we are moving the config to the component itself, also remove this interface from here

* Added success message on Job History refetch * Update ui/src/modules/jobs/pages/JobHistory.tsx Co-authored-by: deepanshupal09-datazip <[email protected]> --------- Co-authored-by: vikash choudhary <[email protected]> Co-authored-by: deepanshupal09-datazip <[email protected]>

…datazip-inc#216) * fix: replace deprecated Phosphor icons with latest *Icon alternatives * fix: update Phosphor icons to latest alternatives in DestinationEdit and SourceEdit components and fix Lint issue * refactor: remove EditSourceModal * fix: update icon import --------- Co-authored-by: vikash choudhary <[email protected]>

* feat: add append only mode in ui * fix: data filter bug * fix: fix color of append only mode switch * fix: add custom option in all streams ingestion mode change * fix: use clsx for conditional styling * fix: fix icons

aarya-16 · 2025-10-31T18:41:20Z

@deepanshupal09-datazip Here are the screenshots:

Jobs

Source

Destination

deepanshupal09-datazip and others added 13 commits October 1, 2025 16:31

feat: show error logs in test connection in source and destination

5da3883

fix: fix test connection fail modal

b63bece

Merge branch 'staging' into feat/show-error-logs-in-test-connection

772ae8a

Merge branch 'staging' into feat/show-error-logs-in-test-connection

4567a14

fix: resolve comments

a20e009

fix: merge conflicts

0e1fc65

chore: add comments (datazip-inc#224)

89034f5

* chore: add comments * chore: 🚨 lint fix

Merge branch 'staging' into feat/show-error-logs-in-test-connection

826a526

Merge pull request datazip-inc#208 from datazip-inc/feat/show-error-l…

526d35b

…ogs-in-test-connection feat: show error logs in test connection

feat(ui): Added common empty state interface and configs

8bc3a4e

feat(ui): Added common Empty State component

ce8d34f

refactor(ui): Modified existing emptyState components to use Common c…

a2ddf22

…omponent with configs

Merge branch 'staging' into feat/common-empty-state-component

ee12356

Akshay-datazip requested a review from hash-data October 15, 2025 05:28

tarakaswathi-datazip and others added 2 commits October 17, 2025 18:11

Merge branch 'staging' into feat/common-empty-state-component

ef4ac6f

deepanshupal09-datazip requested changes Oct 23, 2025

View reviewed changes

Sarthak2845 and others added 2 commits October 24, 2025 16:37

deepanshupal09-datazip added the hacktoberfest Issues open for Hacktoberfest contributors label Oct 28, 2025

deepanshupal09-datazip and others added 4 commits October 29, 2025 13:09

feat: append only mode (datazip-inc#232)

4cf9938

* feat: add append only mode in ui * fix: data filter bug * fix: fix color of append only mode switch * fix: add custom option in all streams ingestion mode change * fix: use clsx for conditional styling * fix: fix icons

refactor(ui): Transferred Empty State Configs to Component

77fec0d

feat(ui): Used Empty State Component at Required Pages

739d2e7

refactor(ui): Removed Individual Empty State Components

6c26a8d

aarya-16 requested a review from deepanshupal09-datazip October 30, 2025 21:21

Merge branch 'staging' into feat/common-empty-state-component

2d9443c

shubham19may force-pushed the staging branch from 0c10a25 to 8335e7e Compare November 11, 2025 12:21

		@@ -0,0 +1,87 @@
		import { Button } from "antd"
		import { PlayCircle, Plus, GitCommit } from "@phosphor-icons/react"

	import { PlayCircle, Plus, GitCommit } from "@phosphor-icons/react"
	import { PlayCircleIcon, PlusIcon, GitCommitIcon } from "@phosphor-icons/react"

refactor(ui): Created common Empty State Component #228

Are you sure you want to change the base?

refactor(ui): Created common Empty State Component #228

Uh oh!

Conversation

aarya-16 commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Overview

File Changes

New Files Added

Files Modified

Type of change

How Has This Been Tested?

Related PR's (If Any):

Uh oh!

CLAassistant commented Oct 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aarya-16 commented Oct 10, 2025

Uh oh!

Akshay-datazip commented Oct 15, 2025

Uh oh!

deepanshupal09-datazip commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aarya-16 commented Oct 31, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

aarya-16 commented Oct 10, 2025 •

edited

Loading

CLAassistant commented Oct 10, 2025 •

edited

Loading

deepanshupal09-datazip commented Oct 23, 2025 •

edited

Loading