Add additional help to quick search and an advanced search documentation page (#1757)

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>

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

@@ -21,16 +21,13 @@
  * 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 Icon from "./Icon";
 
 type Props = {
   className?: string;
 };
 
-export default class HelpIcon extends React.Component<Props> {
-  render() {
-    const { className } = this.props;
-    return <Icon name="question-circle" color="blue-light" className={className} />;
-  }
-}
+const HelpIcon: FC<Props> = ({ className }) => <Icon name="question-circle" color="blue-light" className={className} />;
+
+export default HelpIcon;

scm-ui/ui-components/src/buttons/LinkStyleButton.tsx

@@ -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 styled from "styled-components";
+import NoStyleButton from "./NoStyleButton";
+
+const LinkStyleButton = styled(NoStyleButton)`
+  text-decoration: underline;
+`;
+
+export default LinkStyleButton;

scm-ui/ui-components/src/buttons/NoStyleButton.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 styled from "styled-components";
+
+const NoStyleButton = styled.button`
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  text-align: inherit;
+`;
+
+export default NoStyleButton;

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

@@ -35,3 +35,5 @@ export { default as ButtonGroup } from "./ButtonGroup";
 export { default as ButtonAddons } from "./ButtonAddons";
 export { default as OpenInFullscreenButton } from "./OpenInFullscreenButton";
 export { default as RemoveEntryOfTableButton } from "./RemoveEntryOfTableButton";
+export { default as NoStyleButton } from "./NoStyleButton";
+export { default as LinkStyleButton } from "./LinkStyleButton";

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

@@ -29,15 +29,15 @@ import { urls } from "@scm-manager/ui-api";
 
 // not sure if it is required
 import {
+  AnnotationFactory,
+  AnnotationFactoryContext,
+  BaseContext,
+  Change,
+  DiffEventContext,
+  DiffEventHandler,
   File,
   FileChangeType,
   Hunk,
-  Change,
-  BaseContext,
-  AnnotationFactory,
-  AnnotationFactoryContext,
-  DiffEventHandler,
-  DiffEventContext
 } from "./repos";
 
 export { validation, repositories };
@@ -81,6 +81,7 @@ export { default as SplitAndReplace, Replacement } from "./SplitAndReplace";
 export { regExpPattern as changesetShortLinkRegex } from "./markdown/remarkChangesetShortLinkParser";
 export * from "./markdown/PluginApi";
 export * from "./devices";
+export { default as copyToClipboard } from "./CopyToClipboard";
 
 export { default as comparators } from "./comparators";
 
@@ -108,7 +109,7 @@ export {
   AnnotationFactory,
   AnnotationFactoryContext,
   DiffEventHandler,
-  DiffEventContext
+  DiffEventContext,
 };
 
 // Re-export from ui-api
@@ -125,7 +126,7 @@ export {
   MissingLinkError,
   createBackendError,
   isBackendError,
-  TOKEN_EXPIRED_ERROR_CODE
+  TOKEN_EXPIRED_ERROR_CODE,
 } from "@scm-manager/ui-api";
 
 export { urls };

scm-ui/ui-components/src/layout/Page.tsx

@@ -37,7 +37,7 @@ type Props = {
   // and use something different than a string for the title property.
   documentTitle?: string;
   afterTitle?: ReactNode;
-  subtitle?: string;
+  subtitle?: ReactNode;
   loading?: boolean;
   error?: Error | null;
   showContentOnError?: boolean;
@@ -123,7 +123,7 @@ export default class Page extends React.Component<Props> {
                 <Title title={this.getTextualTitle()}>{this.getTitleComponent()}</Title>
                 {afterTitle && <MarginLeft>{afterTitle}</MarginLeft>}
               </FlexContainer>
-              <Subtitle subtitle={subtitle} />
+              {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
             </div>
             {pageActions}
           </div>