From 074fcda4c2f62b9a8d8ec8e47253d2fb8d30f20b Mon Sep 17 00:00:00 2001 From: adamviktora Date: Fri, 22 Nov 2024 14:08:27 +0100 Subject: [PATCH 1/2] 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 | 3 +- 6 files changed, 569 insertions(+), 1 deletion(-) 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 cd4a036..1a7c457 100644 --- a/packages/module/src/index.ts +++ b/packages/module/src/index.ts @@ -1,7 +1,8 @@ export * from './BulkActionExpandableSection'; export * from './DeleteModal'; +export * from './EmptyDetailsView'; +export * from './EmptyStateErrorMessage'; export * from './FieldGroupHelpLabelIcon'; export * from './IndentSection'; export * from './K8sNameDescriptionField'; export * from './TruncatedText'; -export * from './EmptyStateErrorMessage'; From b979fe2cf839933e5c47b20abc5c754b0ea5a47d Mon Sep 17 00:00:00 2001 From: adamviktora Date: Fri, 22 Nov 2024 15:20:22 +0100 Subject: [PATCH 2/2] 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",