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

package/src/markdown/MarkdownView.tsx

@@ -85,7 +85,7 @@ const MarkdownErrorNotification: FC = () => {
         </pre>
         <p>
           {t("markdownErrorNotification.spec")}:{" "}
-          <a href="https://github.github.com/gfm/" target="_blank">
+          <a href="https://github.github.com/gfm/" target="_blank" rel="noreferrer">
             GitHub Flavored Markdown Spec
           </a>
         </p>
@@ -99,13 +99,13 @@ class MarkdownView extends React.Component<Props, State> {
 
   static defaultProps: Partial<Props> = {
     enableAnchorHeadings: false,
-    skipHtml: false
+    skipHtml: false,
   };
 
   constructor(props: Props) {
     super(props);
     this.state = {
-      contentRef: null
+      contentRef: null,
     };
   }
 
@@ -143,7 +143,7 @@ class MarkdownView extends React.Component<Props, State> {
       basePath,
       permalink,
       t,
-      mdastPlugins = []
+      mdastPlugins = [],
     } = this.props;
 
     const rendererFactory = this.context.getExtension("markdown-renderer-factory");
@@ -200,25 +200,25 @@ class MarkdownView extends React.Component<Props, State> {
         sanitize,
         merge(gh, {
           attributes: {
-            code: ["className"] // Allow className for code elements, this is necessary to extract the code language
+            code: ["className"], // Allow className for code elements, this is necessary to extract the code language
           },
           clobberPrefix: "", // Do not prefix user-provided ids and class names,
           protocols: {
-            href: Object.keys(protocolLinkRendererExtensions)
-          }
+            href: Object.keys(protocolLinkRendererExtensions),
+          },
         })
       )
       .use(rehype2react, {
         createElement: React.createElement,
         passNode: true,
-        components: createComponentList(remarkRendererList, { permalink })
+        components: createComponentList(remarkRendererList, { permalink }),
       });
 
     const renderedMarkdown: any = processor.processSync(content).result;
 
     return (
       <ErrorBoundary fallback={MarkdownErrorNotification}>
-        <div ref={el => this.setState({ contentRef: el })} className="content is-word-break">
+        <div ref={(el) => this.setState({ contentRef: el })} className="content is-word-break">
           {renderedMarkdown}
         </div>
       </ErrorBoundary>

package/src/markdown/createComponentList.ts

@@ -24,7 +24,7 @@
 import {
   createRemark2RehypeCodeRendererAdapter,
   createRemark2RehypeHeadingRendererAdapterFactory,
-  createRemark2RehypeLinkRendererAdapter
+  createRemark2RehypeLinkRendererAdapter,
 } from "./remarkToRehypeRendererAdapters";
 
 export type CreateComponentListOptions = {

package/src/markdown/createMdastPlugin.ts

@@ -34,7 +34,7 @@ export default function createMdastPlugin(plugin: AstPlugin): any {
   return function attach() {
     return function transform(tree: any) {
       plugin({
-        visit: (type, visitor) => visit(tree, type, visitor)
+        visit: (type, visitor) => visit(tree, type, visitor),
       });
       return tree;
     };

package/src/markdown/markdownExtensions.ts

@@ -35,4 +35,4 @@ export type ProtocolLinkRendererExtension = {
 
 export type ProtocolLinkRendererExtensionMap = {
   [protocol: string]: FC<ProtocolLinkRendererProps>;
-}
+};

package/src/markdown/remarkChangesetShortLinkParser.ts

@@ -59,7 +59,7 @@ export const createTransformer = (t: TFunction): AstPlugin => {
           if (i > 0) {
             children.push({
               type: "text",
-              value: nodeText.substring(0, i)
+              value: nodeText.substring(0, i),
             });
           }
 
@@ -69,14 +69,14 @@ export const createTransformer = (t: TFunction): AstPlugin => {
             title: t("changeset.shortlink.title", {
               namespace: m[1],
               name: m[2],
-              id: m[3]
+              id: m[3],
             }),
             children: [
               {
                 type: "text",
-                value: m[0]
-              }
-            ]
+                value: m[0],
+              },
+            ],
           });
 
           nodeText = nodeText.substring(i + m[0].length);
@@ -85,13 +85,13 @@ export const createTransformer = (t: TFunction): AstPlugin => {
         if (nodeText.length > 0) {
           children.push({
             type: "text",
-            value: nodeText
+            value: nodeText,
           });
         }
 
         parent.children[index] = {
           type: "text",
-          children
+          children,
         };
       }
     });

package/src/markdown/remarkToRehypeRendererAdapters.ts

@@ -28,7 +28,7 @@ export const createRemark2RehypeCodeRendererAdapter = (remarkRenderer: any) => {
     children = children || [];
     const renderProps = {
       value: children[0],
-      language: Array.isArray(node.properties.className) ? node.properties.className[0].split("language-")[1] : ""
+      language: Array.isArray(node.properties.className) ? node.properties.className[0].split("language-")[1] : "",
     };
     return React.createElement(remarkRenderer, renderProps, ...children);
   };
@@ -54,13 +54,14 @@ export const createRemark2RehypeLinkRendererAdapter = (remarkRenderer: any) => {
 };
 
 export const createRemark2RehypeHeadingRendererAdapterFactory = (remarkRenderer: any, permalink?: string) => {
-  return (level: number) => ({ node, children }: any) => {
-    const renderProps = {
-      id: node.properties.id,
-      level,
-      permalink
+  return (level: number) =>
+    ({ node, children }: any) => {
+      const renderProps = {
+        id: node.properties.id,
+        level,
+        permalink,
+      };
+      children = children || [];
+      return React.createElement(remarkRenderer, renderProps, ...children);
     };
-    children = children || [];
-    return React.createElement(remarkRenderer, renderProps, ...children);
-  };
 };

package/src/modals/ConfirmAlert.stories.tsx

@@ -37,15 +37,15 @@ const buttons = [
   {
     className: "is-outlined",
     label: "Cancel",
-    onClick: () => null
+    onClick: () => null,
   },
   {
-    label: "Submit"
-  }
+    label: "Submit",
+  },
 ];
 
-storiesOf("Modal|ConfirmAlert", module)
-  .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
+storiesOf("Modal/ConfirmAlert", module)
+  .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttons} />)
   .add("WithButton", () => {
     const buttonClick = () => {

package/src/modals/ConfirmAlert.tsx

@@ -65,13 +65,13 @@ export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
     <div className="field is-grouped">
       {buttons.map((button, index) => (
         <p className="control" key={index}>
-          <a
+          <button
             className={classNames("button", "is-info", button.className, button.isLoading ? "is-loading" : "")}
             key={index}
             onClick={() => handleClickButton(button)}
           >
             {button.label}
-          </a>
+          </button>
         </p>
       ))}
     </div>

package/src/modals/CreateTagModal.tsx

@@ -48,8 +48,8 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
   useEffect(() => {
     apiClient
       .get(existingTagsLink)
-      .then(response => response.json())
-      .then(json => setTagNames(json._embedded.tags.map((tag: Tag) => tag.name)));
+      .then((response) => response.json())
+      .then((json) => setTagNames(json._embedded.tags.map((tag: Tag) => tag.name)));
   }, [existingTagsLink]);
 
   const createTag = () => {
@@ -57,7 +57,7 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
     apiClient
       .post(tagCreationLink, {
         revision,
-        name: newTagName
+        name: newTagName,
       })
       .then(onCreated)
       .catch(onError)
@@ -83,7 +83,7 @@ const CreateTagModal: FC<Props> = ({ t, onClose, tagCreationLink, existingTagsLi
           <InputField
             name="name"
             label={t("tags.create.form.field.name.label")}
-            onChange={val => setNewTagName(val)}
+            onChange={(val) => setNewTagName(val)}
             value={newTagName}
             validationError={!!validationError}
             errorMessage={t(validationError)}

package/src/modals/Modal.stories.tsx

@@ -71,7 +71,7 @@ const withFormElementsFooter = (
   </ButtonGroup>
 );
 
-storiesOf("Modal|Modal", module)
+storiesOf("Modal/Modal", module)
   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
   .add("Default", () => (
     <NonCloseableModal>

package/src/navigation/MenuContext.tsx

@@ -33,7 +33,7 @@ export const MenuContext = React.createContext<MenuContext>({
   isCollapsed() {
     return false;
   },
-  setCollapsed() {}
+  setCollapsed() {},
 });
 
 export const StateMenuContextProvider: FC = ({ children }) => {
@@ -43,7 +43,7 @@ export const StateMenuContextProvider: FC = ({ children }) => {
     isCollapsed() {
       return collapsed;
     },
-    setCollapsed
+    setCollapsed,
   };
 
   return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;

package/src/navigation/NavAction.tsx

@@ -39,17 +39,17 @@ class NavAction extends React.Component<Props> {
     if (icon) {
       showIcon = (
         <>
-          <i className={icon}></i>{" "}
+          <i className={icon} />{" "}
         </>
       );
     }
 
     return (
       <li>
-        <a onClick={action} href="javascript:void(0);">
+        <button onClick={action}>
           {showIcon}
           {label}
-        </a>
+        </button>
       </li>
     );
   }

package/src/navigation/SecondaryNavigation.stories.tsx

@@ -52,9 +52,9 @@ const withRoute = (route: string) => {
   return (story: ReactElement<any>) => <MemoryRouter initialEntries={[route]}>{story}</MemoryRouter>;
 };
 
-storiesOf("Navigation|Secondary", module)
-  .addDecorator(story => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
-  .addDecorator(story => (
+storiesOf("Secondary Navigation", module)
+  .addDecorator((story) => <StateMenuContextProvider>{story()}</StateMenuContextProvider>)
+  .addDecorator((story) => (
     <Columns className="columns">
       <div className="column is-3">{story()}</div>
     </Columns>
@@ -92,7 +92,7 @@ storiesOf("Navigation|Secondary", 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/SubNavigation.tsx

@@ -44,7 +44,7 @@ const SubNavigation: FC<Props> = ({
   title,
   label,
   children,
-  testId
+  testId,
 }) => {
   const context = useMenuContext();
   const collapsed = context.isCollapsed();
@@ -56,7 +56,7 @@ const SubNavigation: FC<Props> = ({
   const active = useActiveMatch({
     to: parent,
     activeOnlyWhenExact,
-    activeWhenMatch
+    activeWhenMatch,
   });
 
   let defaultIcon = "fas fa-cog";

package/src/popover/Popover.stories.tsx

@@ -34,40 +34,42 @@ const Wrapper = styled.div`
 `;
 
 storiesOf("Popover", module)
-  .addDecorator(storyFn => <Wrapper>{storyFn()}</Wrapper>)
-  .add("Default", () => React.createElement(() => {
-    const { triggerProps, popoverProps } = usePopover();
+  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+  .add("Default", () =>
+    React.createElement(() => {
+      const { triggerProps, popoverProps } = usePopover();
 
-    return (
-      <div>
-        <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
-          <p>
-            The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks
-            mirror its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive,
-            which lets the ship pass through every point in every universe simultaneously.
-          </p>
-        </Popover>
-        <button className="button" {...triggerProps}>
-          Trigger
-        </button>
-      </div>
-    );
-  }))
-  .add("Link", () => React.createElement(() => {
-    const { triggerProps, popoverProps } = usePopover();
+      return (
+        <div>
+          <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
+            <p>
+              The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks
+              mirror its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive,
+              which lets the ship pass through every point in every universe simultaneously.
+            </p>
+          </Popover>
+          <button className="button" {...triggerProps}>
+            Trigger
+          </button>
+        </div>
+      );
+    })
+  )
+  .add("Link", () =>
+    React.createElement(() => {
+      const { triggerProps, popoverProps } = usePopover();
 
-    return (
-      <div>
-        <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
-          <p>
-            The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks
-            mirror its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive,
-            which lets the ship pass through every point in every universe simultaneously.
-          </p>
-        </Popover>
-        <a href="#" {...triggerProps}>
-          Trigger
-        </a>
-      </div>
-    );
-  }));
+      return (
+        <div>
+          <Popover title={<strong>Spaceship Heart of Gold</strong>} width={512} {...popoverProps}>
+            <p>
+              The Heart of Gold is the sleekest, most advanced, coolest spaceship in the galaxy. Its stunning good looks
+              mirror its awesome speed and power. It is powered by the revolutionary new Infinite Improbability Drive,
+              which lets the ship pass through every point in every universe simultaneously.
+            </p>
+          </Popover>
+          <button {...triggerProps}>Trigger</button>
+        </div>
+      );
+    })
+  );

package/src/popover/usePopover.ts

@@ -53,7 +53,7 @@ type State = {
 
 const initialState = {
   onPopover: false,
-  onTrigger: false
+  onTrigger: false,
 };
 
 const reducer = (state: State, action: Action): State => {
@@ -66,14 +66,14 @@ const reducer = (state: State, action: Action): State => {
         offsetTop: action.offsetTop,
         offsetLeft: action.offsetLeft,
         onTrigger: true,
-        onPopover: false
+        onPopover: false,
       };
     }
     case "leave-trigger": {
       if (state.onPopover) {
         return {
           ...state,
-          onTrigger: false
+          onTrigger: false,
         };
       }
       return initialState;
@@ -81,14 +81,14 @@ const reducer = (state: State, action: Action): State => {
     case "enter-popover": {
       return {
         ...state,
-        onPopover: true
+        onPopover: true,
       };
     }
     case "leave-popover": {
       if (state.onTrigger) {
         return {
           ...state,
-          onPopover: false
+          onPopover: false,
         };
       }
       return initialState;
@@ -109,13 +109,13 @@ const usePopover = () => {
     dispatchDeferred(dispatch, {
       type: "enter-trigger",
       offsetTop: current.offsetTop,
-      offsetLeft: current.offsetLeft + current.offsetWidth / 2
+      offsetLeft: current.offsetLeft + current.offsetWidth / 2,
     });
   };
 
   const onMouseLeave = () => {
     dispatchDeferred(dispatch, {
-      type: "leave-trigger"
+      type: "leave-trigger",
     });
   };
 
@@ -123,14 +123,14 @@ const usePopover = () => {
     triggerProps: {
       onMouseOver,
       onMouseLeave,
-      ref: (node: HTMLElement | null) => (triggerRef.current = node)
+      ref: (node: HTMLElement | null) => (triggerRef.current = node),
     },
     popoverProps: {
       dispatch,
       show: state.onPopover || state.onTrigger,
       offsetTop: state.offsetTop,
-      offsetLeft: state.offsetLeft
-    }
+      offsetLeft: state.offsetLeft,
+    },
   };
 };
 

package/src/repos/Diff.stories.tsx

@@ -85,7 +85,7 @@ const fileControlFactory: (changeset: Changeset) => FileControlFactory = (change
   return links.map(({ url, label }) => <JumpToFileButton tooltip={label} link={url} />);
 };
 
-storiesOf("Diff", module)
+storiesOf("Repositories/Diff", module)
   .addDecorator(RoutingDecorator)
   .addDecorator((storyFn) => <Container>{storyFn()}</Container>)
   .add("Default", () => <Diff diff={diffFiles} />)