Merged in bugfix/autocomplete2 (pull request #268)

bugfix/autocomplete
2025-11-08 06:25:45 +01:00 · 2019-07-03 10:44:10 +00:00
parent 8f7ca34fa2 8a408c4600
commit 681d6f02a7
13 changed files with 198 additions and 115 deletions
--- a/scm-ui-components/packages/ui-components/src/Autocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/Autocomplete.js
@@ -4,7 +4,6 @@ import { AsyncCreatable, Async } from "react-select";
 import type { AutocompleteObject, SelectValue } from "@scm-manager/ui-types";
 import LabelWithHelpIcon from "./forms/LabelWithHelpIcon";

-
 type Props = {
  loadSuggestions: string => Promise<AutocompleteObject>,
  valueSelected: SelectValue => void,
@@ -17,12 +16,9 @@ type Props = {
  creatable?: boolean
 };

-
 type State = {};

 class Autocomplete extends React.Component<Props, State> {
-
-
  static defaultProps = {
    placeholder: "Type here",
    loadingMessage: "Loading...",
@@ -34,7 +30,11 @@ class Autocomplete extends React.Component<Props, State> {
  };

  // We overwrite this to avoid running into a bug (https://github.com/JedWatson/react-select/issues/2944)
-  isValidNewOption = (inputValue: string, selectValue: SelectValue, selectOptions: SelectValue[]) => {
+  isValidNewOption = (
+    inputValue: string,
+    selectValue: SelectValue,
+    selectOptions: SelectValue[]
+  ) => {
    const isNotDuplicated = !selectOptions
      .map(option => option.label)
      .includes(inputValue);
@@ -43,12 +43,21 @@ class Autocomplete extends React.Component<Props, State> {
  };

  render() {
-    const { label, helpText, value, placeholder, loadingMessage, noOptionsMessage, loadSuggestions, creatable } = this.props;
+    const {
+      label,
+      helpText,
+      value,
+      placeholder,
+      loadingMessage,
+      noOptionsMessage,
+      loadSuggestions,
+      creatable
+    } = this.props;
    return (
      <div className="field">
        <LabelWithHelpIcon label={label} helpText={helpText} />
        <div className="control">
-          {creatable?
+          {creatable ? (
            <AsyncCreatable
              cacheOptions
              loadOptions={loadSuggestions}
@@ -65,7 +74,7 @@ class Autocomplete extends React.Component<Props, State> {
                });
              }}
            />
-          :
+          ) : (
            <Async
              cacheOptions
              loadOptions={loadSuggestions}
@@ -75,13 +84,11 @@ class Autocomplete extends React.Component<Props, State> {
              loadingMessage={() => loadingMessage}
              noOptionsMessage={() => noOptionsMessage}
            />
-
-          }
+          )}
        </div>
      </div>
    );
  }
 }

-
 export default Autocomplete;
--- a/scm-ui-components/packages/ui-components/src/ErrorNotification.js
+++ b/scm-ui-components/packages/ui-components/src/ErrorNotification.js
@@ -10,35 +10,33 @@ type Props = {
  error?: Error
 };

-
 class ErrorNotification extends React.Component<Props> {
  render() {
    const { t, error } = this.props;
    if (error) {
      if (error instanceof BackendError) {
-        return <BackendErrorNotification error={error} />
+        return <BackendErrorNotification error={error} />;
      } else if (error instanceof UnauthorizedError) {
        return (
          <Notification type="danger">
-            <strong>{t("error-notification.prefix")}:</strong>{" "}
-            {t("error-notification.timeout")}{" "}
+            <strong>{t("errorNotification.prefix")}:</strong>{" "}
+            {t("errorNotification.timeout")}{" "}
            <a href="javascript:window.location.reload(true)">
-              {t("error-notification.loginLink")}
+              {t("errorNotification.loginLink")}
            </a>
          </Notification>
        );
      } else if (error instanceof ForbiddenError) {
        return (
          <Notification type="danger">
-            <strong>{t("error-notification.prefix")}:</strong>{" "}
-            {t("error-notification.forbidden")}
+            <strong>{t("errorNotification.prefix")}:</strong>{" "}
+            {t("errorNotification.forbidden")}
          </Notification>
-        )
-      } else
-       {
+        );
+      } else {
        return (
          <Notification type="danger">
-            <strong>{t("error-notification.prefix")}:</strong> {error.message}
+            <strong>{t("errorNotification.prefix")}:</strong> {error.message}
          </Notification>
        );
      }
--- a/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/GroupAutocomplete.js
@@ -0,0 +1,27 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type AutocompleteProps from "./UserGroupAutocomplete";
+import UserGroupAutocomplete from "./UserGroupAutocomplete";
+
+type Props = AutocompleteProps & {
+  // Context props
+  t: string => string
+};
+
+class GroupAutocomplete extends React.Component<Props> {
+  render() {
+    const { t } = this.props;
+    return (
+      <UserGroupAutocomplete
+        label={t("autocomplete.group")}
+        noOptionsMessage={t("autocomplete.noGroupOptions")}
+        loadingMessage={t("autocomplete.loading")}
+        placeholder={t("autocomplete.groupPlaceholder")}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export default translate("commons")(GroupAutocomplete);
--- a/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/UserAutocomplete.js
@@ -0,0 +1,27 @@
+// @flow
+import React from "react";
+import { translate } from "react-i18next";
+import type AutocompleteProps from "./UserGroupAutocomplete";
+import UserGroupAutocomplete from "./UserGroupAutocomplete";
+
+type Props = AutocompleteProps & {
+  // Context props
+  t: string => string
+};
+
+class UserAutocomplete extends React.Component<Props> {
+  render() {
+    const { t } = this.props;
+    return (
+      <UserGroupAutocomplete
+        label={t("autocomplete.user")}
+        noOptionsMessage={t("autocomplete.noUserOptions")}
+        loadingMessage={t("autocomplete.loading")}
+        placeholder={t("autocomplete.userPlaceholder")}
+        {...this.props}
+      />
+    );
+  }
+}
+
+export default translate("commons")(UserAutocomplete);
--- a/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
+++ b/scm-ui-components/packages/ui-components/src/UserGroupAutocomplete.js
@@ -0,0 +1,52 @@
+// @flow
+import React from "react";
+import type { SelectValue } from "@scm-manager/ui-types";
+import Autocomplete from "./Autocomplete";
+
+export type AutocompleteProps = {
+  autocompleteLink: string,
+  valueSelected: SelectValue => void,
+  value?: SelectValue
+};
+
+type Props = AutocompleteProps & {
+  label: string,
+  noOptionsMessage: string,
+  loadingMessage: string,
+  placeholder: string
+};
+
+export default class UserGroupAutocomplete extends React.Component<Props> {
+  loadSuggestions = (inputValue: string) => {
+    const url = this.props.autocompleteLink;
+    const link = url + "?q=";
+    return fetch(link + inputValue)
+      .then(response => response.json())
+      .then(json => {
+        return json.map(element => {
+          const label = element.displayName
+            ? `${element.displayName} (${element.id})`
+            : element.id;
+          return {
+            value: element,
+            label
+          };
+        });
+      });
+  };
+
+  selectName = (selection: SelectValue) => {
+    this.props.valueSelected(selection);
+  };
+
+  render() {
+    return (
+      <Autocomplete
+        loadSuggestions={this.loadSuggestions}
+        valueSelected={this.selectName}
+        creatable={true}
+        {...this.props}
+      />
+    );
+  }
+}
--- a/scm-ui-components/packages/ui-components/src/index.js
+++ b/scm-ui-components/packages/ui-components/src/index.js
@@ -26,6 +26,8 @@ export { default as Tooltip } from "./Tooltip";
 // TODO do we need this? getPageFromMatch is already exported by urls
 export { getPageFromMatch } from "./urls";
 export { default as Autocomplete} from "./Autocomplete";
+export { default as GroupAutocomplete} from "./GroupAutocomplete";
+export { default as UserAutocomplete} from "./UserAutocomplete";
 export { default as BranchSelector } from "./BranchSelector";
 export { default as Breadcrumb } from "./Breadcrumb";
 export { default as MarkdownView } from "./MarkdownView";
--- a/scm-ui/public/locales/de/commons.json
+++ b/scm-ui/public/locales/de/commons.json
@@ -19,11 +19,11 @@
      "subtitle": "Ein unbekannter Fehler ist aufgetreten."
    }
  },
-  "error-notification": {
+  "errorNotification": {
    "prefix": "Fehler",
    "loginLink": "Erneute Anmeldung",
    "timeout": "Die Session ist abgelaufen.",
-    "wrong-login-credentials": "Ungültige Anmeldedaten",
+    "wrongLoginCredentials": "Ungültige Anmeldedaten",
    "forbidden": "Sie haben nicht die Berechtigung, diesen Datensatz zu sehen"
  },
  "loading": {
@@ -40,6 +40,15 @@
    "admin": "Administration"
  },
  "filterEntries": "Einträge filtern",
+  "autocomplete": {
+    "group": "Gruppe",
+    "user": "Benutzer",
+    "noGroupOptions": "Kein Gruppenname als Vorschlag verfügbar",
+    "groupPlaceholder": "Gruppe eingeben",
+    "noUserOptions": "Kein Benutzername als Vorschlag verfügbar",
+    "userPlaceholder": "Benutzer eingeben",
+    "loading": "suche..."
+  },
  "paginator": {
    "next": "Weiter",
    "previous": "Zurück"
--- a/scm-ui/public/locales/de/repos.json
+++ b/scm-ui/public/locales/de/repos.json
@@ -11,7 +11,10 @@
  "validation": {
    "namespace-invalid": "Der Namespace des Repository ist ungültig",
    "name-invalid": "Der Name des Repository ist ungültig",
-    "contact-invalid": "Der Kontakt muss eine gültige E-Mail Adresse sein"
+    "contact-invalid": "Der Kontakt muss eine gültige E-Mail Adresse sein",
+    "branch": {
+      "nameInvalid": "Der Name des Branches ist ungültig"
+    }
  },
  "help": {
    "namespaceHelpText": "Der Namespace des Repository. Dieser wird Teil der URL des Repository sein.",
@@ -150,13 +153,6 @@
      "roleHelpText": "READ = read; WRITE = read und write; OWNER = read, write und auch die Möglichkeit Einstellungen und Berechtigungen zu verwalten. Wenn hier nichts angezeigt wird, den Erweitert-Button benutzen, um Details zu sehen.",
      "permissionsHelpText": "Hier können individuelle Berechtigungen unabhängig von vordefinierten Rollen vergeben werden."
    },
-    "autocomplete": {
-      "no-group-options": "Kein Gruppenname als Vorschlag verfügbar",
-      "group-placeholder": "Gruppe eingeben",
-      "no-user-options": "Kein Benutzername als Vorschlag verfügbar",
-      "user-placeholder": "Benutzer eingeben",
-      "loading": "suche..."
-    },
    "advanced": {
      "dialog": {
        "title": "Erweiterte Berechtigungen",
--- a/scm-ui/public/locales/en/commons.json
+++ b/scm-ui/public/locales/en/commons.json
@@ -19,11 +19,11 @@
      "subtitle": "Unknown error occurred"
    }
  },
-  "error-notification": {
+  "errorNotification": {
    "prefix": "Error",
    "loginLink": "You can login here again.",
    "timeout": "The session has expired",
-    "wrong-login-credentials": "Invalid credentials",
+    "wrongLoginCredentials": "Invalid credentials",
    "forbidden": "You don't have permission to view this entity"
  },
  "loading": {
@@ -40,6 +40,15 @@
    "admin": "Administration"
  },
  "filterEntries": "filter entries",
+  "autocomplete": {
+    "group": "Group",
+    "user": "User",
+    "noGroupOptions": "No group suggestion available",
+    "groupPlaceholder": "Enter group",
+    "noUserOptions": "No user suggestion available",
+    "userPlaceholder": "Enter user",
+    "loading": "Loading..."
+  },
  "paginator": {
    "next": "Next",
    "previous": "Previous"
--- a/scm-ui/public/locales/en/repos.json
+++ b/scm-ui/public/locales/en/repos.json
@@ -153,13 +153,6 @@
      "roleHelpText": "READ = read; WRITE = read and write; OWNER = read, write and also the ability to manage the properties and permissions. If nothing is selected here, use the 'Advanced' Button to see detailed permissions.",
      "permissionsHelpText": "Use this to specify your own set of permissions regardless of predefined roles."
    },
-    "autocomplete": {
-      "no-group-options": "No group suggestion available",
-      "group-placeholder": "Enter group",
-      "no-user-options": "No user suggestion available",
-      "user-placeholder": "Enter user",
-      "loading": "Loading..."
-    },
    "advanced": {
      "dialog": {
        "title": "Advanced Permissions",
--- a/scm-ui/src/containers/Login.js
+++ b/scm-ui/src/containers/Login.js
@@ -95,7 +95,7 @@ class Login extends React.Component<Props, State> {
  areCredentialsInvalid() {
    const { t, error } = this.props;
    if (error instanceof UnauthorizedError) {
-      return new Error(t("error-notification.wrong-login-credentials"));
+      return new Error(t("errorNotification.wrongLoginCredentials"));
    } else {
      return error;
    }
--- a/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
+++ b/scm-ui/src/repos/permissions/containers/CreatePermissionForm.js
@@ -9,11 +9,12 @@ import type {
 } from "@scm-manager/ui-types";
 import {
  Subtitle,
-  Autocomplete,
  SubmitButton,
  Button,
  LabelWithHelpIcon,
-  Radio
+  Radio,
+  GroupAutocomplete,
+  UserAutocomplete
 } from "@scm-manager/ui-components";
 import * as validator from "../components/permissionValidation";
 import RoleSelector from "../components/RoleSelector";
@@ -26,8 +27,8 @@ type Props = {
  createPermission: (permission: PermissionCreateEntry) => void,
  loading: boolean,
  currentPermissions: PermissionCollection,
-  groupAutoCompleteLink: string,
-  userAutoCompleteLink: string,
+  groupAutocompleteLink: string,
+  userAutocompleteLink: string,

  // Context props
  t: string => string
@@ -68,65 +69,27 @@ class CreatePermissionForm extends React.Component<Props, State> {
    });
  };

-  loadUserAutocompletion = (inputValue: string) => {
-    return this.loadAutocompletion(this.props.userAutoCompleteLink, inputValue);
-  };
-
-  loadGroupAutocompletion = (inputValue: string) => {
-    return this.loadAutocompletion(
-      this.props.groupAutoCompleteLink,
-      inputValue
-    );
-  };
-
-  loadAutocompletion(url: string, inputValue: string) {
-    const link = url + "?q=";
-    return fetch(link + inputValue)
-      .then(response => response.json())
-      .then(json => {
-        return json.map(element => {
-          const label = element.displayName
-            ? `${element.displayName} (${element.id})`
-            : element.id;
-          return {
-            value: element,
-            label
-          };
-        });
-      });
-  }
-
  renderAutocompletionField = () => {
-    const { t } = this.props;
-    if (this.state.groupPermission) {
+    const group = this.state.groupPermission;
+    if (group) {
      return (
-        <Autocomplete
-          loadSuggestions={this.loadGroupAutocompletion}
-          valueSelected={this.groupOrUserSelected}
+        <GroupAutocomplete
+          autocompleteLink={this.props.groupAutocompleteLink}
+          valueSelected={this.selectName}
          value={this.state.value ? this.state.value : ""}
-          label={t("permission.group")}
-          noOptionsMessage={t("permission.autocomplete.no-group-options")}
-          loadingMessage={t("permission.autocomplete.loading")}
-          placeholder={t("permission.autocomplete.group-placeholder")}
-          creatable={true}
        />
      );
    }
    return (
-      <Autocomplete
-        loadSuggestions={this.loadUserAutocompletion}
-        valueSelected={this.groupOrUserSelected}
+      <UserAutocomplete
+        autocompleteLink={this.props.userAutocompleteLink}
+        valueSelected={this.selectName}
        value={this.state.value ? this.state.value : ""}
-        label={t("permission.user")}
-        noOptionsMessage={t("permission.autocomplete.no-user-options")}
-        loadingMessage={t("permission.autocomplete.loading")}
-        placeholder={t("permission.autocomplete.user-placeholder")}
-        creatable={true}
      />
    );
  };

-  groupOrUserSelected = (value: SelectValue) => {
+  selectName = (value: SelectValue) => {
    this.setState({
      value,
      name: value.value.id,
@@ -150,15 +113,17 @@ class CreatePermissionForm extends React.Component<Props, State> {
      <AdvancedPermissionsDialog
        availableVerbs={availableVerbs}
        selectedVerbs={selectedVerbs}
-        onClose={this.closeAdvancedPermissionsDialog}
+        onClose={this.toggleAdvancedPermissionsDialog}
        onSubmit={this.submitAdvancedPermissionsDialog}
      />
    ) : null;

    return (
-      <div>
+      <>
        <hr />
-        <Subtitle subtitle={t("permission.add-permission.add-permission-heading")} />
+        <Subtitle
+          subtitle={t("permission.add-permission.add-permission-heading")}
+        />
        {advancedDialog}
        <form onSubmit={this.submit}>
          <div className="field is-grouped">
@@ -201,7 +166,7 @@ class CreatePermissionForm extends React.Component<Props, State> {
                  />
                  <Button
                    label={t("permission.advanced-button.label")}
-                    action={this.handleDetailedPermissionsPressed}
+                    action={this.toggleAdvancedPermissionsDialog}
                  />
                </div>
              </div>
@@ -217,16 +182,14 @@ class CreatePermissionForm extends React.Component<Props, State> {
            </div>
          </div>
        </form>
-      </div>
+      </>
    );
  }

-  handleDetailedPermissionsPressed = () => {
-    this.setState({ showAdvancedDialog: true });
-  };
-
-  closeAdvancedPermissionsDialog = () => {
-    this.setState({ showAdvancedDialog: false });
+  toggleAdvancedPermissionsDialog = () => {
+    this.setState(prevState => ({
+      showAdvancedDialog: !prevState.showAdvancedDialog
+    }));
  };

  submitAdvancedPermissionsDialog = (newVerbs: string[]) => {
--- a/scm-ui/src/repos/permissions/containers/Permissions.js
+++ b/scm-ui/src/repos/permissions/containers/Permissions.js
@@ -60,8 +60,8 @@ type Props = {
  repositoryRolesLink: string,
  repositoryVerbsLink: string,
  permissionsLink: string,
-  groupAutoCompleteLink: string,
-  userAutoCompleteLink: string,
+  groupAutocompleteLink: string,
+  userAutocompleteLink: string,

  //dispatch functions
  fetchAvailablePermissionsIfNeeded: (
@@ -129,8 +129,8 @@ class Permissions extends React.Component<Props> {
      repoName,
      loadingCreatePermission,
      hasPermissionToCreate,
-      userAutoCompleteLink,
-      groupAutoCompleteLink
+      userAutocompleteLink,
+      groupAutocompleteLink
    } = this.props;
    if (error) {
      return (
@@ -153,8 +153,8 @@ class Permissions extends React.Component<Props> {
        createPermission={permission => this.createPermission(permission)}
        loading={loadingCreatePermission}
        currentPermissions={permissions}
-        userAutoCompleteLink={userAutoCompleteLink}
-        groupAutoCompleteLink={groupAutoCompleteLink}
+        userAutocompleteLink={userAutocompleteLink}
+        groupAutocompleteLink={groupAutocompleteLink}
      />
    ) : null;

@@ -228,8 +228,8 @@ const mapStateToProps = (state, ownProps) => {
  const repositoryRolesLink = getRepositoryRolesLink(state);
  const repositoryVerbsLink = getRepositoryVerbsLink(state);
  const permissionsLink = getPermissionsLink(state, namespace, repoName);
-  const groupAutoCompleteLink = getGroupAutoCompleteLink(state);
-  const userAutoCompleteLink = getUserAutoCompleteLink(state);
+  const groupAutocompleteLink = getGroupAutoCompleteLink(state);
+  const userAutocompleteLink = getUserAutoCompleteLink(state);
  const availablePermissions = getAvailablePermissions(state);
  const availableRepositoryRoles = getAvailableRepositoryRoles(state);
  const availableVerbs = getAvailableRepositoryVerbs(state);
@@ -248,8 +248,8 @@ const mapStateToProps = (state, ownProps) => {
    hasPermissionToCreate,
    loadingCreatePermission,
    permissionsLink,
-    groupAutoCompleteLink,
-    userAutoCompleteLink
+    groupAutocompleteLink,
+    userAutocompleteLink
  };
 };