From 91c9af7f8e30c487602c97c39965d6254026ec3f Mon Sep 17 00:00:00 2001 From: adamviktora Date: Fri, 22 Nov 2024 14:08:27 +0100 Subject: [PATCH 1/4] feat(EmptyDetailsView): add component --- .../EmptyDetailsView/EmptyDetailsView.md | 24 + .../EmptyDetailsViewBasic.tsx | 15 + .../empty-state-cluster-storage.svg | 472 ++++++++++++++++++ .../src/EmptyDetailsView/EmptyDetailsView.tsx | 55 ++ packages/module/src/EmptyDetailsView/index.ts | 1 + packages/module/src/index.ts | 5 +- 6 files changed, 570 insertions(+), 2 deletions(-) create mode 100644 packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsView.md create mode 100644 packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx create mode 100644 packages/module/patternfly-docs/content/examples/EmptyDetailsView/empty-state-cluster-storage.svg create mode 100644 packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx create mode 100644 packages/module/src/EmptyDetailsView/index.ts diff --git a/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsView.md b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsView.md new file mode 100644 index 0000000..34460db --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsView.md @@ -0,0 +1,24 @@ +--- +# Sidenav top-level section +# should be the same for all markdown files +section: AI-infra-ui-components +# Sidenav secondary level section +# should be the same for all markdown files +id: EmptyDetailsView +# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility) +source: react +# If you use typescript, the name of the interface to display props for +# These are found through the sourceProps function provided in patternfly-docs.source.js +propComponents: ['EmptyDetailsView'] +--- + +import { EmptyDetailsView } from "@patternfly/ai-infra-ui-components"; +import clusterImage from './empty-state-cluster-storage.svg' + +Note: this component documents the API and enhances the [existing EmptyDetailsView](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/EmptyDetailsView.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/components/EmptyDetailsView` + +### Example + +```js file="./EmptyDetailsViewBasic.tsx" + +``` diff --git a/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx new file mode 100644 index 0000000..9c32b0c --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { EmptyDetailsView } from '@patternfly/ai-infra-ui-components'; +import { Button } from '@patternfly/react-core'; +import clusterImage from './empty-state-cluster-storage.svg'; + +export const EmptyDetailsViewBasic: React.FunctionComponent = () => ( + Add cluster storage} + /> +); diff --git a/packages/module/patternfly-docs/content/examples/EmptyDetailsView/empty-state-cluster-storage.svg b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/empty-state-cluster-storage.svg new file mode 100644 index 0000000..6a229d8 --- /dev/null +++ b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/empty-state-cluster-storage.svg @@ -0,0 +1,472 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx b/packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx new file mode 100644 index 0000000..fb40d80 --- /dev/null +++ b/packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx @@ -0,0 +1,55 @@ +import * as React from 'react'; +import { + EmptyState, + EmptyStateBody, + EmptyStateActions, + EmptyStateFooter, + EmptyStateProps +} from '@patternfly/react-core'; + +export interface EmptyDetailsViewProps extends Omit { + /** Empty state title text. */ + title?: string; + /** Empty state description - will be rendered inside EmptyStateBody. */ + description?: React.ReactNode; + /** Source path to an icon image. */ + iconImage?: string; + /** Alternative text for icon image if image can't load. */ + imageAlt?: string; + /** Height of an icon image. */ + imageSize?: string; + /** Flag indicating that creation is allowed. */ + allowCreate?: boolean; + /** Button which initiates the creation. */ + createButton?: React.ReactNode; + /** Extra children to render inside EmptyStateFooter. */ + footerExtraChildren?: React.ReactNode; +} + +export const EmptyDetailsView: React.FunctionComponent = ({ + title, + description, + iconImage, + imageAlt, + allowCreate = true, + createButton, + footerExtraChildren = null, + imageSize = '320px', + ...props +}: EmptyDetailsViewProps) => ( + {imageAlt} : undefined} + {...props} + > + {description} + {allowCreate && createButton ? ( + + {createButton} + {footerExtraChildren} + + ) : null} + +); diff --git a/packages/module/src/EmptyDetailsView/index.ts b/packages/module/src/EmptyDetailsView/index.ts new file mode 100644 index 0000000..2e62fd5 --- /dev/null +++ b/packages/module/src/EmptyDetailsView/index.ts @@ -0,0 +1 @@ +export * from './EmptyDetailsView'; diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts index d7d3536..b5e00fe 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -1,8 +1,9 @@ export * from './BulkActionExpandableSection'; export * from './DeleteModal'; +export * from './EmptyDetailsView'; +export * from './EmptyStateErrorMessage'; export * from './FieldGroupHelpLabelIcon'; export * from './IndentSection'; export * from './K8sNameDescriptionField'; +export * from './PasswordInput'; export * from './TruncatedText'; -export * from './EmptyStateErrorMessage'; -export * from './PasswordInput' \ No newline at end of file From c9f1ee66cb676ef52cfa6855efe816b9b0c9938b Mon Sep 17 00:00:00 2001 From: adamviktora Date: Fri, 22 Nov 2024 15:20:22 +0100 Subject: [PATCH 2/4] update eslintrc - using "type" with Omit instead of "interface" doesn't work for some reason with docs-framework --- .eslintrc.json | 1 - 1 file changed, 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index b910b7d..274147b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -36,7 +36,6 @@ "@typescript-eslint/adjacent-overload-signatures": "error", "@typescript-eslint/array-type": "error", "@typescript-eslint/consistent-type-assertions": "error", - "@typescript-eslint/consistent-type-definitions": ["error", "type"], "@typescript-eslint/no-misused-new": "error", "@typescript-eslint/no-namespace": "error", "@typescript-eslint/no-require-imports": "off", From 5c3f8aa0ca51197c9e05578881758a72071515ad Mon Sep 17 00:00:00 2001 From: adamviktora Date: Thu, 2 Jan 2025 14:43:20 +0100 Subject: [PATCH 3/4] fix: PR review --- .../EmptyDetailsView/EmptyDetailsViewBasic.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx index 9c32b0c..2ffb9d4 100644 --- a/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx +++ b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { EmptyDetailsView } from '@patternfly/ai-infra-ui-components'; -import { Button } from '@patternfly/react-core'; +import { Button, EmptyStateActions } from '@patternfly/react-core'; import clusterImage from './empty-state-cluster-storage.svg'; export const EmptyDetailsViewBasic: React.FunctionComponent = () => ( @@ -8,8 +8,14 @@ export const EmptyDetailsViewBasic: React.FunctionComponent = () => ( title="Start by adding cluster storage" description="Cluster storage saves your project’s data on a selected cluster. You can optionally connect cluster storage to a workbench." iconImage={clusterImage} - imageSize="240px" + imageSize="320px" imageAlt="add cluster storage" createButton={} + footerExtraChildren={ + + + + + } /> ); From 41988b7c6e6a5f118b7b9cfc3bf693e93fb3839b Mon Sep 17 00:00:00 2001 From: adamviktora Date: Thu, 2 Jan 2025 16:27:40 +0100 Subject: [PATCH 4/4] fix: set imageAlt to empty string (alt="") by default --- .../content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx | 1 - packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx index 2ffb9d4..5487036 100644 --- a/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx +++ b/packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx @@ -9,7 +9,6 @@ export const EmptyDetailsViewBasic: React.FunctionComponent = () => ( description="Cluster storage saves your project’s data on a selected cluster. You can optionally connect cluster storage to a workbench." iconImage={clusterImage} imageSize="320px" - imageAlt="add cluster storage" createButton={} footerExtraChildren={ diff --git a/packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx b/packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx index fb40d80..d6e88fa 100644 --- a/packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx +++ b/packages/module/src/EmptyDetailsView/EmptyDetailsView.tsx @@ -30,7 +30,7 @@ export const EmptyDetailsView: React.FunctionComponent = title, description, iconImage, - imageAlt, + imageAlt = '', allowCreate = true, createButton, footerExtraChildren = null,