Several bug fixes (#2061)

dashboard/src/components/AppView/AppSecrets/AppSecrets.scss

@@ -1,3 +1,9 @@
 .app-secrets-content {
   margin-top: 1.2rem;
+  margin-right: 1.2rem;
+}
+
+.app-secrets-section {
+  max-height: 10rem;
+  overflow-y: auto;
 }

dashboard/src/components/AppView/AppSecrets/AppSecrets.tsx

@@ -41,7 +41,7 @@ function AppSecrets({ secretRefs }: IResourceTableProps) {
     });
   }
   return (
-    <section aria-labelledby="app-secrets">
+    <section aria-labelledby="app-secrets" className="app-secrets-section">
       <h5 className="section-title" id="app-secrets">
         Application Secrets
       </h5>

dashboard/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretItemDatum.scss

@@ -5,6 +5,8 @@
   width: 100%;
   height: 100%;
   padding-left: 0.3rem;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .secret-datum-icon {

dashboard/src/components/ChartView/ChartHeader.test.tsx

@@ -35,7 +35,7 @@ it("displays the appVersion", () => {
 
 it("uses the icon", () => {
   const wrapper = mount(<ChartHeader {...testProps} />);
-  const icon = wrapper.find("img").filterWhere(i => i.prop("alt") === "app-icon");
+  const icon = wrapper.find("img").filterWhere(i => i.prop("alt") === "icon");
   expect(icon.exists()).toBe(true);
   expect(icon.props()).toMatchObject({ src: "api/assetsvc/test.jpg" });
 });

dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/TextParam.test.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
+import { defaultStore, mountWrapper } from "shared/specs/mountWrapper";
 import { IBasicFormParam } from "shared/types";
 import TextParam from "./TextParam";
 
@@ -185,3 +186,20 @@ it("should forward the proper value when using a select", () => {
   });
   expect(handler.mock.calls[0][0]).toMatchObject(event);
 });
+
+it("a change in the param property should update the current value", () => {
+  const wrapper = mountWrapper(
+    defaultStore,
+    <TextParam {...stringProps} param={{ ...stringParam, value: "" }} />,
+  );
+  const input = wrapper.find("input");
+  expect(input.prop("value")).toBe("");
+
+  wrapper.setProps({
+    param: {
+      ...stringParam,
+      value: "foo",
+    },
+  });
+  expect(input.prop("value")).toBe("");
+});

dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/TextParam.tsx

@@ -1,4 +1,5 @@
-import * as React from "react";
+import { isEmpty } from "lodash";
+import React, { useEffect, useState } from "react";
 import { IBasicFormParam } from "shared/types";
 
 export interface IStringParamProps {
@@ -12,12 +13,14 @@ export interface IStringParamProps {
 }
 
 function TextParam({ id, param, label, inputType, handleBasicFormParamChange }: IStringParamProps) {
-  const [value, setValue] = React.useState((param.value || "") as any);
-  let timeout: NodeJS.Timeout;
+  const [value, setValue] = useState((param.value || "") as any);
+  const [valueModified, setValueModified] = useState(false);
+  const [timeout, setThisTimeout] = useState({} as NodeJS.Timeout);
   const onChange = (
     e: React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
   ) => {
     setValue(e.currentTarget.value);
+    setValueModified(true);
     // Gather changes before submitting
     clearTimeout(timeout);
     const func = handleBasicFormParamChange(param);
@@ -28,8 +31,15 @@ function TextParam({ id, param, label, inputType, handleBasicFormParamChange }:
         type: e.currentTarget.type,
       },
     } as React.FormEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
-    timeout = setTimeout(() => func(targetCopy), 500);
+    setThisTimeout(setTimeout(() => func(targetCopy), 500));
   };
+
+  useEffect(() => {
+    if (!isEmpty(param.value) && !valueModified) {
+      setValue(param.value);
+    }
+  }, [valueModified, param.value]);
+
   let input = (
     <input
       id={id}

dashboard/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { act } from "react-dom/test-utils";
+import { defaultStore, mountWrapper } from "shared/specs/mountWrapper";
+import Icon from "./Icon";
+
+it("should render an icon", () => {
+  const wrapper = mountWrapper(defaultStore, <Icon icon="foo" />);
+  expect(wrapper.find("img").prop("src")).toBe("foo");
+});
+
+it("should use the default icon if not given", () => {
+  const wrapper = mountWrapper(defaultStore, <Icon />);
+  expect(wrapper.find("img").prop("src")).toBe("placeholder.png");
+});
+
+it("should fallback to the placeholder if an error happens", () => {
+  const wrapper = mountWrapper(defaultStore, <Icon icon="foo" />);
+  expect(wrapper.find("img").prop("src")).toBe("foo");
+  act(() => {
+    wrapper.find("img").simulate("error", {});
+  });
+  wrapper.update();
+  expect(wrapper.find("img").prop("src")).toBe("placeholder.png");
+});

dashboard/src/components/Icon/Icon.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from "react";
+
+import placeholder from "../../placeholder.png";
+
+export interface IIconProps {
+  icon?: any;
+}
+
+function Icon({ icon }: IIconProps) {
+  const [srcIcon, setSrcIcon] = useState(placeholder);
+  const [iconErrored, setIconErrored] = useState(false);
+  useEffect(() => {
+    if (srcIcon !== icon && icon && !iconErrored) {
+      setSrcIcon(icon);
+    }
+  }, [srcIcon, icon, iconErrored]);
+
+  const onError = () => {
+    setIconErrored(true);
+    setSrcIcon(placeholder);
+  };
+
+  return <img src={srcIcon} alt="icon" onError={onError} />;
+}
+
+export default Icon;

dashboard/src/components/InfoCard/InfoCard.test.tsx

@@ -1,3 +1,4 @@
+import Icon from "components/Icon/Icon";
 import { shallow } from "enzyme";
 import * as React from "react";
 import { Link } from "react-router-dom";
@@ -80,7 +81,7 @@ it("should parse a description as JSX.Element", () => {
 
 it("should parse an icon", () => {
   const wrapper = shallow(<InfoCard title="foo" info="foobar" />);
-  expect(wrapper.find("img")).toExist();
+  expect(wrapper.find(Icon)).toExist();
 });
 
 it("should parse a background img", () => {

dashboard/src/components/InfoCard/InfoCard.tsx

@@ -4,6 +4,7 @@ import Card, { CardBlock, CardFooter, CardHeader } from "../js/Card";
 import Column from "../js/Column";
 import Row from "../js/Row";
 
+import Icon from "components/Icon/Icon";
 import placeholder from "../../placeholder.png";
 import "./InfoCard.css";
 
@@ -48,7 +49,7 @@ function InfoCard(props: IInfoCardProps) {
           <CardBlock>
             <div className="info-card-block">
               <div className="card-icon">
-                <img src={icon} alt="icon" />
+                <Icon icon={icon} />
               </div>
               <div className="card-description-wrapper">
                 <div className="card-description">

dashboard/src/components/InfoCard/__snapshots__/InfoCard.test.tsx.snap

@@ -39,9 +39,8 @@ exports[`should render a Card 1`] = `
           <div
             className="card-icon"
           >
-            <img
-              alt="icon"
-              src="an-icon.png"
+            <Icon
+              icon="an-icon.png"
             />
           </div>
           <div

dashboard/src/components/OperatorSummary/OperatorSummary.tsx

@@ -6,6 +6,7 @@ import React from "react";
 import { useSelector } from "react-redux";
 import { Operators } from "shared/Operators";
 import { IStoreState } from "shared/types";
+import "./CapabilityLevel.css";
 
 export default function OperatorSummary() {
   const { operator, isFetching, csv } = useSelector((state: IStoreState) => state.operators);

dashboard/src/components/OperatorView/OperatorHeader.test.tsx

@@ -13,7 +13,7 @@ it("fallbacks to the default icon if not set", () => {
   expect(
     wrapper
       .find("img")
-      .filterWhere(i => i.prop("alt") === "app-icon")
+      .filterWhere(i => i.prop("alt") === "icon")
       .prop("src"),
   ).toBe("placeholder.png");
 });

dashboard/src/components/PageHeader/PageHeader.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import Icon from "components/Icon/Icon";
 import Column from "components/js/Column";
 import Row from "components/js/Row";
 import olmIcon from "icons/operator-framework.svg";
@@ -32,7 +33,7 @@ function PageHeader({
         <Row>
           <Column span={7}>
             <div className="kubeapps-title-section">
-              {icon && <img src={icon} alt="app-icon" />}
+              {icon && <Icon icon={icon} />}
               <div className="kubeapps-title-block">
                 {titleSize === "lg" ? <h1>{title}</h1> : <h3>{title}</h3>}
                 {helm && (