Fix repository file search (#1867)

gradle/changelog/fix_file_search.yaml

@@ -0,0 +1,2 @@
+- type: fixed
+  description: Repository file search ([#1867](https://github.com/scm-manager/scm-manager/pull/1867))

scm-ui/e2e-tests/cypress/integration/repository_code_filesearch.feature

@@ -0,0 +1,35 @@
+#
+# 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.
+#
+
+Feature: Repository File Search
+
+  Background:
+    Given User is authenticated
+    And A git repository exists
+
+  Scenario: Search file inside repository
+    Given User has permission to read and write repository
+    When User visits repository
+    And User performs file search inside repository
+    Then The search results are found

scm-ui/e2e-tests/cypress/support/step_definitions/scm-manager.js

@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+When("User visits repository", function() {
+  cy.visit(`/repo/${this.repository.namespace}/${this.repository.name}/code/sources`);
+});
+
+When("User performs file search inside repository", function() {
+  cy.byTestId("file_search_button").click();
+  cy.url().should("include", `/repo/${this.repository.namespace}/${this.repository.name}/code/search/main?q=`);
+  cy.get("[data-testid=file_search_filter_input]").type("README");
+});
+
+Then("The search results are found", function() {
+  cy.get("[data-testid=file_search_single_result]").contains("README.md");
+});

scm-ui/ui-components/src/forms/FilterInput.tsx

@@ -67,20 +67,17 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus,
   };
 
   return (
-    <form
+    <form className={classNames("input-field", className)} onSubmit={handleSubmit}>
-      className={classNames("input-field", className)}
-      onSubmit={handleSubmit}
-      {...createAttributesForTesting(testId)}
-    >
       <div className="control has-icons-left">
         <FixedHeightInput
           className="input"
           type="search"
           placeholder={placeholder || t("filterEntries")}
           value={stateValue}
-          onChange={(event) => setStateValue(event.target.value)}
+          onChange={event => setStateValue(event.target.value)}
           autoFocus={autoFocus || false}
           aria-describedby={id}
+          {...createAttributesForTesting(testId)}
         />
         <span className="icon is-small is-left">
           <i className="fas fa-filter" />

scm-ui/ui-webapp/src/repos/codeSection/components/FileSearchButton.tsx

@@ -39,7 +39,11 @@ const SearchIcon = styled(Icon)`
 const FileSearchButton: FC<Props> = ({ baseUrl, revision }) => {
   const [t] = useTranslation("repos");
   return (
-    <Link to={`${baseUrl}/search/${encodeURIComponent(revision)}`} aria-label={t("fileSearch.button.title")}>
+    <Link
+      to={`${baseUrl}/search/${encodeURIComponent(revision)}`}
+      aria-label={t("fileSearch.button.title")}
+      data-testid="file_search_button"
+    >
       <SearchIcon title={t("fileSearch.button.title")} name="search" color="inherit" />
     </Link>
   );

scm-ui/ui-webapp/src/repos/codeSection/components/FileSearchResults.tsx

@@ -62,7 +62,7 @@ const PathResultRow: FC<PathResultRowProps> = ({ contentBaseUrl, path }) => {
         </Link>
       </IconColumn>
       <LeftOverflowTd>
-        <Link title={path} to={link}>
+        <Link title={path} to={link} data-testid="file_search_single_result">
           {path}
         </Link>
       </LeftOverflowTd>
@@ -78,7 +78,7 @@ type ResultTableProps = {
 const ResultTable: FC<ResultTableProps> = ({ contentBaseUrl, paths }) => (
   <table className="table table-hover table-sm is-fullwidth">
     <tbody>
-      {paths.map((path) => (
+      {paths.map(path => (
         <PathResultRow contentBaseUrl={contentBaseUrl} path={path} />
       ))}
     </tbody>

scm-ui/ui-webapp/src/repos/codeSection/containers/FileSearch.tsx

@@ -28,7 +28,7 @@ import classNames from "classnames";
 import styled from "styled-components";
 import { Branch, Repository } from "@scm-manager/ui-types";
 import { urls, usePaths } from "@scm-manager/ui-api";
-import { ErrorNotification, FilterInput, Help, Icon, Loading } from "@scm-manager/ui-components";
+import { createA11yId, ErrorNotification, FilterInput, Help, Icon, Loading } from "@scm-manager/ui-components";
 import CodeActionBar from "../components/CodeActionBar";
 import FileSearchResults from "../components/FileSearchResults";
 import { filepathSearch } from "../utils/filepathSearch";
@@ -91,7 +91,7 @@ const FileSearch: FC<Props> = ({ repository, baseUrl, branches, selectedBranch }
   };
 
   const contentBaseUrl = `${baseUrl}/sources/${revision}/`;
-  const id = useA11yId("file-search");
+  const id = createA11yId("file-search");
 
   return (
     <>
@@ -123,6 +123,7 @@ const FileSearch: FC<Props> = ({ repository, baseUrl, branches, selectedBranch }
             filter={search}
             autoFocus={true}
             id={id}
+            testId="file_search_filter_input"
           />
           <Help className="ml-3" message={t("fileSearch.input.help")} id={id} />
         </div>