tidy up suggestions api (#1699)

Streamlines the suggestions/autocomplete api and removes redundancy. All logic accessing the backend is now in hooks in ui-api.

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

@@ -0,0 +1,32 @@
+/*
+ * 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 { Link } from "@scm-manager/ui-types";
+import { useIndexLinks } from "./base";
+import { useSuggestions } from "./suggestions";
+
+export const useGroupSuggestions = () => {
+  const indexLinks = useIndexLinks();
+  const autocompleteLink = (indexLinks.autocomplete as Link[]).find((i) => i.name === "groups");
+  return useSuggestions(autocompleteLink?.href);
+};

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

@@ -32,7 +32,9 @@ export * from "./base";
 export * from "./login";
 export * from "./groups";
 export * from "./users";
+export * from "./suggestions";
 export * from "./userSuggestions";
+export * from "./groupSuggestions";
 export * from "./repositories";
 export * from "./namespaces";
 export * from "./branches";

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

@@ -0,0 +1,47 @@
+/*
+ * 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 { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
+import { apiClient } from "./apiclient";
+
+export const useSuggestions: (link?: string) => (query: string) => Promise<SelectValue[]> = (link) => {
+  if (!link) {
+    return () => Promise.resolve([]);
+  }
+  const url = link + "?q=";
+  return (inputValue) => {
+    // Prevent violate input condition of api call because parameter length is too short
+    if (inputValue.length < 2) {
+      return Promise.resolve([]);
+    }
+    return apiClient
+      .get(url + inputValue)
+      .then((response) => response.json())
+      .then((json: AutocompleteObject[]) =>
+        json.map((element) => ({
+          value: element,
+          label: element.displayName ? `${element.displayName} (${element.id})` : element.id,
+        }))
+      );
+  };
+};

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

@@ -21,32 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import {DisplayedUser, Link, SelectValue} from "@scm-manager/ui-types";
+import { Link } from "@scm-manager/ui-types";
 import { useIndexLinks } from "./base";
-import { apiClient } from "./apiclient";
+import { useSuggestions } from "./suggestions";
 
 export const useUserSuggestions = () => {
   const indexLinks = useIndexLinks();
-  const autocompleteLink = (indexLinks.autocomplete as Link[]).find(i => i.name === "users");
+  const autocompleteLink = (indexLinks.autocomplete as Link[]).find((i) => i.name === "users");
-  if (!autocompleteLink) {
+  return useSuggestions(autocompleteLink?.href);
-    return [];
-  }
-  const url = autocompleteLink.href + "?q=";
-  return (inputValue: string): never[] | Promise<SelectValue[]> => {
-    // Prevent violate input condition of api call because parameter length is too short
-    if (inputValue.length < 2) {
-      return [];
-    }
-    return apiClient
-      .get(url + inputValue)
-      .then(response => response.json())
-      .then(json => {
-        return json.map((element: DisplayedUser) => {
-          return {
-            value: element,
-            label: `${element.displayName} (${element.id})`
-          };
-        });
-      });
-  };
 };

scm-ui/ui-components/src/GroupAutocomplete.tsx

@@ -21,24 +21,21 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import UserGroupAutocomplete, { AutocompleteProps } from "./UserGroupAutocomplete";
-import AutocompleteProps from "./UserGroupAutocomplete";
+import { useTranslation } from "react-i18next";
-import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-class GroupAutocomplete extends React.Component<AutocompleteProps & WithTranslation> {
+const GroupAutocomplete: FC<AutocompleteProps> = (props) => {
-  render() {
+  const [t] = useTranslation("commons");
-    const { t } = this.props;
   return (
     <UserGroupAutocomplete
       label={t("autocomplete.group")}
       noOptionsMessage={t("autocomplete.noGroupOptions")}
       loadingMessage={t("autocomplete.loading")}
       placeholder={t("autocomplete.groupPlaceholder")}
-        {...this.props}
+      {...props}
     />
   );
-  }
+};
-}
 
-export default withTranslation("commons")(GroupAutocomplete);
+export default GroupAutocomplete;

scm-ui/ui-components/src/UserAutocomplete.tsx

@@ -21,24 +21,21 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
-import AutocompleteProps from "./UserGroupAutocomplete";
+import UserGroupAutocomplete, { AutocompleteProps } from "./UserGroupAutocomplete";
-import UserGroupAutocomplete from "./UserGroupAutocomplete";
 
-class UserAutocomplete extends React.Component<AutocompleteProps & WithTranslation> {
+const UserAutocomplete: FC<AutocompleteProps> = (props) => {
-  render() {
+  const [t] = useTranslation("commons");
-    const { t } = this.props;
   return (
     <UserGroupAutocomplete
       label={t("autocomplete.user")}
       noOptionsMessage={t("autocomplete.noUserOptions")}
       loadingMessage={t("autocomplete.loading")}
       placeholder={t("autocomplete.userPlaceholder")}
-        {...this.props}
+      {...props}
     />
   );
-  }
+};
-}
 
-export default withTranslation("commons")(UserAutocomplete);
+export default UserAutocomplete;

scm-ui/ui-components/src/UserGroupAutocomplete.tsx

@@ -21,10 +21,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC } from "react";
-import { SelectValue, AutocompleteObject } from "@scm-manager/ui-types";
+import { SelectValue } from "@scm-manager/ui-types";
 import Autocomplete from "./Autocomplete";
-import { apiClient } from "@scm-manager/ui-api";
+import { useSuggestions } from "@scm-manager/ui-api";
 
 export type AutocompleteProps = {
   autocompleteLink?: string;
@@ -39,38 +39,16 @@ type Props = AutocompleteProps & {
   placeholder: string;
 };
 
-export default class UserGroupAutocomplete extends React.Component<Props> {
+const UserGroupAutocomplete: FC<Props> = ({ autocompleteLink, valueSelected, ...props }) => {
-  loadSuggestions = (inputValue: string): Promise<SelectValue[]> => {
+  const loadSuggestions = useSuggestions(autocompleteLink);
-    const url = this.props.autocompleteLink;
-    const link = url + "?q=";
-    return apiClient
-      .get(link + inputValue)
-      .then(response => response.json())
-      .then((json: AutocompleteObject[]) => {
-        return json.map(element => {
-          const label = element.displayName ? `${element.displayName} (${element.id})` : element.id;
-          return {
-            value: element,
-            label
-          };
-        });
-      });
-  };
 
-  selectName = (selection: SelectValue) => {
+  const selectName = (selection: SelectValue) => {
-    if (this.props.valueSelected) {
+    if (valueSelected) {
-      this.props.valueSelected(selection);
+      valueSelected(selection);
     }
   };
 
-  render() {
+  return <Autocomplete loadSuggestions={loadSuggestions} valueSelected={selectName} creatable={true} {...props} />;
-    return (
+};
-      <Autocomplete
+
-        loadSuggestions={this.loadSuggestions}
+export default UserGroupAutocomplete;
-        valueSelected={this.selectName}
-        creatable={true}
-        {...this.props}
-      />
-    );
-  }
-}