@scm-manager/ui-components 2.27.3 → 2.27.5-20211121-150210

package/src/buttons/Button.tsx

@@ -61,32 +61,43 @@ const Button: FC<Props> = ({
   loading,
   disabled,
   action,
-  color = "default",
+  color = "default"
 }) => {
   const renderIcon = () => {
     return <>{icon ? <Icon name={icon} color="inherit" className="is-medium pr-1" /> : null}</>;
   };
 
+  const classes = classNames(
+    "button",
+    "is-" + color,
+    { "is-loading": loading },
+    { "is-fullwidth": fullWidth },
+    { "is-reduced-mobile": reducedMobile },
+    className
+  );
+
+  const content = (
+    <>
+      {renderIcon()}{" "}
+      {(label || children) && (
+        <>
+          {label} {children}
+        </>
+      )}
+    </>
+  );
+
   if (link && !disabled) {
+    if (link.includes("://")) {
+      return (
+        <a className={classes} href={link} aria-label={label}>
+          {content}
+        </a>
+      );
+    }
     return (
-      <Link
-        className={classNames(
-          "button",
-          "is-" + color,
-          { "is-loading": loading },
-          { "is-fullwidth": fullWidth },
-          { "is-reduced-mobile": reducedMobile },
-          className
-        )}
-        to={link}
-        aria-label={label}
-      >
-        {renderIcon()}{" "}
-        {(label || children) && (
-          <>
-            {label} {children}
-          </>
-        )}
+      <Link className={classes} to={link} aria-label={label}>
+        {content}
       </Link>
     );
   }
@@ -96,23 +107,11 @@ const Button: FC<Props> = ({
       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
-      )}
+      onClick={event => action && action(event)}
+      className={classes}
       {...createAttributesForTesting(testId)}
     >
-      {renderIcon()}{" "}
-      {(label || children) && (
-        <>
-          {label} {children}
-        </>
-      )}
+      {content}
     </button>
   );
 };

package/src/forms/FileInput.tsx

@@ -102,7 +102,7 @@ const FileInput: FC<Props> = ({
           {file?.name ? (
             <span className="file-name">{file?.name}</span>
           ) : (
-            <span className="file-name has-text-weight-light has-text-grey-light">
+            <span className="file-name has-text-weight-light has-text-secondary">
               {filenamePlaceholder || t("fileInput.noFileChosen")}
             </span>
           )}

package/src/forms/FileUpload.tsx

@@ -60,7 +60,7 @@ const FileUpload: FC<Props> = ({ handleFile, filenamePlaceholder = "", disabled
         {file?.name ? (
           <span className="file-name">{file?.name}</span>
         ) : (
-          <span className="file-name has-text-weight-light has-text-grey-light	">{filenamePlaceholder}</span>
+          <span className="file-name has-text-weight-light has-text-secondary">{filenamePlaceholder}</span>
         )}
       </label>
     </div>

package/src/forms/FilterInput.tsx

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

package/src/forms/InputField.tsx

@@ -33,7 +33,7 @@ type BaseProps = {
   label?: string;
   name?: string;
   placeholder?: string;
-  value?: string;
+  value?: string | number;
   type?: string;
   autofocus?: boolean;
   onReturnPressed?: () => void;
@@ -44,7 +44,7 @@ type BaseProps = {
   helpText?: string;
   className?: string;
   testId?: string;
-  defaultValue?: string;
+  defaultValue?: string | number;
   readOnly?: boolean;
 };
 

package/src/forms/Select.tsx

@@ -69,7 +69,7 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
   const field = useInnerRef(props.innerRef);
 
   let opts = options;
-  if (value && addValueToOptions && !options.some((o) => o.value === value)) {
+  if (value && addValueToOptions && !options.some(o => o.value === value)) {
     opts = [{ label: value, value }, ...options];
   }
 
@@ -124,11 +124,11 @@ const InnerSelect: FC<FieldProps<BaseProps, HTMLSelectElement, string>> = ({
           onChange={handleInput}
           onBlur={handleBlur}
           disabled={disabled}
-          aria-labelledby={a11yId}
-          aria-describedby={helpId}
+          aria-labelledby={label ? a11yId : undefined}
+          aria-describedby={helpText ? helpId : undefined}
           {...createAttributesForTesting(testId)}
         >
-          {opts.map((opt) => {
+          {opts.map(opt => {
             return (
               <option value={opt.value} key={"KEY_" + opt.value}>
                 {opt.label}

package/src/forms/TriStateCheckbox.tsx

@@ -51,11 +51,11 @@ const TriStateCheckbox: FC<Props> = ({ checked, indeterminate, disabled, label,
 
   let color;
   if (disabled) {
-    color = "grey-light";
+    color = "secondary";
   } else if (checked || indeterminate) {
     color = "link";
   } else {
-    color = "black";
+    color = "secondary-most";
   }
 
   // We need a tabIndex to make the checkbox accessible from keyboard.

package/src/index.ts

@@ -37,7 +37,7 @@ import {
   DiffEventHandler,
   File,
   FileChangeType,
-  Hunk,
+  Hunk
 } from "./repos";
 
 export { validation, repositories };
@@ -51,6 +51,7 @@ export { default as ErrorPage } from "./ErrorPage";
 export { default as Icon } from "./Icon";
 export { default as Image } from "./Image";
 export { default as Loading } from "./Loading";
+export { default as SmallLoadingSpinner } from "./SmallLoadingSpinner";
 export { default as Logo } from "./Logo";
 export { default as MailLink } from "./MailLink";
 export { default as Notification } from "./Notification";
@@ -113,7 +114,7 @@ export {
   AnnotationFactory,
   AnnotationFactoryContext,
   DiffEventHandler,
-  DiffEventContext,
+  DiffEventContext
 };
 
 // Re-export from ui-api
@@ -130,7 +131,7 @@ export {
   MissingLinkError,
   createBackendError,
   isBackendError,
-  TOKEN_EXPIRED_ERROR_CODE,
+  TOKEN_EXPIRED_ERROR_CODE
 } from "@scm-manager/ui-api";
 
 export { urls };

package/src/languages.test.ts

@@ -35,7 +35,7 @@ describe("syntax highlighter", () => {
     expect(java).toBe("java");
   });
 
-  it("should return text if language is undefied", () => {
+  it("should return text if language is undefined", () => {
     const lang = determineLanguage();
     expect(lang).toBe("text");
   });
@@ -45,8 +45,4 @@ describe("syntax highlighter", () => {
     expect(lang).toBe("text");
   });
 
-  it("should use alias go for golang", () => {
-    const go = determineLanguage("golang");
-    expect(go).toBe("go");
-  });
 });

package/src/languages.ts

@@ -22,20 +22,11 @@
  * SOFTWARE.
  */
 
-// this aliases are only to map from spotter detection to prismjs
-const languageAliases: { [key: string]: string } = {
-  golang: "go",
-};
-
 export const defaultLanguage = "text";
 
 export const determineLanguage = (language?: string) => {
   if (!language) {
     return defaultLanguage;
   }
-  const lang = language.toLowerCase();
-  if (languageAliases[lang]) {
-    return languageAliases[lang];
-  }
-  return lang;
+  return language.toLowerCase();
 };

package/src/layout/Footer.tsx

@@ -97,7 +97,7 @@ const Footer: FC<Props> = ({ me, version, links }) => {
         <div className="columns is-size-7">
           {me ? (
             <FooterSection title={meSectionTile}>
-              <NavLink to="/me" label={t("footer.user.profile")} testId="footer-user-profile" />
+              <NavLink to="/me/settings/theme" label={t("footer.user.profile")} testId="footer-user-profile" />
               {me?._links?.password && (
                 <NavLink to="/me/settings/password" label={t("profile.changePasswordNavLink")} />
               )}

package/src/layout/Header.tsx

@@ -37,7 +37,7 @@ const SmallHeader: FC<{ children: ReactNode }> = ({ children }) => {
 
 const LargeHeader: FC = () => {
   return (
-    <section className="hero has-scm-background is-small">
+    <div className="hero has-scm-background is-small">
       <div className="hero-body">
         <div className="container">
           <div className="columns is-vcentered">
@@ -47,7 +47,7 @@ const LargeHeader: FC = () => {
           </div>
         </div>
       </div>
-    </section>
+    </div>
   );
 };
 

package/src/layout/SubSubtitle.tsx

@@ -0,0 +1,41 @@
+/*
+ * 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 from "react";
+import classNames from "classnames";
+
+type Props = {
+  className?: string;
+};
+
+class SubSubtitle extends React.Component<Props> {
+  render() {
+    const { className, children } = this.props;
+    if (children) {
+      return <h3 className={classNames("is-size-5", className)}>{children}</h3>;
+    }
+    return null;
+  }
+}
+
+export default SubSubtitle;

package/src/layout/index.ts

@@ -29,8 +29,9 @@ export { default as Header } from "./Header";
 export { default as Level } from "./Level";
 export { default as Page } from "./Page";
 export { default as PageActions } from "./PageActions";
-export { default as Subtitle } from "./Subtitle";
 export { default as Title } from "./Title";
+export { default as Subtitle } from "./Subtitle";
+export { default as SubSubtitle } from "./SubSubtitle";
 export { default as CustomQueryFlexWrappedColumns } from "./CustomQueryFlexWrappedColumns";
 export { default as PrimaryContentColumn } from "./PrimaryContentColumn";
 export { default as SecondaryNavigationColumn } from "./SecondaryNavigationColumn";

package/src/modals/FullscreenModal.tsx

@@ -45,7 +45,7 @@ const FullSizedModal = styled(Modal)`
 
 const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active, closeButtonLabel }) => {
   const [t] = useTranslation("repos");
-  const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="grey" />;
+  const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="secondary" />;
 
   return <FullSizedModal title={title} closeFunction={closeFunction} body={body} footer={footer} active={active} />;
 };

package/src/modals/Modal.tsx

@@ -45,7 +45,7 @@ type Props = {
 };
 
 const SizedModal = styled.div<{ size?: ModalSize }>`
-  width: ${(props) => (props.size ? `${modalSizes[props.size]}%` : "640px")};
+  width: ${props => (props.size ? `${modalSizes[props.size]}%` : "640px")};
 `;
 
 export const Modal: FC<Props> = ({
@@ -55,9 +55,9 @@ export const Modal: FC<Props> = ({
   footer,
   active,
   className,
-  headColor = "light",
-  headTextColor = "black",
-  size,
+  headColor = "secondary-less",
+  headTextColor = "secondary-most",
+  size
 }) => {
   const portalRootElement = usePortalRootElement("modalsRoot");
   const initialFocusRef = useRef(null);
@@ -65,7 +65,7 @@ export const Modal: FC<Props> = ({
     includeContainer: true,
     initialFocus: initialFocusRef.current,
     returnFocus: true,
-    updateNodes: false,
+    updateNodes: false
   });
 
   if (!portalRootElement) {
@@ -90,7 +90,7 @@ export const Modal: FC<Props> = ({
       <div className="modal-background" onClick={closeFunction} />
       <SizedModal className="modal-card" size={size}>
         <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
-          <p className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</p>
+          <h2 className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</h2>
           <button className="delete" aria-label="close" onClick={closeFunction} ref={initialFocusRef} autoFocus />
         </header>
         <section className="modal-card-body">{body}</section>

package/src/navigation/RoutingProps.ts

@@ -22,8 +22,10 @@
  * SOFTWARE.
  */
 
+import { RouteProps } from "react-router-dom";
+
 export type RoutingProps = {
   to: string;
   activeOnlyWhenExact?: boolean;
-  activeWhenMatch?: (route: any) => boolean;
+  activeWhenMatch?: (route: RouteProps) => boolean;
 };

package/src/navigation/SecondaryNavigation.stories.tsx

@@ -53,8 +53,8 @@ const withRoute = (route: string) => {
 };
 
 storiesOf("Secondary Navigation", module)
-  .addDecorator((story) => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
-  .addDecorator((story) => (
+  .addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
+  .addDecorator(story => (
     <Columns className="columns">
       <div className="column is-3">{story()}</div>
     </Columns>
@@ -92,7 +92,7 @@ storiesOf("Secondary Navigation", module)
       <SecondaryNavigation label="Hitchhiker">
         <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
         <SecondaryNavigationItem
-          activeWhenMatch={(route) => route.location.pathname === "/hog"}
+          activeWhenMatch={route => route.location?.pathname === "/hog"}
           to="/heart-of-gold"
           icon="fas fa-star"
           label="Heart Of Gold"

package/src/navigation/SecondaryNavigation.tsx

@@ -91,7 +91,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
           aria-label={menuAriaLabel}
         >
           {collapsible ? (
-            <Icon color="info" className="is-medium" collapsed={isCollapsed}>
+            <Icon className="is-medium" collapsed={isCollapsed}>
               {arrowIcon}
             </Icon>
           ) : null}

package/src/popover/Popover.tsx

@@ -43,7 +43,7 @@ type ContainerProps = {
 const PopoverContainer = styled.div<ContainerProps>`
   position: absolute;
   z-index: 100;
-  width: ${(props) => props.width}px;
+  width: ${props => props.width}px;
   display: block;
 
   &:before {
@@ -54,7 +54,7 @@ const PopoverContainer = styled.div<ContainerProps>`
     height: 0;
     width: 0;
     top: 100%;
-    left: ${(props) => props.width / 2}px;
+    left: ${props => props.width / 2}px;
     border-color: transparent;
     border-bottom-color: white;
     border-left-color: white;
@@ -71,7 +71,7 @@ const PopoverHeading = styled.div`
   height: 1.5em;
 `;
 
-const Popover: FC<Props> = (props) => {
+const Popover: FC<Props> = props => {
   if (!props.show) {
     return null;
   }
@@ -89,13 +89,13 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 
   const onMouseEnter = () => {
     dispatch({
-      type: "enter-popover",
+      type: "enter-popover"
     });
   };
 
   const onMouseLeave = () => {
     dispatch({
-      type: "leave-popover",
+      type: "leave-popover"
     });
   };
 
@@ -105,7 +105,7 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
     <PopoverContainer
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      className="box"
+      className="box popover"
       style={{ top: `${top}px`, left: `${left}px` }}
       width={width!}
       ref={ref}
@@ -118,7 +118,7 @@ const InnerPopover: FC<Props> = ({ title, show, width, offsetTop, offsetLeft, di
 };
 
 Popover.defaultProps = {
-  width: 120,
+  width: 120
 };
 
 export default Popover;

package/src/repos/DiffFile.tsx

@@ -81,7 +81,7 @@ const MarginlessModalContent = styled.div`
 class DiffFile extends React.Component<Props, State> {
   static defaultProps: Partial<Props> = {
     defaultCollapse: false,
-    markConflicts: true,
+    markConflicts: true
   };
 
   constructor(props: Props) {
@@ -90,14 +90,14 @@ class DiffFile extends React.Component<Props, State> {
       collapsed: this.defaultCollapse(),
       sideBySide: props.sideBySide,
       diffExpander: new DiffExpander(props.file),
-      file: props.file,
+      file: props.file
     };
   }
 
   componentDidUpdate(prevProps: Readonly<Props>) {
     if (!this.props.isCollapsed && this.props.defaultCollapse !== prevProps.defaultCollapse) {
       this.setState({
-        collapsed: this.defaultCollapse(),
+        collapsed: this.defaultCollapse()
       });
     }
   }
@@ -120,8 +120,8 @@ class DiffFile extends React.Component<Props, State> {
       if (onCollapseStateChange) {
         onCollapseStateChange(file);
       } else {
-        this.setState((state) => ({
-          collapsed: !state.collapsed,
+        this.setState(state => ({
+          collapsed: !state.collapsed
         }));
       }
     }
@@ -129,8 +129,8 @@ class DiffFile extends React.Component<Props, State> {
 
   toggleSideBySide = (callback: () => void) => {
     this.setState(
-      (state) => ({
-        sideBySide: !state.sideBySide,
+      state => ({
+        sideBySide: !state.sideBySide
       }),
       () => callback()
     );
@@ -142,7 +142,7 @@ class DiffFile extends React.Component<Props, State> {
       onCollapseStateChange(this.state.file, collapsed);
     } else {
       this.setState({
-        collapsed,
+        collapsed
       });
     }
   };
@@ -236,13 +236,19 @@ class DiffFile extends React.Component<Props, State> {
 
   expandHead = (expandableHunk: ExpandableHunk, count: number) => {
     return () => {
-      return expandableHunk.expandHead(count).then(this.diffExpanded).catch(this.diffExpansionFailed);
+      return expandableHunk
+        .expandHead(count)
+        .then(this.diffExpanded)
+        .catch(this.diffExpansionFailed);
     };
   };
 
   expandBottom = (expandableHunk: ExpandableHunk, count: number) => {
     return () => {
-      return expandableHunk.expandBottom(count).then(this.diffExpanded).catch(this.diffExpansionFailed);
+      return expandableHunk
+        .expandBottom(count)
+        .then(this.diffExpanded)
+        .catch(this.diffExpansionFailed);
     };
   };
 
@@ -260,7 +266,7 @@ class DiffFile extends React.Component<Props, State> {
     if (annotationFactory) {
       return annotationFactory({
         hunk,
-        file,
+        file
       });
     } else {
       return EMPTY_ANNOTATION_FACTORY;
@@ -274,7 +280,7 @@ class DiffFile extends React.Component<Props, State> {
       changeId: getChangeKey(change),
       change,
       hunk,
-      file,
+      file
     };
     if (onClick) {
       onClick(context);
@@ -287,7 +293,7 @@ class DiffFile extends React.Component<Props, State> {
       return {
         onClick: (event: ChangeEvent) => {
           this.handleClickEvent(event.change, hunk);
-        },
+        }
       };
     }
   };
@@ -496,9 +502,9 @@ class DiffFile extends React.Component<Props, State> {
               title={this.hoverFileTitle(file)}
             >
               {collapseIcon}
-              <span className={classNames("is-ellipsis-overflow", "is-size-6", "ml-1")}>
+              <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow", "is-size-6", "ml-1")}>
                 {this.renderFileTitle(file)}
-              </span>
+              </h4>
               {this.renderChangeTag(file)}
             </FullWidthTitleHeader>
             {headerButtons}

package/src/repos/HealthCheckFailureDetail.tsx

@@ -38,7 +38,7 @@ type Props = {
 const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }) => {
   const [t] = useTranslation("repos");
 
-  const footer = <Button label={t("healthCheckFailure.close")} action={closeFunction} color="grey" />;
+  const footer = <Button label={t("healthCheckFailure.close")} action={closeFunction} color="secondary" />;
 
   return (
     <Modal
@@ -52,7 +52,7 @@ const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }
       active={active}
       footer={footer}
       headColor={"danger"}
-      headTextColor={"white"}
+      headTextColor="secondary-least"
     />
   );
 };

package/src/repos/RepositoryEntry.tsx

@@ -49,9 +49,6 @@ const ContentRightContainer = styled.div`
 
 const QuickAction = styled(Icon)`
   margin-top: 0.2rem;
-  :hover {
-    color: #363636 !important;
-  }
 `;
 
 const ContactAvatar = styled.img`
@@ -79,9 +76,15 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
 
   const renderContactIcon = () => {
     if (avatarFactory) {
-      return <ContactAvatar className="has-rounded-border" src={avatarFactory({ mail: repository.contact })} alt={repository.contact} />;
+      return (
+        <ContactAvatar
+          className="has-rounded-border"
+          src={avatarFactory({ mail: repository.contact })}
+          alt={repository.contact}
+        />
+      );
     }
-    return <QuickAction className={classNames("is-clickable")} name="envelope" color="info" />;
+    return <QuickAction className={classNames("is-clickable", "has-hover-visible")} name="envelope" color="info" />;
   };
 
   const createContentRight = () => (
@@ -124,7 +127,7 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
           </ContactActionWrapper>
         ) : null}
         <QuickAction
-          className={classNames("is-clickable", "is-size-5")}
+          className={classNames("is-clickable", "is-size-5", "has-hover-visible")}
           name="download"
           color="info"
           onClick={() => setOpenCloneModal(true)}