@scm-manager/ui-components 2.27.3-20211117-144126 → 2.27.4

package/src/buttons/Button.tsx

@@ -61,43 +61,32 @@ 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={classes} to={link} aria-label={label}>
-        {content}
+      <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>
     );
   }
@@ -107,11 +96,23 @@ const Button: FC<Props> = ({
       type={type}
       title={title}
       disabled={disabled}
-      onClick={event => action && action(event)}
-      className={classes}
+      onClick={(event) => action && action(event)}
+      className={classNames(
+        "button",
+        "is-" + color,
+        { "is-loading": loading },
+        { "is-fullwidth": fullWidth },
+        { "is-reduced-mobile": reducedMobile },
+        className
+      )}
       {...createAttributesForTesting(testId)}
     >
-      {content}
+      {renderIcon()}{" "}
+      {(label || children) && (
+        <>
+          {label} {children}
+        </>
+      )}
     </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-secondary">
+            <span className="file-name has-text-weight-light has-text-grey-light">
               {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-secondary">{filenamePlaceholder}</span>
+          <span className="file-name has-text-weight-light has-text-grey-light	">{filenamePlaceholder}</span>
         )}
       </label>
     </div>

package/src/forms/FilterInput.tsx

@@ -77,7 +77,6 @@ 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 | number;
+  value?: string;
   type?: string;
   autofocus?: boolean;
   onReturnPressed?: () => void;
@@ -44,7 +44,7 @@ type BaseProps = {
   helpText?: string;
   className?: string;
   testId?: string;
-  defaultValue?: string | number;
+  defaultValue?: string;
   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={label ? a11yId : undefined}
-          aria-describedby={helpText ? helpId : undefined}
+          aria-labelledby={a11yId}
+          aria-describedby={helpId}
           {...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 = "secondary";
+    color = "grey-light";
   } else if (checked || indeterminate) {
     color = "link";
   } else {
-    color = "secondary-most";
+    color = "black";
   }
 
   // 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,7 +51,6 @@ 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";
@@ -114,7 +113,7 @@ export {
   AnnotationFactory,
   AnnotationFactoryContext,
   DiffEventHandler,
-  DiffEventContext
+  DiffEventContext,
 };
 
 // Re-export from ui-api
@@ -131,7 +130,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 undefined", () => {
+  it("should return text if language is undefied", () => {
     const lang = determineLanguage();
     expect(lang).toBe("text");
   });
@@ -45,4 +45,8 @@ 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,11 +22,20 @@
  * 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;
   }
-  return language.toLowerCase();
+  const lang = language.toLowerCase();
+  if (languageAliases[lang]) {
+    return languageAliases[lang];
+  }
+  return lang;
 };

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/settings/theme" label={t("footer.user.profile")} testId="footer-user-profile" />
+              <NavLink to="/me" 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 (
-    <div className="hero has-scm-background is-small">
+    <section 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>
-    </div>
+    </section>
   );
 };
 

package/src/layout/index.ts

@@ -29,9 +29,8 @@ 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 Title } from "./Title";
 export { default as Subtitle } from "./Subtitle";
-export { default as SubSubtitle } from "./SubSubtitle";
+export { default as Title } from "./Title";
 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="secondary" />;
+  const footer = <Button label={closeButtonLabel || t("diff.fullscreen.close")} action={closeFunction} color="grey" />;
 
   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 = "secondary-less",
-  headTextColor = "secondary-most",
-  size
+  headColor = "light",
+  headTextColor = "black",
+  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}`)}>
-          <h2 className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</h2>
+          <p className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</p>
           <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,10 +22,8 @@
  * SOFTWARE.
  */
 
-import { RouteProps } from "react-router-dom";
-
 export type RoutingProps = {
   to: string;
   activeOnlyWhenExact?: boolean;
-  activeWhenMatch?: (route: RouteProps) => boolean;
+  activeWhenMatch?: (route: any) => 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 className="is-medium" collapsed={isCollapsed}>
+            <Icon color="info" 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 popover"
+      className="box"
       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,19 +236,13 @@ 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);
     };
   };
 
@@ -266,7 +260,7 @@ class DiffFile extends React.Component<Props, State> {
     if (annotationFactory) {
       return annotationFactory({
         hunk,
-        file
+        file,
       });
     } else {
       return EMPTY_ANNOTATION_FACTORY;
@@ -280,7 +274,7 @@ class DiffFile extends React.Component<Props, State> {
       changeId: getChangeKey(change),
       change,
       hunk,
-      file
+      file,
     };
     if (onClick) {
       onClick(context);
@@ -293,7 +287,7 @@ class DiffFile extends React.Component<Props, State> {
       return {
         onClick: (event: ChangeEvent) => {
           this.handleClickEvent(event.change, hunk);
-        }
+        },
       };
     }
   };
@@ -502,9 +496,9 @@ class DiffFile extends React.Component<Props, State> {
               title={this.hoverFileTitle(file)}
             >
               {collapseIcon}
-              <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow", "is-size-6", "ml-1")}>
+              <span className={classNames("is-ellipsis-overflow", "is-size-6", "ml-1")}>
                 {this.renderFileTitle(file)}
-              </h4>
+              </span>
               {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="secondary" />;
+  const footer = <Button label={t("healthCheckFailure.close")} action={closeFunction} color="grey" />;
 
   return (
     <Modal
@@ -52,7 +52,7 @@ const HealthCheckFailureDetail: FC<Props> = ({ active, closeFunction, failures }
       active={active}
       footer={footer}
       headColor={"danger"}
-      headTextColor="secondary-least"
+      headTextColor={"white"}
     />
   );
 };

package/src/repos/RepositoryEntry.tsx

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

package/src/repos/RepositoryFlags.tsx

@@ -86,13 +86,13 @@ const RepositoryFlags: FC<Props> = ({ repository, className, tooltipLocation = "
   );
 
   return (
-    <div className={classNames("is-flex", "is-align-items-center", className)}>
+    <span className={classNames("is-flex", "is-align-items-center", className)}>
       {modal}
       <RepositoryFlagContainer>
         {repositoryFlags}
         <ExtensionPoint name="repository.flags" props={{ repository, tooltipLocation }} renderAll={true} />
       </RepositoryFlagContainer>
-    </div>
+    </span>
   );
 };