feat: handle gracefully when an invalid devfile is found in a git rep…

…ository Signed-off-by: Oleksii Orel <[email protected]>
eclipse-che · Oct 21, 2022 · c4aa1a3 · c4aa1a3
1 parent 1b48708
commit c4aa1a3
Show file tree

Hide file tree

Showing 16 changed files with 477 additions and 50 deletions.
diff --git a/.deps/prod.md b/.deps/prod.md
@@ -7,11 +7,11 @@
 | `@eclipse-che/[email protected]` | EPL-2.0 | ecd.che |
 | [`@eclipse-che/[email protected]`](git+https://github.com/che-incubator/che-code.git) | EPL-2.0 | ecd.che |
 | [`@eclipse-che/[email protected]`](git+https://github.com/eclipse-che/che-theia.git) | EPL-2.0 | ecd.che |
-| [`@eclipse-che/common@7.54.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | ecd.che |
-| [`@eclipse-che/dashboard-backend@7.54.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | ecd.che |
-| [`@eclipse-che/dashboard-frontend@7.54.0-next`](git://github.com/eclipse/che-dashboard.git) | EPL-2.0 | ecd.che |
+| [`@eclipse-che/common@7.56.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | ecd.che |
+| [`@eclipse-che/dashboard-backend@7.56.0-next`](https://github.com/eclipse-che/che-dashboard) | EPL-2.0 | ecd.che |
+| [`@eclipse-che/dashboard-frontend@7.56.0-next`](git://github.com/eclipse/che-dashboard.git) | EPL-2.0 | ecd.che |
 | [`@eclipse-che/[email protected]`](git+https://github.com/che-incubator/devfile-converter.git) | EPL-2.0 | ecd.che |
-| [`@eclipse-che/[email protected]1632305737`](https://github.com/eclipse/che-workspace-client) | EPL-2.0 | ecd.che |
+| [`@eclipse-che/[email protected]1663851810`](https://github.com/eclipse/che-workspace-client) | EPL-2.0 | ecd.che |
 | [`@fastify/[email protected]`](git+https://github.com/fastify/ajv-compiler.git) | MIT | clearlydefined |
 | [`@fastify/[email protected]`](git+https://github.com/fastify/fastify-cors.git) | MIT | clearlydefined |
 | [`@fastify/[email protected]`](git+https://github.com/fastify/fastify-error.git) | MIT | clearlydefined |
@@ -324,7 +324,7 @@
 | [`[email protected]`](git+ssh://[email protected]/pinojs/pino-std-serializers.git) | MIT | clearlydefined |
 | [`[email protected]`](git+https://github.com/pinojs/pino.git) | MIT | clearlydefined |
 | [`[email protected]`](git+https://github.com/FezVrasta/popper.js.git) | MIT | [CQ22353](https://dev.eclipse.org/ipzilla/show_bug.cgi?id=22353) |
-| [`[email protected]`](https://github.com/postcss/postcss.git) | MIT | clearlydefined |
+| [`[email protected]`](https://github.com/postcss/postcss.git) | MIT | #3545 |
 | [`[email protected]`](https://github.com/prettier/prettier.git) | MIT | #1523 |
 | [`[email protected]`](git://github.com/benjamn/private.git) | MIT | clearlydefined |
 | [`[email protected]`](git+https://github.com/fastify/processs-warning.git) | MIT | clearlydefined |

diff --git a/packages/dashboard-frontend/package.json b/packages/dashboard-frontend/package.json
@@ -59,7 +59,7 @@
     "process": "^0.11.10",
     "qs": "^6.9.4",
     "react": "^16.14.0",
-    "react-copy-to-clipboard": "^5.0.2",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^6.1.0",
     "react-pluralize": "^1.6.3",

diff --git a/packages/dashboard-frontend/src/components/ExpandableWarning/__tests__/index.spec.tsx b/packages/dashboard-frontend/src/components/ExpandableWarning/__tests__/index.spec.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2018-2021 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import ExpandableWarningItems, { ERROR_MESSAGE_ID } from '../';
+import { render, RenderResult, screen } from '@testing-library/react';
+
+describe('Expandable warning items', () => {
+  it('should correctly render the component', () => {
+    const component = getComponent(
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non sollicitudin lorem, a suscipit massa. Cras egestas ante vel est pulvinar, a elementum orci faucibus. Etiam in risus et augue sollicitudin facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus ligula arcu, imperdiet hendrerit nulla varius, molestie volutpat nunc.',
+      'Ut venenatis, purus ut ultrices luctus, nisi leo rutrum tortor, id sagittis nisl augue ac risus. In hac habitasse platea dictumst. Curabitur vitae dui eu elit egestas consectetur ac sed lacus. Nam nisl arcu, mollis eget tempor consequat, egestas nec lacus. Sed elementum, nibh id suscipit accumsan, metus mauris ultrices nisi, ut gravida sapien ipsum at elit. Maecenas in ultrices ex, id efficitur ante. Nulla facilisi.',
+      'Sed iaculis dictum nibh nec varius. Pellentesque ac diam vestibulum nisl condimentum feugiat. Sed et est in dolor posuere pharetra. Aliquam sodales lorem eu velit efficitur vestibulum. Praesent ornare ut tellus nec cursus. Proin at hendrerit metus, sed placerat justo. Cras id hendrerit ante, et consequat orci. Ut ante ipsum, eleifend sit amet iaculis quis, scelerisque eget mi. Pellentesque aliquam porttitor neque ut consectetur. Vivamus euismod elit velit, eget suscipit sem euismod vitae. Quisque sagittis, felis ut rhoncus vestibulum, arcu dui tincidunt quam, sit amet congue ligula dolor id sapien.',
+    );
+    const json = renderer.create(component).toJSON();
+
+    expect(json).toMatchSnapshot();
+  });
+
+  it('should show a short error message and an expand button', () => {
+    const component = getComponent(
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non sollicitudin lorem, a suscipit massa. Cras egestas ante vel est pulvinar, a elementum orci faucibus. Etiam in risus et augue sollicitudin facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus ligula arcu, imperdiet hendrerit nulla varius, molestie volutpat nunc.',
+      'Ut venenatis, purus ut ultrices luctus, nisi leo rutrum tortor, id sagittis nisl augue ac risus. In hac habitasse platea dictumst. Curabitur vitae dui eu elit egestas consectetur ac sed lacus. Nam nisl arcu, mollis eget tempor consequat, egestas nec lacus. Sed elementum, nibh id suscipit accumsan, metus mauris ultrices nisi, ut gravida sapien ipsum at elit. Maecenas in ultrices ex, id efficitur ante. Nulla facilisi.',
+      'Sed iaculis dictum nibh nec varius. Pellentesque ac diam vestibulum nisl condimentum feugiat. Sed et est in dolor posuere pharetra. Aliquam sodales lorem eu velit efficitur vestibulum. Praesent ornare ut tellus nec cursus. Proin at hendrerit metus, sed placerat justo. Cras id hendrerit ante, et consequat orci. Ut ante ipsum, eleifend sit amet iaculis quis, scelerisque eget mi. Pellentesque aliquam porttitor neque ut consectetur. Vivamus euismod elit velit, eget suscipit sem euismod vitae. Quisque sagittis, felis ut rhoncus vestibulum, arcu dui tincidunt quam, sit amet congue ligula dolor id sapien.',
+    );
+
+    renderComponent(component);
+
+    expect(screen.queryByTestId(ERROR_MESSAGE_ID)).toBeTruthy;
+    expect(screen.getByTestId(ERROR_MESSAGE_ID).className).toEqual('hideOverflow');
+    expect(screen.queryByText('Show More')).toBeTruthy;
+  });
+});
+
+function getComponent(
+  textBefore: string,
+  errorMessage: string,
+  textAfter: string,
+): React.ReactElement {
+  return (
+    <ExpandableWarningItems
+      textBefore={textBefore}
+      errorMessage={errorMessage}
+      textAfter={textAfter}
+    />
+  );
+}
+
+function renderComponent(component: React.ReactElement): RenderResult {
+  return render(component);
+}
diff --git a/packages/dashboard-frontend/src/components/ExpandableWarning/index.module.css b/packages/dashboard-frontend/src/components/ExpandableWarning/index.module.css
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2018-2021 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+.error {
+  border-top: 2px solid;
+  border-color: var(--pf-global--palette--red-100);
+  background-color: var(--pf-global--palette--red-50);
+}
+
+.hideOverflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
diff --git a/packages/dashboard-frontend/src/components/ExpandableWarning/index.tsx b/packages/dashboard-frontend/src/components/ExpandableWarning/index.tsx
@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) 2018-2021 Red Hat, Inc.
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *   Red Hat, Inc. - initial API and implementation
+ */
+
+import React from 'react';
+import {
+  Button,
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  ExpandableSectionToggle,
+  TextContent,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { CopyIcon } from '@patternfly/react-icons/dist/js/icons';
+import styles from './index.module.css';
+
+export const ERROR_MESSAGE_ID = 'expandable-warning-error-message';
+
+type Props = {
+  textBefore: string;
+  errorMessage: string;
+  textAfter: string;
+};
+type State = {
+  copied: boolean;
+  hasExpand: boolean;
+  isExpanded: boolean;
+};
+
+class ExpandableWarningItems extends React.Component<Props, State> {
+  private readonly checkOverflow: () => void;
+  private copiedTimer: number | undefined;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      copied: false,
+      hasExpand: false,
+      isExpanded: false,
+    };
+
+    this.checkOverflow = () => {
+      if (this.state.isExpanded) {
+        this.setState({
+          isExpanded: false,
+        });
+        return;
+      }
+      const errorMessageElement = document.getElementById(ERROR_MESSAGE_ID);
+      if (errorMessageElement !== null) {
+        const { offsetWidth, scrollWidth } = errorMessageElement;
+        const showExpandToggle = scrollWidth > offsetWidth;
+        this.setState({
+          hasExpand: showExpandToggle,
+        });
+      }
+    };
+  }
+
+  public componentDidMount(): void {
+    window.addEventListener('resize', this.checkOverflow, false);
+    this.checkOverflow();
+  }
+
+  public componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
+    if (
+      prevProps.errorMessage === this.props.errorMessage &&
+      prevState.isExpanded === this.state.isExpanded
+    ) {
+      return;
+    }
+    this.checkOverflow();
+  }
+
+  public componentWillUnmount() {
+    window.removeEventListener('resize', this.checkOverflow);
+  }
+
+  private onToggle(isExpanded: boolean) {
+    this.setState({ isExpanded });
+  }
+
+  private onCopyToClipboard() {
+    this.setState({ copied: true });
+    if (this.copiedTimer) {
+      clearTimeout(this.copiedTimer);
+    }
+    this.copiedTimer = window.setTimeout(() => {
+      this.setState({ copied: false });
+    }, 3000);
+  }
+
+  render(): React.ReactElement {
+    const { errorMessage, textBefore, textAfter } = this.props;
+    const { hasExpand, isExpanded, copied } = this.state;
+    const copyIconTitle = copied ? 'Copied' : 'Copy to clipboard';
+    const actions = (
+      <CodeBlockAction>
+        <CopyToClipboard text={errorMessage} onCopy={() => this.onCopyToClipboard()}>
+          <Button variant="link" isSmall={true}>
+            <CopyIcon />
+            &nbsp;{copyIconTitle}
+          </Button>
+        </CopyToClipboard>
+      </CodeBlockAction>
+    );
+
+    const expandableSectionTitle = isExpanded ? 'Show Less' : 'Show More';
+    const messageClassName = isExpanded ? undefined : styles.hideOverflow;
+    return (
+      <>
+        <TextContent>
+          <Text component={TextVariants.small}>{textBefore}</Text>
+          <Text component={TextVariants.small}>
+            <CodeBlock actions={actions} className={styles.error}>
+              <CodeBlockCode>
+                <Text
+                  id={ERROR_MESSAGE_ID}
+                  data-testid={ERROR_MESSAGE_ID}
+                  className={messageClassName}
+                  component={TextVariants.small}
+                >
+                  {errorMessage}
+                </Text>
+              </CodeBlockCode>
+              {hasExpand && (
+                <ExpandableSectionToggle
+                  isExpanded={isExpanded}
+                  onToggle={isExpanded => this.onToggle(isExpanded)}
+                  direction="up"
+                >
+                  {expandableSectionTitle}
+                </ExpandableSectionToggle>
+              )}
+            </CodeBlock>
+          </Text>
+          <Text component={TextVariants.small}>{textAfter}</Text>
+        </TextContent>
+      </>
+    );
+  }
+}
+
+export default ExpandableWarningItems;