New configuration form (#1674)

This change introduces a new hook useConfigLink and a new component ConfigurationForm.
These combination should replace the old Configuration component, which is not typed and which could not be used with react-hook-form.

scm-ui/ui-api/src/configLink.test.ts

@@ -0,0 +1,169 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import fetchMock from "fetch-mock-jest";
+import { HalRepresentation } from "@scm-manager/ui-types";
+import { renderHook } from "@testing-library/react-hooks";
+import createWrapper from "./tests/createWrapper";
+import { useConfigLink } from "./configLink";
+import createInfiniteCachingClient from "./tests/createInfiniteCachingClient";
+import { act } from "react-test-renderer";
+
+describe("useConfigLink tests", () => {
+  type MyConfig = HalRepresentation & {
+    name: string;
+  };
+
+  const myReadOnlyConfig: MyConfig = {
+    name: "Hansolo",
+    _links: {},
+  };
+
+  const myConfig: MyConfig = {
+    name: "Lea",
+    _links: {
+      update: {
+        href: "/my/config-write",
+      },
+    },
+  };
+
+  afterEach(() => {
+    fetchMock.reset();
+  });
+
+  const fetchConfiguration = async (config: MyConfig) => {
+    fetchMock.getOnce("/api/v2/my/config", config);
+
+    const queryClient = createInfiniteCachingClient();
+
+    const { result, waitFor } = renderHook(() => useConfigLink<MyConfig>("/my/config"), {
+      wrapper: createWrapper(undefined, queryClient),
+    });
+    await waitFor(() => {
+      return !!result.current.initialConfiguration;
+    });
+
+    return result.current;
+  };
+
+  it("should return read only configuration without update link", async () => {
+    const { isReadOnly } = await fetchConfiguration(myReadOnlyConfig);
+
+    expect(isReadOnly).toBe(true);
+  });
+
+  it("should not be read only with update link", async () => {
+    const { isReadOnly } = await fetchConfiguration(myConfig);
+
+    expect(isReadOnly).toBe(false);
+  });
+
+  it("should call update url", async () => {
+    const queryClient = createInfiniteCachingClient();
+
+    fetchMock.get("/api/v2/my/config", myConfig);
+
+    const { result, waitFor, waitForNextUpdate } = renderHook(() => useConfigLink<MyConfig>("/my/config"), {
+      wrapper: createWrapper(undefined, queryClient),
+    });
+
+    await waitFor(() => {
+      return !!result.current.initialConfiguration;
+    });
+
+    const { update } = result.current;
+
+    const lukesConfig = {
+      ...myConfig,
+      name: "Luke",
+    };
+
+    fetchMock.putOnce(
+      {
+        url: "/api/v2/my/config-write",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: lukesConfig,
+      },
+      {
+        status: 204,
+      }
+    );
+
+    await act(() => {
+      update(lukesConfig);
+      return waitForNextUpdate();
+    });
+
+    expect(result.current.isUpdated).toBe(true);
+  });
+
+  it("should capture content type update url", async () => {
+    const queryClient = createInfiniteCachingClient();
+
+    fetchMock.get("/api/v2/my/config", {
+      headers: {
+        "Content-Type": "application/myconfig+json",
+      },
+      body: myConfig,
+    });
+
+    const { result, waitFor, waitForNextUpdate } = renderHook(() => useConfigLink<MyConfig>("/my/config"), {
+      wrapper: createWrapper(undefined, queryClient),
+    });
+
+    await waitFor(() => {
+      return !!result.current.initialConfiguration;
+    });
+
+    const { update } = result.current;
+
+    const lukesConfig = {
+      ...myConfig,
+      name: "Luke",
+    };
+
+    fetchMock.putOnce(
+      {
+        url: "/api/v2/my/config-write",
+        headers: {
+          "Content-Type": "application/myconfig+json",
+        },
+        body: lukesConfig,
+      },
+      {
+        status: 204,
+      }
+    );
+
+    await act(() => {
+      update(lukesConfig);
+      return waitForNextUpdate();
+    });
+
+    expect(result.current.isUpdated).toBe(true);
+  });
+});

scm-ui/ui-api/src/configLink.ts

@@ -0,0 +1,89 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import { apiClient } from "./apiclient";
+import { useCallback } from "react";
+import { HalRepresentation, Link } from "@scm-manager/ui-types";
+
+type Result<C extends HalRepresentation> = {
+  contentType: string;
+  configuration: C;
+};
+
+type MutationVariables<C extends HalRepresentation> = {
+  configuration: C;
+  contentType: string;
+  link: string;
+};
+
+export const useConfigLink = <C extends HalRepresentation>(link: string) => {
+  const queryClient = useQueryClient();
+  const queryKey = ["configLink", link];
+  const { isLoading, error, data } = useQuery<Result<C>, Error>(queryKey, () =>
+    apiClient.get(link).then((response) => {
+      const contentType = response.headers.get("Content-Type") || "application/json";
+      return response.json().then((configuration: C) => ({ configuration, contentType }));
+    })
+  );
+
+  const {
+    isLoading: isUpdating,
+    error: mutationError,
+    mutate,
+    data: updateResponse,
+  } = useMutation<Response, Error, MutationVariables<C>>(
+    (vars: MutationVariables<C>) => apiClient.put(vars.link, vars.configuration, vars.contentType),
+    {
+      onSuccess: async () => {
+        await queryClient.invalidateQueries(queryKey);
+      },
+    }
+  );
+
+  const isReadOnly = !data?.configuration._links.update;
+
+  const update = useCallback(
+    (configuration: C) => {
+      if (data && !isReadOnly) {
+        mutate({
+          configuration,
+          contentType: data.contentType,
+          link: (data.configuration._links.update as Link).href,
+        });
+      }
+    },
+    [mutate, data, isReadOnly]
+  );
+
+  return {
+    isLoading,
+    isUpdating,
+    isReadOnly,
+    error: error || mutationError,
+    initialConfiguration: data?.configuration,
+    update,
+    isUpdated: !!updateResponse,
+  };
+};

scm-ui/ui-api/src/index.ts

@@ -47,6 +47,7 @@ export * from "./sources";
 export * from "./import";
 export * from "./diff";
 export * from "./notifications";
+export * from "./configLink";
 
 export { default as ApiProvider } from "./ApiProvider";
 export * from "./ApiProvider";

scm-ui/ui-components/src/config/Configuration.tsx

@@ -21,199 +21,51 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FormEvent } from "react";
+import React, { FC, FormEvent, useState } from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { HalRepresentation } from "@scm-manager/ui-types";
-import { Links, Link } from "@scm-manager/ui-types";
+import { useConfigLink } from "@scm-manager/ui-api";
-import { apiClient, Level, SubmitButton, Loading, ErrorNotification } from "../";
+import ConfigurationForm from "./ConfigurationForm";
 
 type RenderProps = {
   readOnly: boolean;
-  initialConfiguration: ConfigurationType;
+  initialConfiguration: HalRepresentation;
-  onConfigurationChange: (p1: ConfigurationType, p2: boolean) => void;
+  onConfigurationChange: (configuration: HalRepresentation, valid: boolean) => void;
 };
 
-type Props = WithTranslation & {
+type Props = {
   link: string;
   render: (props: RenderProps) => any; // ???
 };
 
-type ConfigurationType = {
+const Configuration: FC<Props> = ({ link, render }) => {
-  _links: Links;
+  const { initialConfiguration, update, ...formProps } = useConfigLink<HalRepresentation>(link);
-} & object;
+  const [configuration, setConfiguration] = useState<HalRepresentation>();
+  const [isValid, setIsValid] = useState(false);
 
-type State = {
+  const onConfigurationChange = (config: HalRepresentation, valid: boolean) => {
-  error?: Error;
+    setConfiguration(config);
-  fetching: boolean;
+    setIsValid(valid);
-  modifying: boolean;
+  };
-  contentType?: string | null;
-  configChanged: boolean;
 
-  configuration?: ConfigurationType;
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
-  modifiedConfiguration?: ConfigurationType;
+    e.preventDefault();
-  valid: boolean;
+
+    if (configuration) {
+      update(configuration);
+    }
+  };
+
+  return (
+    <ConfigurationForm isValid={isValid} onSubmit={onSubmit} {...formProps}>
+      {initialConfiguration
+        ? render({
+            readOnly: formProps.isReadOnly,
+            initialConfiguration,
+            onConfigurationChange,
+          })
+        : null}
+    </ConfigurationForm>
+  );
 };
 
-/**
+export default Configuration;
- * GlobalConfiguration uses the render prop pattern to encapsulate the logic for
- * synchronizing the configuration with the backend.
- */
-class Configuration extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      fetching: true,
-      modifying: false,
-      configChanged: false,
-      valid: false
-    };
-  }
-
-  componentDidMount() {
-    const { link } = this.props;
-
-    apiClient
-      .get(link)
-      .then(this.captureContentType)
-      .then(response => response.json())
-      .then(this.loadConfig)
-      .catch(this.handleError);
-  }
-
-  captureContentType = (response: Response) => {
-    const contentType = response.headers.get("Content-Type");
-    this.setState({
-      contentType
-    });
-    return response;
-  };
-
-  getContentType = (): string => {
-    const { contentType } = this.state;
-    return contentType ? contentType : "application/json";
-  };
-
-  handleError = (error: Error) => {
-    this.setState({
-      error,
-      fetching: false,
-      modifying: false
-    });
-  };
-
-  loadConfig = (configuration: ConfigurationType) => {
-    this.setState({
-      configuration,
-      fetching: false,
-      error: undefined
-    });
-  };
-
-  getModificationUrl = (): string | undefined => {
-    const { configuration } = this.state;
-    if (configuration) {
-      const links = configuration._links;
-      if (links && links.update) {
-        const link = links.update as Link;
-        return link.href;
-      }
-    }
-  };
-
-  isReadOnly = (): boolean => {
-    const modificationUrl = this.getModificationUrl();
-    return !modificationUrl;
-  };
-
-  configurationChanged = (configuration: ConfigurationType, valid: boolean) => {
-    this.setState({
-      modifiedConfiguration: configuration,
-      valid
-    });
-  };
-
-  modifyConfiguration = (event: FormEvent) => {
-    event.preventDefault();
-
-    this.setState({
-      modifying: true,
-      error: undefined
-    });
-
-    const { modifiedConfiguration } = this.state;
-
-    const modificationUrl = this.getModificationUrl();
-    if (modificationUrl) {
-      apiClient
-        .put(modificationUrl, modifiedConfiguration, this.getContentType())
-        .then(() =>
-          this.setState({
-            modifying: false,
-            configChanged: true,
-            valid: false
-          })
-        )
-        .catch(this.handleError);
-    } else {
-      this.setState({
-        error: new Error("no modification link available")
-      });
-    }
-  };
-
-  renderConfigChangedNotification = () => {
-    if (this.state.configChanged) {
-      return (
-        <div className="notification is-primary">
-          <button
-            className="delete"
-            onClick={() =>
-              this.setState({
-                configChanged: false
-              })
-            }
-          />
-          {this.props.t("config.form.submit-success-notification")}
-        </div>
-      );
-    }
-    return null;
-  };
-
-  render() {
-    const { t } = this.props;
-    const { fetching, error, configuration, modifying, valid } = this.state;
-
-    if (fetching || !configuration) {
-      return <Loading />;
-    } else {
-      const readOnly = this.isReadOnly();
-
-      const renderProps: RenderProps = {
-        readOnly,
-        initialConfiguration: configuration,
-        onConfigurationChange: this.configurationChanged
-      };
-
-      return (
-        <>
-          {this.renderConfigChangedNotification()}
-          <form onSubmit={this.modifyConfiguration}>
-            {this.props.render(renderProps)}
-            {error && (
-              <>
-                <hr />
-                <ErrorNotification error={error} />
-              </>
-            )}
-            <hr />
-            <Level
-              right={<SubmitButton label={t("config.form.submit")} disabled={!valid || readOnly} loading={modifying} />}
-            />
-          </form>
-        </>
-      );
-    }
-  }
-}
-
-export default withTranslation("config")(Configuration);

scm-ui/ui-components/src/config/ConfigurationForm.tsx

@@ -0,0 +1,92 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React, { FC, FormEvent, useEffect, useState } from "react";
+import { ErrorNotification, Level, SubmitButton } from "../index";
+import { useTranslation } from "react-i18next";
+import Loading from "../Loading";
+
+type Props = {
+  isUpdating: boolean;
+  isUpdated: boolean;
+  isReadOnly: boolean;
+  isLoading: boolean;
+  isValid: boolean;
+  error?: Error | null;
+  onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+};
+
+const ConfigurationChangedNotification: FC<{ configChanged: boolean }> = ({ configChanged }) => {
+  const [t] = useTranslation("config");
+  const [hide, setHide] = useState(false);
+  useEffect(() => {
+    setHide(false);
+  }, [configChanged]);
+
+  if (!configChanged || hide) {
+    return null;
+  }
+  return (
+    <div className="notification is-primary">
+      <button className="delete" onClick={() => setHide(true)} />
+      {t("config.form.submit-success-notification")}
+    </div>
+  );
+};
+
+const ConfigurationForm: FC<Props> = ({
+  isLoading,
+  isReadOnly,
+  isValid,
+  isUpdating,
+  isUpdated,
+  error,
+  onSubmit,
+  children,
+}) => {
+  const [t] = useTranslation("config");
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <ConfigurationChangedNotification configChanged={isUpdated} />
+      {children}
+      {error && (
+        <>
+          <hr />
+          <ErrorNotification error={error} />
+        </>
+      )}
+      <hr />
+      <Level
+        right={<SubmitButton label={t("config.form.submit")} disabled={!isValid || isReadOnly} loading={isUpdating} />}
+      />
+    </form>
+  );
+};
+
+export default ConfigurationForm;

scm-ui/ui-components/src/config/index.ts

@@ -24,3 +24,4 @@
 
 export { default as ConfigurationBinder } from "./ConfigurationBinder";
 export { default as Configuration } from "./Configuration";
+export { default as ConfigurationForm } from "./ConfigurationForm";