@scm-manager/ui-components 2.25.1-20211003-143409 → 2.26.0

package/src/buttons/Button.tsx

@@ -21,9 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { MouseEvent, ReactNode } from "react";
+import React, { FC, MouseEvent, ReactNode } from "react";
 import classNames from "classnames";
-import { RouteComponentProps, withRouter } from "react-router-dom";
+import { Link } from "react-router-dom";
 import Icon from "../Icon";
 import { createAttributesForTesting } from "../devBuild";
 
@@ -42,90 +42,79 @@ export type ButtonProps = {
   testId?: string;
 };
 
-type Props = ButtonProps &
-  RouteComponentProps & {
-    type?: "button" | "submit" | "reset";
-    color?: string;
-  };
-
-class Button extends React.Component<Props> {
-  static defaultProps: Partial<Props> = {
-    type: "button",
-    color: "default",
-  };
+type Props = ButtonProps & {
+  type?: "button" | "submit" | "reset";
+  color?: string;
+};
 
-  onClick = (event: React.MouseEvent) => {
-    const { action, link, history } = this.props;
-    if (action) {
-      action(event);
-    } else if (link) {
-      history.push(link);
-    }
+const Button: FC<Props> = ({
+  link,
+  className,
+  icon,
+  fullWidth,
+  reducedMobile,
+  testId,
+  children,
+  label,
+  type = "button",
+  title,
+  loading,
+  disabled,
+  action,
+  color = "default",
+}) => {
+  const renderIcon = () => {
+    return <>{icon ? <Icon name={icon} color="inherit" className="is-medium pr-1" /> : null}</>;
   };
 
-  render() {
-    const {
-      label,
-      title,
-      loading,
-      disabled,
-      type,
-      color,
-      className,
-      icon,
-      fullWidth,
-      reducedMobile,
-      children,
-      testId,
-    } = this.props;
-    if (icon) {
-      return (
-        <button
-          type={type}
-          title={title}
-          disabled={disabled}
-          onClick={this.onClick}
-          className={classNames(
-            "button",
-            "is-" + color,
-            { "is-loading": loading },
-            { "is-fullwidth": fullWidth },
-            { "is-reduced-mobile": reducedMobile },
-            className
-          )}
-          {...createAttributesForTesting(testId)}
-        >
-          <span className="icon is-medium">
-            <Icon name={icon} color="inherit" />
-          </span>
-          {(label || children) && (
-            <span>
-              {label} {children}
-            </span>
-          )}
-        </button>
-      );
-    }
-
+  if (link) {
     return (
-      <button
-        type={type}
-        title={title}
-        disabled={disabled}
-        onClick={this.onClick}
+      <Link
         className={classNames(
           "button",
           "is-" + color,
           { "is-loading": loading },
           { "is-fullwidth": fullWidth },
+          { "is-reduced-mobile": reducedMobile },
           className
         )}
-        {...createAttributesForTesting(testId)}
+        to={link}
+        aria-label={label}
       >
-        {label} {children}
-      </button>
+        {renderIcon()}{" "}
+        {(label || children) && (
+          <>
+            {label} {children}
+          </>
+        )}
+      </Link>
     );
   }
-}
 
-export default withRouter(Button);
+  return (
+    <button
+      type={type}
+      title={title}
+      disabled={disabled}
+      onClick={(event) => action && action(event)}
+      className={classNames(
+        "button",
+        "is-" + color,
+        { "is-loading": loading },
+        { "is-fullwidth": fullWidth },
+        { "is-reduced-mobile": reducedMobile },
+        className
+      )}
+      {...createAttributesForTesting(testId)}
+    >
+      {renderIcon()}{" "}
+      {(label || children) && (
+        <>
+          {label} {children}
+        </>
+      )}
+    </button>
+  );
+};
+
+export default Button;

package/src/buttons/ButtonAddons.tsx

@@ -41,7 +41,7 @@ class ButtonAddons extends React.Component<Props> {
     const { className, children } = this.props;
 
     const childWrapper: ReactNode[] = [];
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child) {
         childWrapper.push(
           <p className="control" key={childWrapper.length}>

package/src/buttons/ButtonGroup.tsx

@@ -34,7 +34,7 @@ class ButtonGroup extends React.Component<Props> {
     const { className, children } = this.props;
 
     const childWrapper: ReactNode[] = [];
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child) {
         childWrapper.push(
           <div className="control" key={childWrapper.length}>

package/src/buttons/SubmitButton.tsx

@@ -31,7 +31,7 @@ type SubmitButtonProps = ButtonProps & {
 
 class SubmitButton extends React.Component<SubmitButtonProps> {
   static defaultProps = {
-    scrollToTop: true
+    scrollToTop: true,
   };
 
   render() {

package/src/buttons/index.stories.tsx

@@ -21,7 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { ReactNode } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import Button from "./Button";
 import { storiesOf } from "@storybook/react";
 import styled from "styled-components";
@@ -31,7 +31,6 @@ import DeleteButton from "./DeleteButton";
 import DownloadButton from "./DownloadButton";
 import EditButton from "./EditButton";
 import SubmitButton from "./SubmitButton";
-import { ReactElement } from "react";
 import { MemoryRouter } from "react-router-dom";
 
 const colors = ["primary", "link", "info", "success", "warning", "danger", "white", "light", "dark", "black", "text"];
@@ -43,11 +42,11 @@ const Spacing = styled.div`
 const SpacingDecorator = (story: () => ReactNode) => <Spacing>{story()}</Spacing>;
 const RoutingDecorator = (story: () => ReactNode) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>;
 
-storiesOf("Buttons|Button", module)
+storiesOf("Buttons/Button", module)
   .addDecorator(RoutingDecorator)
   .add("Colors", () => (
     <div>
-      {colors.map(color => (
+      {colors.map((color) => (
         <Spacing key={color}>
           <Button color={color} label={color} />
         </Spacing>
@@ -63,7 +62,7 @@ storiesOf("Buttons|Button", module)
   ))
   .add("Disabled", () => (
     <div>
-      {colors.map(color => (
+      {colors.map((color) => (
         <Spacing key={color}>
           <Button color={color} label={color} disabled={true} />
         </Spacing>
@@ -72,7 +71,7 @@ storiesOf("Buttons|Button", module)
   ));
 
 const buttonStory = (name: string, storyFn: () => ReactElement) => {
-  return storiesOf("Buttons|" + name, module)
+  return storiesOf("Buttons/" + name, module)
     .addDecorator(RoutingDecorator)
     .addDecorator(SpacingDecorator)
     .add("Default", storyFn);

package/src/comparators.test.ts

@@ -26,12 +26,12 @@ import { byKey, byValueLength, byNestedKeys } from "./comparators";
 
 const createObject = (key: string, value?: string) => {
   return {
-    [key]: value
+    [key]: value,
   };
 };
 
 const createObjects = (key: string, values: Array<string | undefined>) => {
-  return values.map(v => createObject(key, v));
+  return values.map((v) => createObject(key, v));
 };
 
 describe("key comparator tests", () => {
@@ -98,18 +98,18 @@ describe("nested key comparator tests", () => {
   const createObject = (key: string, nested?: string, value?: string) => {
     if (!nested) {
       return {
-        [key]: undefined
+        [key]: undefined,
       };
     }
     return {
       [key]: {
-        [nested]: value
-      }
+        [nested]: value,
+      },
     };
   };
 
   const createObjects = (key: string, nested: string, values: Array<string | undefined>) => {
-    return values.map(v => createObject(key, nested, v));
+    return values.map((v) => createObject(key, nested, v));
   };
 
   it("should sort array", () => {

package/src/comparators.ts

@@ -95,5 +95,5 @@ export const byNestedKeys = (key: string, nestedKey: string) => {
 export default {
   byKey,
   byValueLength,
-  byNestedKeys
+  byNestedKeys,
 };

package/src/devBuild.ts

@@ -31,7 +31,7 @@ export const createAttributesForTesting = (testId?: string) => {
     return undefined;
   }
   return {
-    "data-testid": normalizeTestId(testId)
+    "data-testid": normalizeTestId(testId),
   };
 };
 

package/src/forms/AddKeyValueEntryToTableField.stories.tsx

@@ -26,7 +26,7 @@ import { MemoryRouter } from "react-router-dom";
 import { storiesOf } from "@storybook/react";
 import AddKeyValueEntryToTableField from "./AddKeyValueEntryToTableField";
 
-storiesOf("Forms|AddKeyValueEntryToTableField", module)
+storiesOf("Forms/AddKeyValueEntryToTableField", module)
   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => (
     <div className="m-6">

package/src/forms/AutocompleteAddEntryToTableField.tsx

@@ -53,7 +53,7 @@ const AutocompleteAddEntryToTableField: FC<Props> = ({
   loadSuggestions,
   placeholder,
   loadingMessage,
-  noOptionsMessage
+  noOptionsMessage,
 }) => {
   const [selectedValue, setSelectedValue] = useState<SelectValue | undefined>(undefined);
 

package/src/forms/Checkbox.stories.tsx

@@ -64,8 +64,8 @@ const ReactHookForm: FC = () => {
   const { register, handleSubmit } = useForm<Settings>({
     defaultValues: {
       disabled: true,
-      readonly: true
-    }
+      readonly: true,
+    },
   });
   const [stored, setStored] = useState<Settings>();
 
@@ -105,8 +105,8 @@ const LegacyEvents: FC = () => {
   );
 };
 
-storiesOf("Forms|Checkbox", module)
-  .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
+storiesOf("Forms/Checkbox", module)
+  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Default", () => (
     <Spacing>
       <Checkbox label="Not checked" checked={false} />

package/src/forms/DropDown.stories.tsx

@@ -25,7 +25,7 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import DropDown from "./DropDown";
 
-storiesOf("Forms|DropDown", module)
+storiesOf("Forms/DropDown", module)
   .add("Default", () => (
     <DropDown
       options={["en", "de", "es"]}
@@ -41,10 +41,10 @@ storiesOf("Forms|DropDown", module)
       options={[
         "The Hitchhiker's Guide to the Galaxy",
         "Dirk Gently’s Holistic Detective Agency",
-        "The Meaning Of Liff"
+        "The Meaning Of Liff",
       ]}
       preselectedOption={"dirk"}
-      optionSelected={selection => {
+      optionSelected={(selection) => {
         // nothing to do
       }}
     />
@@ -54,7 +54,7 @@ storiesOf("Forms|DropDown", module)
       optionValues={["alpha", "beta", "gamma"]}
       options={["A", "B", "C"]}
       preselectedOption={"D"}
-      optionSelected={selection => {
+      optionSelected={(selection) => {
         // nothing to do
       }}
     />

package/src/forms/DropDown.tsx

@@ -45,7 +45,7 @@ class DropDown extends React.Component<Props> {
   render() {
     const { options, optionValues, preselectedOption, className, disabled } = this.props;
 
-    if (preselectedOption && options.filter(o => o === preselectedOption).length === 0) {
+    if (preselectedOption && options.filter((o) => o === preselectedOption).length === 0) {
       options.push(preselectedOption);
     }
 

package/src/forms/FileInput.stories.tsx

@@ -63,7 +63,7 @@ const ReactHookForm: FC = () => {
   );
 };
 
-storiesOf("Forms|FileInput", module)
+storiesOf("Forms/FileInput", module)
   .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Default", () => <ReactHookForm />);

package/src/forms/FilterInput.tsx

@@ -77,7 +77,7 @@ const FilterInput: FC<Props> = ({ filter, value, testId, placeholder, autoFocus,
           type="search"
           placeholder={placeholder || t("filterEntries")}
           value={stateValue}
-          onChange={event => setStateValue(event.target.value)}
+          onChange={(event) => setStateValue(event.target.value)}
           autoFocus={autoFocus || false}
         />
         <span className="icon is-small is-left">

package/src/forms/InputField.stories.tsx

@@ -127,7 +127,7 @@ const LegacyEvents: FC = () => {
   );
 };
 
-storiesOf("Forms|InputField", module)
+storiesOf("Forms/InputField", module)
   .addDecorator((storyFn) => <Decorator>{storyFn()}</Decorator>)
   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("AutoFocus", () => <InputField label="Field with AutoFocus" autofocus={true} />)

package/src/forms/MemberNameTagGroup.tsx

@@ -36,11 +36,11 @@ type Props = WithTranslation & {
 class MemberNameTagGroup extends React.Component<Props> {
   render() {
     const { members, label, helpText, t } = this.props;
-    const membersExtended = members.map(id => {
+    const membersExtended = members.map((id) => {
       return {
         id,
         displayName: id,
-        mail: ""
+        mail: "",
       };
     });
     return (
@@ -54,7 +54,7 @@ class MemberNameTagGroup extends React.Component<Props> {
   }
 
   removeEntry = (membersExtended: DisplayedUser[]) => {
-    const members = membersExtended.map(function(item) {
+    const members = membersExtended.map(function (item) {
       return item["id"];
     });
     this.props.memberListChanged(members);

package/src/forms/PasswordConfirmation.tsx

@@ -44,7 +44,7 @@ class PasswordConfirmation extends React.Component<Props, State> {
       password: "",
       confirmedPassword: "",
       passwordValid: true,
-      passwordConfirmationFailed: false
+      passwordConfirmationFailed: false,
     };
   }
 
@@ -53,7 +53,7 @@ class PasswordConfirmation extends React.Component<Props, State> {
       password: "",
       confirmedPassword: "",
       passwordValid: true,
-      passwordConfirmationFailed: false
+      passwordConfirmationFailed: false,
     });
   }
 
@@ -101,7 +101,7 @@ class PasswordConfirmation extends React.Component<Props, State> {
     this.setState(
       {
         confirmedPassword,
-        passwordConfirmationFailed: !passwordConfirmed
+        passwordConfirmationFailed: !passwordConfirmed,
       },
       this.propagateChange
     );
@@ -114,7 +114,7 @@ class PasswordConfirmation extends React.Component<Props, State> {
       {
         passwordValid: this.validatePassword(password),
         passwordConfirmationFailed,
-        password: password
+        password: password,
       },
       this.propagateChange
     );

package/src/forms/Radio.stories.tsx

@@ -112,8 +112,8 @@ const LegacyEvents: FC = () => {
   );
 };
 
-storiesOf("Forms|Radio", module)
-  .addDecorator(storyFn => <MemoryRouter>{storyFn()}</MemoryRouter>)
+storiesOf("Forms/Radio", module)
+  .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Default", () => (
     <Spacing>
       <Radio label="Not checked" checked={false} />

package/src/forms/Select.stories.tsx

@@ -187,8 +187,8 @@ const PreselectOption: FC = () => {
           },
           {
             label: "USCSS Prometheus",
-            value: "uscss-prometheus"
-          }
+            value: "uscss-prometheus",
+          },
         ]}
         onChange={setValue}
         value={value}
@@ -198,11 +198,10 @@ const PreselectOption: FC = () => {
   );
 };
 
-storiesOf("Forms|Select", module)
+storiesOf("Forms/Select", module)
   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("Add no existing value", () => <AddNoExistingValue />)
   .add("Ref", () => <Ref />)
   .add("Legacy Events", () => <LegacyEvents />)
   .add("ReactHookForm", () => <ReactHookForm />)
-  .add("Preselect option", () => <PreselectOption />)
-;
+  .add("Preselect option", () => <PreselectOption />);

package/src/forms/Textarea.stories.tsx

@@ -170,7 +170,7 @@ const LegacyEvents: FC = () => {
   );
 };
 
-storiesOf("Forms|Textarea", module)
+storiesOf("Forms/Textarea", module)
   .addDecorator((storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>)
   .add("OnChange", () => <OnChangeTextarea />)
   .add("OnSubmit", () => <OnSubmitTextare />)

package/src/languages.ts

@@ -24,7 +24,7 @@
 
 // this aliases are only to map from spotter detection to prismjs
 const languageAliases: { [key: string]: string } = {
-  golang: "go"
+  golang: "go",
 };
 
 export const defaultLanguage = "text";

package/src/layout/Footer.stories.tsx

@@ -40,7 +40,7 @@ const trillian: Me = {
   displayName: "Trillian McMillian",
   mail: "tricia@hitchhiker.com",
   groups: ["crew"],
-  _links: {}
+  _links: {},
 };
 
 const bindAvatar = (binder: Binder, avatar: string) => {
@@ -64,8 +64,8 @@ const withBinder = (binder: Binder) => {
   );
 };
 
-storiesOf("Layout|Footer", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+storiesOf("Footer", module)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => {
     return <Footer me={trillian} version="2.0.0" links={{}} />;
   })

package/src/layout/SecondaryNavigationColumn.tsx

@@ -29,7 +29,7 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   /* In Bulma there is unfortunately no intermediate step between .is-1 and .is-2, hence the size. 
   Navigation size should be as constant as possible. */
   flex: none;
-  width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
+  width: ${(props) => (props.collapsed ? "5.5rem" : "20.5rem")};
   max-width: ${(props: { collapsed: boolean }) => (props.collapsed ? "11.3%" : "25%")};
   /* Render this column to full size if column construct breaks (page size too small). */
   @media (max-width: 785px) {

package/src/layout/Title.tsx

@@ -31,7 +31,7 @@ type Props = {
   className?: string;
 };
 
-const Title: FC<Props> = ({ title, preventRefreshingPageTitle, customPageTitle, className , children}) => {
+const Title: FC<Props> = ({ title, preventRefreshingPageTitle, customPageTitle, className, children }) => {
   useEffect(() => {
     if (!preventRefreshingPageTitle) {
       if (customPageTitle) {
@@ -51,7 +51,7 @@ const Title: FC<Props> = ({ title, preventRefreshingPageTitle, customPageTitle,
 };
 
 Title.defaultProps = {
-  preventRefreshingPageTitle: false
+  preventRefreshingPageTitle: false,
 };
 
 export default Title;

package/src/markdown/MarkdownCodeRenderer.tsx

@@ -32,7 +32,7 @@ type Props = {
   value: string;
 };
 
-const MarkdownCodeRenderer: FC<Props> = props => {
+const MarkdownCodeRenderer: FC<Props> = (props) => {
   const binder = useBinder();
   const indexLinks = useIndexLinks();
   const { language } = props;

package/src/markdown/MarkdownHeadingRenderer.tsx

@@ -94,7 +94,7 @@ const MarkdownHeadingRenderer: FC<Props> = ({ children, level, permalink, id })
       <Icon name="link" onClick={copyPermalink} alt={t("sources.content.copyPermalink")} />
     </Tooltip>
   );
-  const headingElement = React.createElement("h" + level, {id: anchorId}, [...reactChildren, CopyButton]);
+  const headingElement = React.createElement("h" + level, { id: anchorId }, [...reactChildren, CopyButton]);
   const href = urls.withContextPath(location.pathname + "#" + anchorId);
   const permalinkHref =
     window.location.protocol +
@@ -110,7 +110,7 @@ const MarkdownHeadingRenderer: FC<Props> = ({ children, level, permalink, id })
 };
 
 export const create = (permalink: string): FC<Props> => {
-  return props => <MarkdownHeadingRenderer {...props} permalink={permalink} />;
+  return (props) => <MarkdownHeadingRenderer {...props} permalink={permalink} />;
 };
 
 export default MarkdownHeadingRenderer;

package/src/markdown/MarkdownLinkRenderer.test.tsx

@@ -26,7 +26,7 @@ import {
   isExternalLink,
   isLinkWithProtocol,
   createLocalLink,
-  isInternalScmRepoLink
+  isInternalScmRepoLink,
 } from "./MarkdownLinkRenderer";
 
 describe("test isAnchorLink", () => {

package/src/markdown/MarkdownLinkRenderer.tsx

@@ -136,7 +136,7 @@ const MarkdownLinkRenderer: FC<Props> = ({ href = "", base, children, ...props }
 // we use a factory method, because react-markdown does not pass
 // base as prop down to our link component.
 export const create = (base?: string, protocolExtensions: ProtocolLinkRendererExtensionMap = {}): FC<LinkProps> => {
-  return props => {
+  return (props) => {
     const protocolLinkContext = isLinkWithProtocol(props.href || "");
     if (protocolLinkContext) {
       const { link, protocol } = protocolLinkContext;

package/src/markdown/MarkdownView.stories.tsx

@@ -46,8 +46,8 @@ const Spacing = styled.div`
 `;
 
 storiesOf("MarkdownView", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator(story => <Spacing>{story()}</Spacing>)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+  .addDecorator((story) => <Spacing>{story()}</Spacing>)
   .add("Default", () => <MarkdownView content={TestPage} skipHtml={false} />)
   .add("Skip Html", () => <MarkdownView content={TestPage} skipHtml={true} />)
   .add("Code without Lang", () => <MarkdownView content={MarkdownWithoutLang} skipHtml={false} />)
@@ -63,7 +63,7 @@ storiesOf("MarkdownView", module)
     const binder = new Binder("custom protocol link renderer");
     binder.bind("markdown-renderer.link.protocol", {
       protocol: "scw",
-      renderer: ProtocolLinkRenderer
+      renderer: ProtocolLinkRenderer,
     } as ProtocolLinkRendererExtension);
     return (
       <BinderContext.Provider value={binder}>
@@ -75,7 +75,7 @@ storiesOf("MarkdownView", module)
     const binder = new Binder("custom protocol link renderer");
     binder.bind("markdown-renderer.link.protocol", {
       protocol: "scw",
-      renderer: ProtocolLinkRenderer
+      renderer: ProtocolLinkRenderer,
     } as ProtocolLinkRendererExtension);
     return (
       <BinderContext.Provider value={binder}>