Merge pull request #65 from adamviktora/EmptyDetailsView

feat(EmptyDetailsView): add component

.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",

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"
+
+```

packages/module/patternfly-docs/content/examples/EmptyDetailsView/EmptyDetailsViewBasic.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { EmptyDetailsView } from '@patternfly/ai-infra-ui-components';
+import { Button, EmptyStateActions } from '@patternfly/react-core';
+import clusterImage from './empty-state-cluster-storage.svg';
+
+export const EmptyDetailsViewBasic: React.FunctionComponent = () => (
+  <EmptyDetailsView
+    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="320px"
+    createButton={<Button>Add cluster storage</Button>}
+    footerExtraChildren={
+      <EmptyStateActions>
+        <Button variant="link">Some secondary action</Button>
+        <Button variant="link">Another action</Button>
+      </EmptyStateActions>
+    }
+  />
+);

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<EmptyStateProps, 'children' | 'titleText'> {
+  /** 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<EmptyDetailsViewProps> = ({
+  title,
+  description,
+  iconImage,
+  imageAlt = '',
+  allowCreate = true,
+  createButton,
+  footerExtraChildren = null,
+  imageSize = '320px',
+  ...props
+}: EmptyDetailsViewProps) => (
+  <EmptyState
+    headingLevel="h3"
+    titleText={title}
+    variant="lg"
+    icon={iconImage ? () => <img style={{ height: imageSize }} src={iconImage} alt={imageAlt} /> : undefined}
+    {...props}
+  >
+    <EmptyStateBody>{description}</EmptyStateBody>
+    {allowCreate && createButton ? (
+      <EmptyStateFooter>
+        <EmptyStateActions>{createButton}</EmptyStateActions>
+        {footerExtraChildren}
+      </EmptyStateFooter>
+    ) : null}
+  </EmptyState>
+);

packages/module/src/EmptyDetailsView/index.ts

@@ -0,0 +1 @@
+export * from './EmptyDetailsView';

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'