Improve search syntax page (#1770)

Remove non-searchable fields from syntax site, do no translate field names, use field name for title if no translation is available, refactor syntax page to respect error states

scm-ui/ui-webapp/src/search/Syntax.tsx

@@ -27,6 +27,7 @@ import { useTranslation } from "react-i18next";
 import {
   Button,
   copyToClipboard,
+  ErrorNotification,
   Icon,
   InputField,
   Loading,
@@ -37,6 +38,7 @@ import {
 import { parse } from "date-fns";
 import styled from "styled-components";
 import classNames from "classnames";
+import { SearchableType } from "@scm-manager/ui-types";
 
 const StyledTooltip = styled(Tooltip)`
   height: 40px;
@@ -68,13 +70,99 @@ type Example = {
   explanation: string;
 };
 
-const Syntax: FC = () => {
-  const { t, i18n } = useTranslation(["commons", "plugins"]);
-  const { loading: isLoading, data: helpModalContent } = useSearchSyntaxContent(i18n.languages[0]);
+type ExampleProps = {
+  searchableType: SearchableType;
+};
+
+const Examples: FC<ExampleProps> = ({ searchableType }) => {
+  const [t] = useTranslation(["commons", "plugins"]);
+  const examples = t<Example[]>(`plugins:search.types.${searchableType.name}.examples`, {
+    returnObjects: true,
+    defaultValue: [],
+  });
+
+  if (examples.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <h5 className="title mt-5">{t("search.syntax.exampleQueries.title")}</h5>
+      <div className="mb-2">{t("search.syntax.exampleQueries.description")}</div>
+      <table>
+        <tr>
+          <th>{t("search.syntax.exampleQueries.table.description")}</th>
+          <th>{t("search.syntax.exampleQueries.table.query")}</th>
+          <th>{t("search.syntax.exampleQueries.table.explanation")}</th>
+        </tr>
+        {examples.map((example, index) => (
+          <tr key={index}>
+            <td>{example.description}</td>
+            <td>{example.query}</td>
+            <td>{example.explanation}</td>
+          </tr>
+        ))}
+      </table>
+    </>
+  );
+};
+
+const SearchableTypes: FC = () => {
+  const [t] = useTranslation(["commons", "plugins"]);
+  const { isLoading, error, data } = useSearchableTypes();
+
+  if (error) {
+    return <ErrorNotification error={error} />;
+  }
+
+  if (isLoading || !data) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      {data.map((searchableType) => (
+        <Expandable
+          key={searchableType.name}
+          className="mb-1"
+          header={t(`plugins:search.types.${searchableType.name}.title`, searchableType.name)}
+        >
+          <table>
+            <tr>
+              <th>{t("search.syntax.fields.name")}</th>
+              <th>{t("search.syntax.fields.type")}</th>
+              <th>{t("search.syntax.fields.exampleValue")}</th>
+              <th>{t("search.syntax.fields.hints")}</th>
+            </tr>
+            {searchableType.fields.map((searchableField) => (
+              <tr>
+                <th>{searchableField.name}</th>
+                <td>{searchableField.type}</td>
+                <td>
+                  {t(`plugins:search.types.${searchableType.name}.fields.${searchableField.name}.exampleValue`, {
+                    defaultValue: "",
+                  })}
+                </td>
+                <td>
+                  {t(`plugins:search.types.${searchableType.name}.fields.${searchableField.name}.hints`, {
+                    defaultValue: "",
+                  })}
+                </td>
+              </tr>
+            ))}
+          </table>
+          <Examples searchableType={searchableType} />
+        </Expandable>
+      ))}
+    </>
+  );
+};
+
+const TimestampConverter: FC = () => {
+  const [t] = useTranslation("commons");
   const [datetime, setDatetime] = useState("");
   const [timestamp, setTimestamp] = useState("");
   const [copying, setCopying] = useState(false);
-  const { isLoading: isLoadingSearchableTypes, data: searchableTypes } = useSearchableTypes();
 
   const convert = () => {
     const format = "yyyy-MM-dd HH:mm:ss";
@@ -87,106 +175,59 @@ const Syntax: FC = () => {
     copyToClipboard(timestamp).finally(() => setCopying(false));
   };
 
-  if (isLoading || isLoadingSearchableTypes) {
-    return <Loading />;
-  }
-
-  const searchableTypesContent = searchableTypes!.map((searchableType) => {
-    const examples = t<Example[]>(`plugins:search.types.${searchableType.name}.examples`, {
-      returnObjects: true,
-      defaultValue: [],
-    });
-    return (
-      <Expandable className="mb-1" header={t(`plugins:search.types.${searchableType.name}.title`)}>
-        <table>
-          <tr>
-            <th>{t("search.syntax.fields.name")}</th>
-            <th>{t("search.syntax.fields.type")}</th>
-            <th>{t("search.syntax.fields.exampleValue")}</th>
-            <th>{t("search.syntax.fields.hints")}</th>
-          </tr>
-          {searchableType.fields.map((searchableField) => (
-            <tr>
-              <th>{t(`plugins:search.types.${searchableType.name}.fields.${searchableField.name}.name`)}</th>
-              <td>{searchableField.type}</td>
-              <td>
-                {t(`plugins:search.types.${searchableType.name}.fields.${searchableField.name}.exampleValue`, {
-                  defaultValue: "",
-                })}
-              </td>
-              <td>
-                {t(`plugins:search.types.${searchableType.name}.fields.${searchableField.name}.hints`, {
-                  defaultValue: "",
-                })}
-              </td>
-            </tr>
-          ))}
-        </table>
-        {examples.length > 0 ? (
-          <>
-            <h5 className="title mt-5">{t("search.syntax.exampleQueries.title")}</h5>
-            <div className="mb-2">{t("search.syntax.exampleQueries.description")}</div>
-            <table>
-              <tr>
-                <th>{t("search.syntax.exampleQueries.table.description")}</th>
-                <th>{t("search.syntax.exampleQueries.table.query")}</th>
-                <th>{t("search.syntax.exampleQueries.table.explanation")}</th>
-              </tr>
-              {examples.map((example) => (
-                <tr>
-                  <td>{example.description}</td>
-                  <td>{example.query}</td>
-                  <td>{example.explanation}</td>
-                </tr>
-              ))}
-            </table>
-          </>
-        ) : null}
-      </Expandable>
-    );
-  });
-
   return (
-    <Page title={t("search.syntax.title")} subtitle={t("search.syntax.subtitle")} loading={isLoading}>
-      <div className="content">
-        <h4 className="title">{t("search.syntax.exampleQueriesAndFields.title")}</h4>
-        <p>{t("search.syntax.exampleQueriesAndFields.description")}</p>
-        {searchableTypesContent}
-      </div>
-      <MarkdownView content={helpModalContent!} basePath="/" />
-      <h3 className="title">{t("search.syntax.utilities.title")}</h3>
-      <p>{t("search.syntax.utilities.description")}</p>
-      <h6 className="title is-6 mt-4">{t("search.syntax.utilities.datetime.label")}</h6>
-      <div className="is-flex">
-        <span className="is-flex mr-5">
-          <InputField
-            value={datetime}
-            onChange={setDatetime}
-            placeholder={t("search.syntax.utilities.datetime.format")}
-          />
-          <Button color="primary" action={convert} className="ml-2">
-            {t("search.syntax.utilities.datetime.convertButtonLabel")}
-          </Button>
-        </span>
-        <span className="is-flex">
-          <InputField
-            className="mr-4"
-            value={timestamp}
-            readOnly={true}
-            placeholder={t("search.syntax.utilities.timestampPlaceholder")}
-          />
-          <StyledTooltip
-            message={t("search.syntax.utilities.copyTimestampTooltip")}
-            className="is-flex is-align-items-center"
-          >
-            {copying ? (
-              <span className="small-loading-spinner" />
-            ) : (
-              <Icon name="clipboard" color="inherit" className="is-size-4 fa-fw is-clickable" onClick={copyTimestamp} />
-            )}
-          </StyledTooltip>
-        </span>
-      </div>
+    <div className="is-flex">
+      <span className="is-flex mr-5">
+        <InputField
+          value={datetime}
+          onChange={setDatetime}
+          placeholder={t("search.syntax.utilities.datetime.format")}
+        />
+        <Button color="primary" action={convert} className="ml-2">
+          {t("search.syntax.utilities.datetime.convertButtonLabel")}
+        </Button>
+      </span>
+      <span className="is-flex">
+        <InputField
+          className="mr-4"
+          value={timestamp}
+          readOnly={true}
+          placeholder={t("search.syntax.utilities.timestampPlaceholder")}
+        />
+        <StyledTooltip
+          message={t("search.syntax.utilities.copyTimestampTooltip")}
+          className="is-flex is-align-items-center"
+        >
+          {copying ? (
+            <span className="small-loading-spinner" />
+          ) : (
+            <Icon name="clipboard" color="inherit" className="is-size-4 fa-fw is-clickable" onClick={copyTimestamp} />
+          )}
+        </StyledTooltip>
+      </span>
+    </div>
+  );
+};
+
+const Syntax: FC = () => {
+  const { t, i18n } = useTranslation("commons");
+  const { isLoading, data, error } = useSearchSyntaxContent(i18n.languages[0]);
+  return (
+    <Page title={t("search.syntax.title")} subtitle={t("search.syntax.subtitle")} loading={isLoading} error={error}>
+      {data ? (
+        <>
+          <div className="content">
+            <h4 className="title">{t("search.syntax.exampleQueriesAndFields.title")}</h4>
+            <p>{t("search.syntax.exampleQueriesAndFields.description")}</p>
+            <SearchableTypes />
+          </div>
+          <MarkdownView content={data} basePath="/" />
+          <h3 className="title">{t("search.syntax.utilities.title")}</h3>
+          <p>{t("search.syntax.utilities.description")}</p>
+          <h6 className="title is-6 mt-4">{t("search.syntax.utilities.datetime.label")}</h6>
+          <TimestampConverter />
+        </>
+      ) : null}
     </Page>
   );
 };

scm-webapp/src/main/java/sonia/scm/search/AnalyzerFactory.java

@@ -66,7 +66,7 @@ public class AnalyzerFactory {
     Analyzer defaultAnalyzer = create(options);
 
     Map<String, Analyzer> analyzerMap = new HashMap<>();
-    for (LuceneSearchableField field : type.getFields()) {
+    for (LuceneSearchableField field : type.getAllFields()) {
       addFieldAnalyzer(analyzerMap, field);
     }
 

scm-webapp/src/main/java/sonia/scm/search/LuceneSearchableField.java

@@ -42,6 +42,7 @@ class LuceneSearchableField implements SearchableField {
   private final boolean highlighted;
   private final PointsConfig pointsConfig;
   private final Indexed.Analyzer analyzer;
+  private final boolean searchable;
 
   LuceneSearchableField(Field field, Indexed indexed) {
     this.name = name(field, indexed);
@@ -52,6 +53,7 @@ class LuceneSearchableField implements SearchableField {
     this.highlighted = indexed.highlighted();
     this.pointsConfig = IndexableFields.pointConfig(field);
     this.analyzer = indexed.analyzer();
+    this.searchable = indexed.type().isSearchable();
   }
 
   Object value(Document document) {

scm-webapp/src/main/java/sonia/scm/search/LuceneSearchableType.java

@@ -34,6 +34,7 @@ import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 import java.util.Optional;
+import java.util.stream.Collectors;
 
 @Value
 public class LuceneSearchableType implements SearchableType {
@@ -48,7 +49,7 @@ public class LuceneSearchableType implements SearchableType {
   Map<String, Float> boosts;
   Map<String, PointsConfig> pointsConfig;
   TypeConverter typeConverter;
-  
+
   public LuceneSearchableType(Class<?> type, IndexedType annotation, List<LuceneSearchableField> fields) {
     this.type = type;
     this.name = name(type, annotation);
@@ -101,7 +102,16 @@ public class LuceneSearchableType implements SearchableType {
     return Collections.unmodifiableMap(map);
   }
 
+  @Override
   public Collection<LuceneSearchableField> getFields() {
+    return Collections.unmodifiableCollection(
+      fields.stream()
+        .filter(LuceneSearchableField::isSearchable)
+        .collect(Collectors.toList())
+    );
+  }
+
+  public Collection<LuceneSearchableField> getAllFields() {
     return Collections.unmodifiableCollection(fields);
   }
 }

scm-webapp/src/main/java/sonia/scm/search/QueryResultFactory.java

@@ -77,7 +77,7 @@ public class QueryResultFactory {
   private Hit createHit(ScoreDoc scoreDoc) throws IOException, InvalidTokenOffsetsException {
     Document document = searcher.doc(scoreDoc.doc);
     Map<String, Hit.Field> fields = new HashMap<>();
-    for (LuceneSearchableField field : searchableType.getFields()) {
+    for (LuceneSearchableField field : searchableType.getAllFields()) {
       field(document, field).ifPresent(f -> fields.put(field.getName(), f));
     }
     return new Hit(document.get(FieldNames.ID), document.get(FieldNames.REPOSITORY), scoreDoc.score, fields);

scm-webapp/src/main/resources/locales/de/plugins.json

@@ -442,28 +442,22 @@
         "title": "Repositories",
         "fields": {
           "name": {
-            "name": "Name",
             "exampleValue": "scm-manager"
           },
           "namespace": {
-            "name": "Namespace",
             "exampleValue": "cloudogu"
           },
           "type": {
-            "name": "Typ",
             "exampleValue": "git, hg oder svn"
           },
           "description": {
-            "name": "Beschreibung",
             "exampleValue": "Dieses Repository enthält den Quellcode des SCM-Managers."
           },
           "creationDate": {
-            "name": "Erstellungsdatum",
             "exampleValue": "1628077286",
             "hints": "Zeitstempel der Erstellung in ms seit dem 01.01.1970. Bereichssuche möglich."
           },
           "lastModified": {
-            "name": "Zuletzt geändert",
             "exampleValue": "1623057235",
             "hints": "Zeitstempel der letzten Änderung in ms seit dem 01.01.1970. Bereichssuche möglich."
           }
@@ -487,25 +481,20 @@
         "title": "Benutzer",
         "fields": {
           "name": {
-            "name": "Name",
             "exampleValue": "admin"
           },
           "displayName": {
-            "name": "Anzeigename",
             "exampleValue": "Administrator"
           },
           "creationDate": {
-            "name": "Erstellungsdatum",
             "exampleValue": "1628077286",
             "hints": "Zeitstempel der Erstellung in ms seit dem 01.01.1970. Bereichssuche möglich."
           },
           "lastModified": {
-            "name": "Zuletzt geändert",
             "exampleValue": "1623057235",
             "hints": "Zeitstempel der letzten Änderung in ms seit dem 01.01.1970. Bereichssuche möglich."
           },
           "mail": {
-            "name": "Mail",
             "exampleValue": "admin@hitchhiker.com"
           }
         }
@@ -516,20 +505,16 @@
         "title": "Gruppen",
         "fields": {
           "name": {
-            "name": "Name",
             "exampleValue": "Entwickler"
           },
           "description": {
-            "name": "Beschreibung",
             "exampleValue": "Diese Gruppe enthält alle Softwareentwickler."
           },
           "creationDate": {
-            "name": "Erstellungsdatum",
             "exampleValue": "1628077286",
             "hints": "Zeitstempel der Erstellung in ms seit dem 01.01.1970. Bereichssuche möglich."
           },
           "lastModified": {
-            "name": "Zuletzt geändert",
             "exampleValue": "1623057235",
             "hints": "Zeitstempel der letzten Änderung in ms seit dem 01.01.1970. Bereichssuche möglich."
           }

scm-webapp/src/main/resources/locales/en/plugins.json

@@ -386,28 +386,22 @@
         "title": "Repositories",
         "fields": {
           "name": {
-            "name": "Name",
             "exampleValue": "scm-manager"
           },
           "namespace": {
-            "name": "Namespace",
             "exampleValue": "cloudogu"
           },
           "type": {
-            "name": "Type",
             "exampleValue": "git, hg or svn"
           },
           "description": {
-            "name": "Description",
             "exampleValue": "This repository contains the source code for the SCM-Manager."
           },
           "creationDate": {
-            "name": "Creation Date",
             "exampleValue": "1628077286",
             "hints": "Timestamp of creation in ms since 01-01-1970. Range search possible."
           },
           "lastModified": {
-            "name": "Last Modified",
             "exampleValue": "1623057235",
             "hints": "Timestamp of last modification in ms since 01-01-1970. Range search possible."
           }
@@ -431,25 +425,20 @@
         "title": "Users",
         "fields": {
           "name": {
-            "name": "Name",
             "exampleValue": "admin"
           },
           "displayName": {
-            "name": "Display Name",
             "exampleValue": "Administrator"
           },
           "creationDate": {
-            "name": "Creation Date",
             "exampleValue": "1628077286",
             "hints": "Timestamp of creation in ms since 01-01-1970. Range search possible."
           },
           "lastModified": {
-            "name": "Last Modified",
             "exampleValue": "1623057235",
             "hints": "Timestamp of last modification in ms since 01-01-1970. Range search possible."
           },
           "mail": {
-            "name": "Mail",
             "exampleValue": "admin@hitchhiker.com"
           }
         }
@@ -460,20 +449,16 @@
         "title": "Groups",
         "fields": {
           "name": {
-            "name": "Name",
             "exampleValue": "Developers"
           },
           "description": {
-            "name": "Description",
             "exampleValue": "This group contains all software developers."
           },
           "creationDate": {
-            "name": "Creation Date",
             "exampleValue": "1628077286",
             "hints": "Timestamp of creation in ms since 01-01-1970. Range search possible."
           },
           "lastModified": {
-            "name": "Last Modified",
             "exampleValue": "1623057235",
             "hints": "Timestamp of last modification in ms since 01-01-1970. Range search possible."
           }

scm-webapp/src/test/java/sonia/scm/search/SearchableTypesTest.java

@@ -0,0 +1,64 @@
+/*
+ * 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.
+ */
+
+package sonia.scm.search;
+
+
+import lombok.Value;
+import org.junit.jupiter.api.Test;
+
+import java.util.List;
+import java.util.stream.Collectors;
+
+import static org.assertj.core.api.Assertions.assertThat;
+
+class SearchableTypesTest {
+
+  @Test
+  void shouldNotReturnStoredOnlyFields() {
+    LuceneSearchableType luceneSearchableType = SearchableTypes.create(IndexedObject.class);
+    List<String> fields = luceneSearchableType.getFields()
+      .stream()
+      .map(LuceneSearchableField::getName)
+      .collect(Collectors.toList());
+
+    assertThat(fields).containsOnly("searchable", "tokenized");
+  }
+
+  @Value
+  @IndexedType
+  public static class IndexedObject {
+
+    @Indexed(type = Indexed.Type.STORED_ONLY)
+    String storedOnly;
+
+    @Indexed
+    String searchable;
+
+    @Indexed
+    String tokenized;
+
+  }
+
+}