@scm-manager/ui-components 2.27.4 → 2.27.5-20211120-082922

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.27.4",
+  "version": "2.27.5-20211120-082922",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.27.4",
+    "@scm-manager/ui-tests": "^2.27.5-20211120-082922",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -37,7 +37,6 @@
     "@types/fetch-mock": "^7.3.1",
     "@types/jest": "^24.0.19",
     "@types/lowlight": "^0.0.0",
-    "@types/query-string": "5",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",
     "@types/react-router-dom": "^5.1.0",
@@ -61,22 +60,21 @@
     "sass-loader": "^12.3.0",
     "storybook-addon-i18next": "^1.3.0",
     "storybook-addon-themes": "^6.1.0",
-    "tabbable": "^5.2.1",
     "to-camel-case": "^1.0.0",
     "webpack": "^5.61.0",
     "worker-plugin": "^3.2.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "^2.27.4",
-    "@scm-manager/ui-extensions": "^2.27.4",
-    "@scm-manager/ui-types": "^2.27.4",
+    "@scm-manager/ui-api": "^2.27.5-20211120-082922",
+    "@scm-manager/ui-extensions": "^2.27.5-20211120-082922",
+    "@scm-manager/ui-types": "^2.27.5-20211120-082922",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "lowlight": "^1.13.0",
     "prism-themes": "^1.4.0",
-    "query-string": "5",
+    "query-string": "6.14.1",
     "react": "^17.0.1",
     "react-diff-view": "^2.4.1",
     "react-dom": "^17.0.1",
@@ -93,6 +91,7 @@
     "remark-gfm": "^1.0.0",
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.0.0",
+    "tabbable": "^5.2.1",
     "unified": "^9.2.1"
   },
   "babel": {

package/src/Autocomplete.tsx

@@ -47,7 +47,7 @@ class Autocomplete extends React.Component<Props, State> {
   static defaultProps = {
     placeholder: "Type here",
     loadingMessage: "Loading...",
-    noOptionsMessage: "No suggestion available",
+    noOptionsMessage: "No suggestion available"
   };
 
   handleInputChange = (newValue: ValueType<SelectValue>, action: ActionMeta) => {
@@ -64,7 +64,7 @@ class Autocomplete extends React.Component<Props, State> {
     selectValue: ValueType<SelectValue>,
     selectOptions: readonly SelectValue[]
   ): boolean => {
-    const isNotDuplicated = !selectOptions.map((option) => option.label).includes(inputValue);
+    const isNotDuplicated = !selectOptions.map(option => option.label).includes(inputValue);
     const isNotEmpty = inputValue !== "";
     return isNotEmpty && isNotDuplicated;
   };
@@ -79,7 +79,7 @@ class Autocomplete extends React.Component<Props, State> {
       noOptionsMessage,
       loadSuggestions,
       creatable,
-      className,
+      className
     } = this.props;
 
     return (
@@ -88,6 +88,7 @@ class Autocomplete extends React.Component<Props, State> {
         <div className="control">
           {creatable ? (
             <AsyncCreatable
+              className="autocomplete-entry"
               cacheOptions
               loadOptions={loadSuggestions}
               onChange={this.handleInputChange}
@@ -96,13 +97,13 @@ class Autocomplete extends React.Component<Props, State> {
               loadingMessage={() => loadingMessage}
               noOptionsMessage={() => noOptionsMessage}
               isValidNewOption={this.isValidNewOption}
-              onCreateOption={(value) => {
+              onCreateOption={value => {
                 this.selectValue({
                   label: value,
                   value: {
                     id: value,
-                    displayName: value,
-                  },
+                    displayName: value
+                  }
                 });
               }}
               aria-label={helpText || label}

package/src/BranchSelector.tsx

@@ -61,8 +61,8 @@ const BranchSelector: FC<Props> = ({ branches, onSelectBranch, selectedBranch, l
             <MinWidthControl className="control">
               <Select
                 className="is-fullwidth"
-                options={branches.map((b) => ({ label: b.name, value: b.name }))}
-                onChange={(branch) => onSelectBranch(branches.filter((b) => b.name === branch)[0])}
+                options={branches.map(b => ({ label: b.name, value: b.name }))}
+                onChange={branch => onSelectBranch(branches.filter(b => b.name === branch)[0])}
                 disabled={!!disabled}
                 value={selectedBranch}
                 addValueToOptions={true}

package/src/Breadcrumb.tsx

@@ -110,6 +110,7 @@ const ActionBar = styled.div`
   }
 `;
 
+// TODO ersetzen?
 const PrefixButton = styled.div`
   border-right: 1px solid lightgray;
 `;

package/src/CardColumnGroup.tsx

@@ -41,13 +41,13 @@ class CardColumnGroup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      collapsed: false,
+      collapsed: false
     };
   }
 
   toggleCollapse = () => {
-    this.setState((prevState) => ({
-      collapsed: !prevState.collapsed,
+    this.setState(prevState => ({
+      collapsed: !prevState.collapsed
     }));
   };
 
@@ -84,18 +84,18 @@ class CardColumnGroup extends React.Component<Props, State> {
 
     return (
       <div className="mb-4">
-        <h2>
+        <h3>
           <span className={classNames("is-size-4", "is-clickable")} onClick={this.toggleCollapse}>
             {icon}
           </span>{" "}
           {url ? (
-            <Link to={url} className="has-text-dark">
+            <Link to={url} className="has-text-secondary-more">
               {name}
             </Link>
           ) : (
             name
           )}
-        </h2>
+        </h3>
         <hr />
         <div className={classNames("columns", "card-columns", "is-multiline", "mx-3", "my-0")}>{content}</div>
         <div className="is-clearfix" />

package/src/DangerZone.tsx

@@ -40,6 +40,7 @@ export const DangerZone = styled.div`
     }
   }
 
+  // TODO ersetzen?
   > *:not(:last-child) {
     padding-bottom: 1.5rem;
     border-bottom: solid 2px whitesmoke;

package/src/DateFromNow.tsx

@@ -36,8 +36,9 @@ const DateFromNow: FC<Props> = ({ className, ...dateProps }) => {
     return null;
   }
 
+  const dateTime = formatter.formatFull();
   return (
-    <DateElement className={className} title={formatter.formatFull()}>
+    <DateElement className={className} dateTime={dateTime} title={dateTime}>
       {formatter.formatDistance()}
     </DateElement>
   );

package/src/DateShort.tsx

@@ -36,8 +36,9 @@ const DateShort: FC<Props> = ({ className, ...dateProps }) => {
     return null;
   }
 
+  const dateTime = formatter.formatFull();
   return (
-    <DateElement className={className} title={formatter.formatFull()}>
+    <DateElement className={className} dateTime={dateTime} title={dateTime}>
       {formatter.formatShort()}
     </DateElement>
   );

package/src/ErrorBoundary.tsx

@@ -113,7 +113,7 @@ const ErrorDisplay: FC<ErrorDisplayProps> = ({ error, errorInfo, fallback: Fallb
 
   const fallbackProps = {
     error,
-    errorInfo,
+    errorInfo
   };
 
   return <FallbackComponent {...fallbackProps} />;
@@ -135,7 +135,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     this.setState({
       error,
-      errorInfo,
+      errorInfo
     });
   }
 

package/src/Icon.tsx

@@ -40,20 +40,20 @@ type Props = {
 
 const Icon: FC<Props> = ({
   iconStyle = "fas",
-  color = "grey-light",
+  color = "secondary",
   title,
   name,
   className,
   onClick,
   testId,
-  tabIndex = -1,
+  tabIndex,
   onEnter,
-  alt = title,
+  alt = title
 }) => {
   return (
     <i
       onClick={onClick}
-      onKeyPress={(event) => event.key === "Enter" && onEnter && onEnter(event)}
+      onKeyPress={event => event.key === "Enter" && onEnter && onEnter(event)}
       title={title}
       className={classNames(iconStyle, "fa-fw", "fa-" + name, `has-text-${color}`, className)}
       tabIndex={tabIndex}

package/src/Logo.stories.tsx

@@ -26,6 +26,7 @@ import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
 import Logo from "./Logo";
 
+// TODO Ersetzen?
 const Wrapper = styled.div`
   padding: 2em;
   background-color: black;

package/src/OverviewPageActions.tsx

@@ -52,7 +52,7 @@ const OverviewPageActions: FC<Props> = ({
   groupSelected,
   label,
   testId,
-  searchPlaceholder,
+  searchPlaceholder
 }) => {
   const history = useHistory();
   const location = useLocation();
@@ -63,7 +63,7 @@ const OverviewPageActions: FC<Props> = ({
     <div className="column is-flex">
       <Select
         className="is-fullwidth"
-        options={groups.map((g) => ({ value: g, label: g }))}
+        options={groups.map(g => ({ value: g, label: g }))}
         value={currentGroup}
         onChange={groupSelected}
       />

package/src/SmallLoadingSpinner.stories.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 { storiesOf } from "@storybook/react";
+import React from "react";
+import SmallLoadingSpinner from "./SmallLoadingSpinner";
+
+storiesOf("SmallLoading", module).add("Default", () => (
+  <div>
+    <SmallLoadingSpinner />
+  </div>
+));

package/src/SmallLoadingSpinner.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 React, { FC } from "react";
+
+const SmallLoadingSpinner: FC = () => {
+  return (
+    <div className="loader-wrapper">
+      <div className="loader is-loading" />
+    </div>
+  );
+};
+
+export default SmallLoadingSpinner;

package/src/SplitAndReplace.tsx

@@ -33,9 +33,10 @@ export type Replacement = {
 type Props = {
   text: string;
   replacements: Replacement[];
+  textWrapper?: (s: string) => ReactNode;
 };
 
-const textWrapper = (s: string) => {
+const defaultTextWrapper = (s: string) => {
   const first = s.startsWith(" ") ? <>&nbsp;</> : "";
   const last = s.endsWith(" ") ? <>&nbsp;</> : "";
   return (
@@ -47,7 +48,7 @@ const textWrapper = (s: string) => {
   );
 };
 
-const SplitAndReplace: FC<Props> = ({ text, replacements }) => {
+const SplitAndReplace: FC<Props> = ({ text, replacements, textWrapper = defaultTextWrapper }) => {
   const parts = textSplitAndReplace<ReactNode>(text, replacements, textWrapper);
   if (parts.length === 0) {
     return <>{parts[0]}</>;

package/src/SyntaxHighlighter.stories.tsx

@@ -48,7 +48,7 @@ storiesOf("SyntaxHighlighter", module)
   ))
   .add("Go", () => (
     <Spacing>
-      <SyntaxHighlighter language="golang" value={GoHttpServer} />
+      <SyntaxHighlighter language="go" value={GoHttpServer} />
     </Spacing>
   ))
   .add("Javascript", () => (

package/src/Tooltip.tsx

@@ -36,7 +36,7 @@ export type TooltipLocation = "bottom" | "right" | "top" | "left";
 
 class Tooltip extends React.Component<Props> {
   static defaultProps = {
-    location: "right",
+    location: "right"
   };
 
   render() {

package/src/__resources__/ContentSearchHit.ts

@@ -0,0 +1,73 @@
+/*
+ * 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 { Hit } from "@scm-manager/ui-types";
+
+export const javaHit: Hit = {
+  score: 2.5,
+  fields: {
+    content: {
+      highlighted: true,
+      fragments: [
+        "import org.slf4j.LoggerFactory;\n\nimport java.util.Date;\nimport java.util.HashMap;\nimport java.util.Map;\nimport java.util.concurrent.TimeUnit;\n\n/**\n * Jwt implementation of {@link <|[[--AccessTokenBuilder--]]|>}.\n * \n * @author Sebastian Sdorra\n * @since 2.0.0\n */\npublic final class <|[[--JwtAccessTokenBuilder--]]|> implements <|[[--AccessTokenBuilder--]]|> {\n\n  /**\n   * the logger for <|[[--JwtAccessTokenBuilder--]]|>\n   */\n  private static final Logger LOG = LoggerFactory.getLogger(<|[[--JwtAccessTokenBuilder.class--]]|>);\n  \n  private final KeyGenerator keyGenerator; \n  private final SecureKeyResolver keyResolver; \n  \n  private String subject;\n  private String issuer;\n",
+        "  private final Map<String,Object> custom = Maps.newHashMap();\n  \n  <|[[--JwtAccessTokenBuilder--]]|>(KeyGenerator keyGenerator, SecureKeyResolver keyResolver)  {\n    this.keyGenerator = keyGenerator;\n    this.keyResolver = keyResolver;\n  }\n\n  @Override\n  public <|[[--JwtAccessTokenBuilder--]]|> subject(String subject) {\n",
+        '  public <|[[--JwtAccessTokenBuilder--]]|> custom(String key, Object value) {\n    Preconditions.checkArgument(!Strings.isNullOrEmpty(key), "null or empty value not allowed");\n    Preconditions.checkArgument(value != null, "null or empty value not allowed");\n'
+      ],
+      matchesContentStart: false,
+      matchesContentEnd: false
+    }
+  },
+  _links: {}
+};
+
+export const bashHit: Hit = {
+  score: 2.5,
+  fields: {
+    content: {
+      highlighted: true,
+      fragments: [
+        '# LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n# SOFTWARE.\n#\n\n<|[[--getent--]]|> group scm >/dev/null || groupadd -r scm\n<|[[--getent--]]|> passwd scm >/dev/null || \\\n    useradd -r -g scm -M \\\n    -s /sbin/nologin -d /var/lib/scm \\\n    -c "user for the scm-server process" scm\nexit 0\n\n'
+      ],
+      matchesContentStart: false,
+      matchesContentEnd: true
+    }
+  },
+  _links: {}
+};
+
+export const markdownHit: Hit = {
+  score: 2.5,
+  fields: {
+    content: {
+      highlighted: true,
+      fragments: [
+        "---\ntitle: SCM-Manager v2 Test <|[[--Cases--]]|>\n---\n\nDescribes the expected behaviour for SCMM v2 REST Resources using manual tests.\n\nThe following states general test <|[[--cases--]]|> per HTTP Method and en expected return code as well as exemplary curl calls.\nResource-specifics are stated \n\n## Test <|[[--Cases--]]|>\n\n### GET\n\n- Collection Resource (e.g. `/users`)\n    - Without parameters -> 200\n    - Parameters\n        - `?pageSize=1` -> Only one embedded element, pageTotal reflects the correct number of pages, `last` link points to last page.\n        - `?pageSize=1&page=1` -> `next` link points to page 0 ; `prev` link points to page 2\n        - `?sortBy=admin` -> Sorted by `admin` field of embedded objects\n        - `?sortBy=admin&desc=true` -> Invert sorting\n- Individual Resource (e.g. `/users/scmadmin`)\n    - Exists  -> 200\n",
+        "\n### DELETE\n\n- existing -> 204\n- not existing -> 204\n- without permission -> 401\n\n## Exemplary calls & Resource specific test <|[[--cases--]]|>\n\nIn order to extend those tests to other Resources, have a look at the rest docs. Note that the Content Type is specific to each resource as well.\n"
+      ],
+      matchesContentStart: true,
+      matchesContentEnd: false
+    }
+  },
+  _links: {}
+};