refactor(ui): Created common Empty State Component #228
Conversation
chore: staging -> master v0.1.6
…omponent with configs
|
|
|
@tarakaswathi-datazip please review this PR, and let me know if any changes are necessary. |
|
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? |
|
Hi @aarya-16, have you tested your changes? can you share screenshot of your changes made? |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
same for this
There was a problem hiding this comment.
and this too
ui/src/types/commonTypes.ts
Outdated
| 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 | ||
| } |
There was a problem hiding this comment.
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.
ui/src/utils/emptyStateConfigs.ts
Outdated
There was a problem hiding this comment.
As mentioned in the above comment, please remove this file from utils, and keep the config inside the EmptyState Component itself
| @@ -0,0 +1,87 @@ | |||
| import { Button } from "antd" | |||
| import { PlayCircle, Plus, GitCommit } from "@phosphor-icons/react" | |||
There was a problem hiding this comment.
Please change this to
| 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
ui/src/utils/emptyStateConfigs.ts
Outdated
| 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", | ||
| }, |
There was a problem hiding this comment.
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.
ui/src/types/commonTypes.ts
Outdated
| 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 | ||
| } | ||
| } | ||
|
|
There was a problem hiding this comment.
Since we are moving the config to the component itself, also remove this interface from here
deepanshupal09-datazip
added
the
hacktoberfest
|
@deepanshupal09-datazip Here are the screenshots: Jobs Source Destination |
5 participants
Description
Overview
Replaced three duplicate empty state components (
DestinationEmptyState,SourceEmptyState,JobEmptyState) with a single reusableEmptyStatecomponent, while preserving existing functionality and visual styling.File Changes
New Files Added
ui/src/modules/common/components/EmptyState.tsxui/src/utils/emptyStateConfigs.tsFiles Modified
ui/src/types/commonTypes.tsEmptyStateConfigandEmptyStatePropsinterfaces for TypeScript supportui/src/modules/destinations/components/DestinationEmptyState.tsxEmptyStatecomponent with destination configurationui/src/modules/sources/components/SourceEmptyState.tsxEmptyStatecomponent with source configurationui/src/modules/jobs/components/JobEmptyState.tsxEmptyStatecomponent with job configurationfixes #220
Type of change
How Has This Been Tested?
Related PR's (If Any):