@scm-manager/ui-components 2.27.3-20211113-092021 → 2.27.3

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/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/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/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(<strong>{content.substring(start + PRE_TAG.length, end)}</strong>);
-      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/syntax-highlighting.module.css

@@ -1,4 +1,4 @@
-/*
+/**
  * MIT License
  *
  * Copyright (c) 2020-present Cloudogu GmbH and Contributors

package/src/SmallLoadingSpinner.stories.tsx

@@ -1,32 +0,0 @@
-/*
- * 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

@@ -1,34 +0,0 @@
-/*
- * 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/layout/SubSubtitle.tsx

@@ -1,41 +0,0 @@
-/*
- * 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;