Handle gracefully when an invalid devfile is found in a git repository

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

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

packages/dashboard-frontend/src/components/ExpandableWarning/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expandable warning items should correctly render the component 1`] = `
+<div
+  className="pf-c-content"
+>
+  <small
+    className=""
+    data-pf-content={true}
+  >
+    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.
+  </small>
+  <small
+    className=""
+    data-pf-content={true}
+  >
+    <div
+      className="pf-c-code-block error"
+    >
+      <div
+        className="pf-c-code-block__header"
+      >
+        <div
+          className="pf-c-code-block__actions"
+        >
+          <div
+            className="pf-c-code-block__actions-item"
+          >
+            <button
+              aria-disabled={false}
+              aria-label={null}
+              className="pf-c-button pf-m-link pf-m-small"
+              data-ouia-component-id="OUIA-Generated-Button-link-1"
+              data-ouia-component-type="PF4/Button"
+              data-ouia-safe={true}
+              disabled={false}
+              onClick={[Function]}
+              role={null}
+              type="button"
+            >
+              <svg
+                aria-hidden={true}
+                aria-labelledby={null}
+                fill="currentColor"
+                height="1em"
+                role="img"
+                style={
+                  Object {
+                    "verticalAlign": "-0.125em",
+                  }
+                }
+                viewBox="0 0 448 512"
+                width="1em"
+              >
+                <path
+                  d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+                />
+              </svg>
+
+              Copy to clipboard
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        className="pf-c-code-block__content"
+      >
+        <pre
+          className="pf-c-code-block__pre"
+        >
+          <code
+            className="pf-c-code-block__code"
+          >
+            <small
+              className="hideOverflow"
+              data-pf-content={true}
+              data-testid="expandable-warning-error-message"
+              id="expandable-warning-error-message"
+            >
+              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.
+            </small>
+          </code>
+        </pre>
+      </div>
+    </div>
+  </small>
+  <small
+    className=""
+    data-pf-content={true}
+  >
+    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.
+  </small>
+</div>
+`;

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);
+}

packages/dashboard-frontend/src/components/ExpandableWarning/index.module.css

@@ -0,0 +1,28 @@
+/*
+ * 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);
+}
+
+.error small,
+.error button {
+  font-size: small;
+}
+
+.hideOverflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

packages/dashboard-frontend/src/components/ExpandableWarning/index.tsx

@@ -0,0 +1,155 @@
+/*
+ * 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 ExpandableWarning 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)
+    ) {
+      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 ExpandableWarning;