Merge pull request #64 from patternfly/EmptyStateErrorMessage

feat: add EmptyStateErrorMessage and update a11y test dependency

packages/module/package.json

@@ -29,24 +29,37 @@
     "access": "public"
   },
   "dependencies": {
-    "@patternfly/react-core": "6.0.0-prerelease.21"
+    "@patternfly/react-core": "6.0.0",
+    "@patternfly/react-component-groups": "6.1.0-prerelease.3"
   },
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "6.0.0-alpha.109",
-    "@patternfly/patternfly": "6.0.0-prerelease.15",
-    "@patternfly/react-table": "6.0.0-prerelease.22",
-    "@patternfly/react-code-editor": "6.0.0-prerelease.21",
+    "@patternfly/documentation-framework": "6.0.6",
+    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/react-table": "6.0.0",
+    "@patternfly/react-code-editor": "6.0.0",
     "rimraf": "^6.0.1",
-    "@patternfly/patternfly-a11y": "^4.3.1",
+    "@patternfly/patternfly-a11y": "^5.0.0",
     "react-monaco-editor": "^0.56.0",
     "monaco-editor": "^0.50.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-proposal-private-methods": "^7.18.6"
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "victory-core": "^37.1.1",
+    "victory-scatter": "^37.1.1",
+    "victory-pie": "^37.1.1",
+    "victory-stack": "^37.1.1",
+    "victory-legend": "^37.1.1",
+    "victory-line": "^37.1.1",
+    "victory-group": "^37.1.1",
+    "victory-voronoi-container": "^37.1.1",
+    "victory-create-container": "^37.1.1",
+    "victory-cursor-container": "^37.1.1",
+    "victory-tooltip": "^37.1.1",
+    "victory-bar": "^37.1.1"
   }
 }

packages/module/patternfly-docs/content/examples/EmptyStateErrorMessage/EmptyStateErrorMessage.md

@@ -0,0 +1,32 @@
+---
+# 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: EmptyStateErrorMessage
+# 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: ['EmptyStateErrorMessage']
+---
+
+import { EmptyStateErrorMessage } from "@patternfly/ai-infra-ui-components";
+import { DrumstickBiteIcon } from '@patternfly/react-icons';
+
+Note: this component documents the API and enhances the [existing EmptyStateErrorMessage](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/EmptyStateErrorMessage.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/EmptyStateErrorMessage`
+
+### Basic
+
+```js file="./EmptyStateErrorMessageBasic.tsx"
+
+```
+
+### Customization
+
+All properties of PatternFly's [empty state component](https://www.patternfly.org/components/empty-state) are spread to the error state component group.
+
+```js file="./EmptyStateErrorMessageCustomized.tsx"
+
+```

packages/module/patternfly-docs/content/examples/EmptyStateErrorMessage/EmptyStateErrorMessageBasic.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { EmptyStateErrorMessage } from "@patternfly/ai-infra-ui-components";
+
+export const EmptyStateErrorMessageBasic: React.FunctionComponent = () => (
+    <EmptyStateErrorMessage
+        title="Error loading workloads" 
+        bodyText="Check your network connection." 
+    >
+        Reach out for more assistance.
+    </EmptyStateErrorMessage>
+);

packages/module/patternfly-docs/content/examples/EmptyStateErrorMessage/EmptyStateErrorMessageCustomized.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { EmptyStateErrorMessage } from "@patternfly/ai-infra-ui-components";
+import { DrumstickBiteIcon } from '@patternfly/react-icons';
+
+export const EmptyStateErrorMessageBasic: React.FunctionComponent = () => (
+    <EmptyStateErrorMessage
+        title="Error loading workloads" 
+        bodyText="Check your network connection." 
+        icon={DrumstickBiteIcon}
+        headingLevel="h3"
+        status="info"
+    />
+);

packages/module/src/EmptyStateErrorMessage/EmptyStateErrorMessage.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import ErrorState from "@patternfly/react-component-groups/dist/dynamic/ErrorState";
+import { EmptyStateProps } from '@patternfly/react-core';
+import { PathMissingIcon } from '@patternfly/react-icons';
+
+export type EmptyStateErrorMessageProps = {
+  /** Optional content to be rendered at the bottom of the error message. */
+  children?: React.ReactNode;
+  /** Content to be rendered as the Title of the error message, below the image. */
+  title?: string;
+  /** Content to be rendered as the description of the error below the title. */
+  bodyText?: string;
+} & Omit<EmptyStateProps, 'children' | 'titleText'>;
+
+export const EmptyStateErrorMessage: React.FunctionComponent<EmptyStateErrorMessageProps> = ({
+  title,
+  bodyText,
+  children,
+  ...props
+}: EmptyStateErrorMessageProps) => (
+  <ErrorState 
+    titleText={title}
+    bodyText={bodyText} 
+    headingLevel='h2'
+    icon={PathMissingIcon}
+    status="none"
+    customFooter={children || <div></div>}
+    {...props}
+  />
+);

packages/module/src/EmptyStateErrorMessage/index.ts

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

packages/module/src/index.ts

@@ -4,3 +4,4 @@ export * from './FieldGroupHelpLabelIcon';
 export * from './IndentSection';
 export * from './K8sNameDescriptionField';
 export * from './TruncatedText';
+export * from './EmptyStateErrorMessage';