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", 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';