@scm-manager/ui-components 2.27.3-20211114-175217 → 2.27.3

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/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/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/Modal.tsx

@@ -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/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/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>
   );
 };
 

package/src/repos/TokenizedDiffView.tsx

@@ -26,46 +26,35 @@ import styled from "styled-components";
 // @ts-ignore we have no typings for react-diff-view
 import { Diff, useTokenizeWorker } from "react-diff-view";
 import { FileDiff } from "@scm-manager/ui-types";
+import { determineLanguage } from "../languages";
 
 // @ts-ignore no types for css modules
 import theme from "../syntax-highlighting.module.css";
-import { determineLanguage } from "../languages";
 
 const DiffView = styled(Diff)`
   /* align line numbers */
-
   & .diff-gutter {
     text-align: right;
   }
-
   /* column sizing */
-
   > colgroup .diff-gutter-col {
     width: 3.25rem;
   }
-
   /* prevent following content from moving down */
-
   > .diff-gutter:empty:hover::after {
     font-size: 0.7rem;
   }
-
   /* smaller font size for code and
   ensure same monospace font throughout whole scmm */
-
   & .diff-line {
     font-size: 0.75rem;
     font-family: "Courier New", Monaco, Menlo, "Ubuntu Mono", "source-code-pro", monospace;
   }
-
   /* comment padding for sidebyside view */
-
   &.split .diff-widget-content .is-indented-line {
     padding-left: 3.25rem;
   }
-
   /* comment padding for combined view */
-
   &.unified .diff-widget-content .is-indented-line {
     padding-left: 6.5rem;
   }
@@ -82,17 +71,10 @@ type Props = {
   className?: string;
 };
 
-const findSyntaxHighlightingLanguage = (file: FileDiff) => {
-  if (file.syntaxModes) {
-    return file.syntaxModes["prism"] || file.syntaxModes["codemirror"] || file.syntaxModes["ace"] || file.language;
-  }
-  return file.language;
-};
-
 const TokenizedDiffView: FC<Props> = ({ file, viewType, className, children }) => {
   const { tokens } = useTokenizeWorker(tokenize, {
     hunks: file.hunks,
-    language: determineLanguage(findSyntaxHighlightingLanguage(file))
+    language: determineLanguage(file.language),
   });
 
   return (

package/src/repos/annotate/Annotate.stories.tsx

@@ -67,7 +67,7 @@ const commitImplementMain = {
 };
 
 const source: AnnotatedSource = {
-  language: "go",
+  language: "golang",
   lines: [
     {
       lineNumber: 1,

package/src/repos/index.ts

@@ -30,7 +30,6 @@ import {
   AnnotationFactoryContext,
   DiffEventHandler,
   DiffEventContext,
-  DiffObjectProps
 } from "./DiffTypes";
 
 import { FileDiff as File, FileChangeType, Hunk, Change, ChangeType } from "@scm-manager/ui-types";
@@ -65,5 +64,4 @@ export {
   AnnotationFactoryContext,
   DiffEventHandler,
   DiffEventContext,
-  DiffObjectProps
 };

package/src/repos/refractorAdapter.ts

@@ -46,15 +46,10 @@ const createAdapter = (theme: { [key: string]: string }): RefractorAdapter => {
       import(
         /* webpackChunkName: "tokenizer-refractor-[request]" */
         `refractor/lang/${lang}`
-      )
-        .then(loadedLanguage => {
-          refractor.register(loadedLanguage.default);
-          callback();
-        })
-        .catch(e => {
-          // eslint-disable-next-line no-console
-          console.log(`failed to load refractor language ${lang}: ${e}`);
-        });
+      ).then((loadedLanguage) => {
+        refractor.register(loadedLanguage.default);
+        callback();
+      });
     }
   };
 
@@ -63,7 +58,7 @@ const createAdapter = (theme: { [key: string]: string }): RefractorAdapter => {
   const runHook = (name: string, env: RunHookEnv) => {
     originalRunHook.apply(name, env);
     if (env.classes) {
-      env.classes = env.classes.map(className => theme[className] || className);
+      env.classes = env.classes.map((className) => theme[className] || className);
     }
   };
   // @ts-ignore hooks are not in the type definition
@@ -72,7 +67,7 @@ const createAdapter = (theme: { [key: string]: string }): RefractorAdapter => {
   return {
     isLanguageRegistered,
     loadLanguage,
-    ...refractor
+    ...refractor,
   };
 };
 

package/src/search/HighlightedFragment.tsx

@@ -24,9 +24,6 @@
 
 import React, { FC } from "react";
 
-const PRE_TAG = "<|[[--";
-const POST_TAG = "--]]|>";
-
 type Props = {
   value: string;
 };
@@ -36,14 +33,14 @@ const HighlightedFragment: FC<Props> = ({ value }) => {
 
   const result = [];
   while (content.length > 0) {
-    const start = content.indexOf(PRE_TAG);
-    const end = content.indexOf(POST_TAG);
+    const start = content.indexOf("<>");
+    const end = content.indexOf("</>");
     if (start >= 0 && end > 0) {
       if (start > 0) {
         result.push(content.substring(0, start));
       }
-      result.push(<mark>{content.substring(start + PRE_TAG.length, end)}</mark>);
-      content = content.substring(end + POST_TAG.length);
+      result.push(<strong>{content.substring(start + 2, end)}</strong>);
+      content = content.substring(end + 3);
     } else {
       result.push(content);
       break;

package/src/search/TextHitField.tsx

@@ -26,51 +26,35 @@ import React, { FC } from "react";
 import { HighlightedHitField, Hit } from "@scm-manager/ui-types";
 import HighlightedFragment from "./HighlightedFragment";
 import { isHighlightedHitField } from "./fields";
-import SyntaxHighlightedFragment from "./SyntaxHighlightedFragment";
-
-type HighlightedTextFieldProps = {
-  field: HighlightedHitField;
-  syntaxHighlightingLanguage?: string;
-};
-
-const HighlightedTextField: FC<HighlightedTextFieldProps> = ({ field, syntaxHighlightingLanguage }) => {
-  const separator = syntaxHighlightingLanguage ? "...\n" : " ... ";
-  return (
-    <>
-      {field.fragments.map((fragment, i) => (
-        <React.Fragment key={fragment}>
-          {separator}
-          {syntaxHighlightingLanguage ? (
-            <SyntaxHighlightedFragment value={fragment} language={syntaxHighlightingLanguage} />
-          ) : (
-            <HighlightedFragment value={fragment} />
-          )}
-          {i + 1 >= field.fragments.length ? separator : null}
-        </React.Fragment>
-      ))}
-    </>
-  );
-};
 
 type Props = {
   hit: Hit;
   field: string;
   truncateValueAt?: number;
-  syntaxHighlightingLanguage?: string;
 };
 
-const TextHitField: FC<Props> = ({
-  hit,
-  field: fieldName,
-  children,
-  syntaxHighlightingLanguage,
-  truncateValueAt = 0
-}) => {
+type HighlightedTextFieldProps = {
+  field: HighlightedHitField;
+};
+
+const HighlightedTextField: FC<HighlightedTextFieldProps> = ({ field }) => (
+  <>
+    {field.fragments.map((fr, i) => (
+      <React.Fragment key={fr}>
+        {" ... "}
+        <HighlightedFragment value={fr} />
+        {i + 1 >= field.fragments.length ? " ... " : null}
+      </React.Fragment>
+    ))}
+  </>
+);
+
+const TextHitField: FC<Props> = ({ hit, field: fieldName, children, truncateValueAt = 0 }) => {
   const field = hit.fields[fieldName];
   if (!field) {
     return <>{children}</>;
   } else if (isHighlightedHitField(field)) {
-    return <HighlightedTextField field={field} syntaxHighlightingLanguage={syntaxHighlightingLanguage} />;
+    return <HighlightedTextField field={field} />;
   } else {
     let value = field.value;
     if (value === "") {