@scm-manager/ui-components 2.32.2 → 2.32.3-20220229-134553

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.32.2",
+  "version": "2.32.3-20220229-134553",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.13.0",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.12.0",
-    "@scm-manager/ui-tests": "^2.32.2",
+    "@scm-manager/ui-tests": "^2.32.3-20220229-134553",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-storyshots": "^6.3.12",
     "@storybook/builder-webpack5": "^6.3.12",
@@ -66,9 +66,9 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.4.3",
-    "@scm-manager/ui-api": "^2.32.2",
-    "@scm-manager/ui-extensions": "^2.32.2",
-    "@scm-manager/ui-types": "^2.32.2",
+    "@scm-manager/ui-api": "^2.32.3-20220229-134553",
+    "@scm-manager/ui-extensions": "^2.32.3-20220229-134553",
+    "@scm-manager/ui-types": "^2.32.3-20220229-134553",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Breadcrumb.tsx

@@ -255,13 +255,25 @@ const Breadcrumb: FC<Props> = ({
 
   const renderExtensionPoints = () => {
     if (
-      binder.hasExtension<extensionPoints.ReposSourcesEmptyActionbar>("repos.sources.empty.actionbar") &&
+      binder.hasExtension<extensionPoints.ReposSourcesEmptyActionbar>("repos.sources.empty.actionbar", extProps) &&
       sources?._embedded?.children?.length === 0
     ) {
-      return <ExtensionPoint name="repos.sources.empty.actionbar" props={{ repository, sources }} renderAll={true} />;
+      return (
+        <ExtensionPoint<extensionPoints.ReposSourcesEmptyActionbar>
+          name="repos.sources.empty.actionbar"
+          props={{ repository, sources }}
+          renderAll={true}
+        />
+      );
     }
-    if (binder.hasExtension<extensionPoints.ReposSourcesActionbar>("repos.sources.actionbar")) {
-      return <ExtensionPoint name="repos.sources.actionbar" props={extProps} renderAll={true} />;
+    if (binder.hasExtension<extensionPoints.ReposSourcesActionbar>("repos.sources.actionbar", extProps)) {
+      return (
+        <ExtensionPoint<extensionPoints.ReposSourcesActionbar>
+          name="repos.sources.actionbar"
+          props={extProps}
+          renderAll={true}
+        />
+      );
     }
     return null;
   };

package/src/avatar/Avatar.ts

@@ -23,9 +23,10 @@
  */
 
 import { Person } from "@scm-manager/ui-types";
+import { extensionPoints } from "@scm-manager/ui-extensions";
 
 // re export type to avoid breaking changes,
 // after the type was moved to ui-types
 export { Person };
 
-export const EXTENSION_POINT = "avatar.factory";
+export const EXTENSION_POINT: extensionPoints.AvatarFactory["name"] = "avatar.factory";

package/src/avatar/AvatarWrapper.tsx

@@ -22,12 +22,12 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import { useBinder } from "@scm-manager/ui-extensions";
+import { extensionPoints, useBinder } from "@scm-manager/ui-extensions";
 import { EXTENSION_POINT } from "./Avatar";
 
 const AvatarWrapper: FC = ({ children }) => {
   const binder = useBinder();
-  if (binder.hasExtension(EXTENSION_POINT)) {
+  if (binder.hasExtension<extensionPoints.AvatarFactory>(EXTENSION_POINT)) {
     return <>{children}</>;
   }
   return null;

package/src/layout/Footer.stories.tsx

@@ -24,7 +24,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import Footer from "./Footer";
-import { Binder, BinderContext } from "@scm-manager/ui-extensions";
+import { Binder, BinderContext, extensionPoints } from "@scm-manager/ui-extensions";
 import { Me } from "@scm-manager/ui-types";
 import { EXTENSION_POINT } from "../avatar/Avatar";
 // @ts-ignore ignore unknown png
@@ -43,11 +43,8 @@ const trillian: Me = {
   _links: {},
 };
 
-const bindAvatar = (binder: Binder, avatar: string) => {
-  binder.bind(EXTENSION_POINT, () => {
-    return avatar;
-  });
-};
+const bindAvatar = (binder: Binder, avatar: string) =>
+  binder.bind<extensionPoints.AvatarFactory>(EXTENSION_POINT, () => avatar);
 
 const bindLinks = (binder: Binder) => {
   binder.bind("footer.information", () => <ExternalNavLink to="#" label="REST API" />);

package/src/layout/Footer.tsx

@@ -23,7 +23,7 @@
  */
 import React, { FC } from "react";
 import { Links, Me } from "@scm-manager/ui-types";
-import { ExtensionPoint, useBinder } from "@scm-manager/ui-extensions";
+import { ExtensionPoint, extensionPoints, useBinder } from "@scm-manager/ui-extensions";
 import { AvatarImage } from "../avatar";
 import NavLink from "../navigation/NavLink";
 import FooterSection from "./FooterSection";
@@ -84,7 +84,7 @@ const Footer: FC<Props> = ({ me, version, links }) => {
   const extensionProps = { me, url: "/me", links };
   let meSectionTile;
   if (me) {
-    if (binder.hasExtension(EXTENSION_POINT)) {
+    if (binder.hasExtension<extensionPoints.AvatarFactory>(EXTENSION_POINT)) {
       meSectionTile = <TitleWithAvatar me={me} />;
     } else {
       meSectionTile = <TitleWithIcon title={me.displayName} icon="user-circle" />;
@@ -105,7 +105,11 @@ const Footer: FC<Props> = ({ me, version, links }) => {
                 <NavLink to="/me/settings/publicKeys" label={t("profile.publicKeysNavLink")} />
               )}
               {me?._links?.apiKeys && <NavLink to="/me/settings/apiKeys" label={t("profile.apiKeysNavLink")} />}
-              <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
+              <ExtensionPoint<extensionPoints.ProfileSetting>
+                name="profile.setting"
+                props={extensionProps}
+                renderAll={true}
+              />
             </FooterSection>
           ) : null}
           <FooterSection title={<TitleWithIcon title={t("footer.information.title")} icon="info-circle" />}>

package/src/markdown/MarkdownCodeRenderer.tsx

@@ -24,7 +24,7 @@
 
 import React, { FC } from "react";
 import SyntaxHighlighter from "../SyntaxHighlighter";
-import { ExtensionPoint, useBinder } from "@scm-manager/ui-extensions";
+import { ExtensionPoint, extensionPoints, useBinder } from "@scm-manager/ui-extensions";
 import { useIndexLinks } from "@scm-manager/ui-api";
 
 type Props = {
@@ -32,14 +32,15 @@ type Props = {
   value: string;
 };
 
-const MarkdownCodeRenderer: FC<Props> = (props) => {
+const MarkdownCodeRenderer: FC<Props> = props => {
   const binder = useBinder();
   const indexLinks = useIndexLinks();
   const { language } = props;
 
-  const extensionKey = `markdown-renderer.code.${language}`;
-  if (binder.hasExtension(extensionKey, props)) {
-    return <ExtensionPoint name={extensionKey} props={{ ...props, indexLinks }} />;
+  const extensionProps = { ...props, indexLinks };
+  const extensionKey = `markdown-renderer.code.${language}` as const;
+  if (binder.hasExtension<extensionPoints.MarkdownCodeRenderer>(extensionKey, extensionProps)) {
+    return <ExtensionPoint<extensionPoints.MarkdownCodeRenderer> name={extensionKey} props={extensionProps} />;
   }
   return <SyntaxHighlighter {...props} />;
 };

package/src/markdown/MarkdownView.stories.tsx

@@ -38,8 +38,8 @@ import MarkdownChangelog from "../__resources__/markdown-changelog.md";
 import Title from "../layout/Title";
 import { Subtitle } from "../layout";
 import { MemoryRouter } from "react-router-dom";
-import { Binder, BinderContext } from "@scm-manager/ui-extensions";
-import { ProtocolLinkRendererExtension, ProtocolLinkRendererProps } from "./markdownExtensions";
+import { Binder, BinderContext, extensionPoints } from "@scm-manager/ui-extensions";
+import { ProtocolLinkRendererProps } from "./markdownExtensions";
 
 const Spacing = styled.div`
   padding: 2em;
@@ -64,10 +64,10 @@ storiesOf("MarkdownView", module)
   ))
   .add("Links", () => {
     const binder = new Binder("custom protocol link renderer");
-    binder.bind("markdown-renderer.link.protocol", {
+    binder.bind<extensionPoints.MarkdownLinkProtocolRenderer<"scw">>("markdown-renderer.link.protocol", {
       protocol: "scw",
       renderer: ProtocolLinkRenderer
-    } as ProtocolLinkRendererExtension);
+    });
     return (
       <BinderContext.Provider value={binder}>
         <MarkdownView content={MarkdownLinks} basePath="/scm/" />
@@ -76,10 +76,10 @@ storiesOf("MarkdownView", module)
   })
   .add("Links without Base Path", () => {
     const binder = new Binder("custom protocol link renderer");
-    binder.bind("markdown-renderer.link.protocol", {
+    binder.bind<extensionPoints.MarkdownLinkProtocolRenderer<"scw">>("markdown-renderer.link.protocol", {
       protocol: "scw",
       renderer: ProtocolLinkRenderer
-    } as ProtocolLinkRendererExtension);
+    });
     return (
       <BinderContext.Provider value={binder}>
         <MarkdownView content={MarkdownLinks} />
@@ -107,7 +107,7 @@ storiesOf("MarkdownView", module)
         </div>
       );
     };
-    binder.bind("markdown-renderer.code.uml", Container);
+    binder.bind<extensionPoints.MarkdownCodeRenderer<"uml">>("markdown-renderer.code.uml", Container);
     return (
       <BinderContext.Provider value={binder}>
         <MarkdownView content={MarkdownUmlCodeBlock} />
@@ -116,7 +116,7 @@ storiesOf("MarkdownView", module)
   })
   .add("XSS Prevention", () => <MarkdownView content={MarkdownXss} skipHtml={false} />);
 
-export const ProtocolLinkRenderer: FC<ProtocolLinkRendererProps> = ({ protocol, href, children }) => {
+export const ProtocolLinkRenderer: FC<ProtocolLinkRendererProps<"scw">> = ({ protocol, href, children }) => {
   return (
     <div style={{ border: "1px dashed lightgray", padding: "2px" }}>
       <h4>

package/src/markdown/markdownExtensions.ts

@@ -21,18 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { FC } from "react";
+import { extensionPoints, ExtractProps } from "@scm-manager/ui-extensions";
 
-export type ProtocolLinkRendererProps = {
-  protocol: string;
-  href: string;
-};
+export type ProtocolLinkRendererProps<Protocol extends string | undefined = undefined> = ExtractProps<
+  extensionPoints.MarkdownLinkProtocolRenderer<Protocol>["type"]["renderer"]
+>;
 
-export type ProtocolLinkRendererExtension = {
-  protocol: string;
-  renderer: FC<ProtocolLinkRendererProps>;
-};
+/**
+ * @deprecated use {@link MarkdownLinkProtocolRenderer}`["type"]` instead
+ */
+export type ProtocolLinkRendererExtension = extensionPoints.MarkdownLinkProtocolRenderer["type"];
 
 export type ProtocolLinkRendererExtensionMap = {
-  [protocol: string]: FC<ProtocolLinkRendererProps>;
+  [protocol: string]: extensionPoints.MarkdownLinkProtocolRenderer["type"]["renderer"] | undefined;
 };

package/src/navigation/PrimaryNavigation.tsx

@@ -24,9 +24,7 @@
 import React, { FC, ReactNode } from "react";
 import PrimaryNavigationLink from "./PrimaryNavigationLink";
 import { Links } from "@scm-manager/ui-types";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
-import { urls } from "@scm-manager/ui-api";
-import { useLocation } from "react-router-dom";
+import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import { useTranslation } from "react-i18next";
 
 type Props = {
@@ -37,7 +35,6 @@ type Appender = (to: string, match: string, label: string, linkName: string) =>
 
 const PrimaryNavigation: FC<Props> = ({ links }) => {
   const [t] = useTranslation("commons");
-  const location = useLocation();
 
   const createNavigationAppender = (navItems: ReactNode[]): Appender => {
     return (to: string, match: string, label: string, linkName: string) => {
@@ -63,13 +60,15 @@ const PrimaryNavigation: FC<Props> = ({ links }) => {
 
     const extensionProps = {
       links,
-      label: t("primary-navigation.first-menu"),
+      label: t("primary-navigation.first-menu")
     };
 
     const append = createNavigationAppender(navItems);
-    if (binder.hasExtension("primary-navigation.first-menu", extensionProps)) {
+    if (
+      binder.hasExtension<extensionPoints.PrimaryNavigationFirstMenu>("primary-navigation.first-menu", extensionProps)
+    ) {
       navItems.push(
-        <ExtensionPoint
+        <ExtensionPoint<extensionPoints.PrimaryNavigationFirstMenu>
           key="primary-navigation.first-menu"
           name="primary-navigation.first-menu"
           props={extensionProps}
@@ -82,12 +81,12 @@ const PrimaryNavigation: FC<Props> = ({ links }) => {
     append("/admin", "/admin", "primary-navigation.admin", "config");
 
     navItems.push(
-      <ExtensionPoint
+      <ExtensionPoint<extensionPoints.PrimaryNavigation>
         key="primary-navigation"
         name="primary-navigation"
         renderAll={true}
         props={{
-          links,
+          links
         }}
       />
     );

package/src/repos/RepositoryAvatar.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
 import { Image } from "@scm-manager/ui-components";
 import styled from "styled-components";
@@ -38,13 +38,13 @@ type Props = {
 
 const renderExtensionPoint = (repository: Repository) => {
   return (
-    <ExtensionPoint
+    <ExtensionPoint<extensionPoints.PrimaryRepositoryAvatar>
       name="repos.repository-avatar.primary"
       props={{
         repository,
       }}
     >
-      <ExtensionPoint
+      <ExtensionPoint<extensionPoints.RepositoryAvatar>
         name="repos.repository-avatar"
         props={{
           repository,

package/src/repos/RepositoryEntry.tsx

@@ -25,7 +25,7 @@ import React, { FC, useState } from "react";
 import { Repository } from "@scm-manager/ui-types";
 import { DateFromNow, Modal } from "@scm-manager/ui-components";
 import RepositoryAvatar from "./RepositoryAvatar";
-import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
+import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import GroupEntry from "../layout/GroupEntry";
 import RepositoryFlags from "./RepositoryFlags";
 import styled from "styled-components";
@@ -103,7 +103,7 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
           active={openCloneModal}
           title={t("overview.clone")}
           body={
-            <ExtensionPoint
+            <ExtensionPoint<extensionPoints.RepositoryDetailsInformation>
               name="repos.repository-details.information"
               renderAll={true}
               props={{
@@ -144,7 +144,10 @@ const RepositoryEntry: FC<Props> = ({ repository, baseDate }) => {
   const actions = createContentRight();
   const name = (
     <div className="is-flex">
-      <ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} />
+      <ExtensionPoint<extensionPoints.RepositoryCardBeforeTitle>
+        name="repository.card.beforeTitle"
+        props={{ repository }}
+      />
       <Name>{repository.name}</Name> <RepositoryFlags repository={repository} className="is-hidden-mobile" />
     </div>
   );

package/src/repos/RepositoryFlags.tsx

@@ -26,7 +26,7 @@ import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { Repository } from "@scm-manager/ui-types";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import { TooltipLocation } from "../Tooltip";
 import RepositoryFlag from "./RepositoryFlag";
 import HealthCheckFailureDetail from "./HealthCheckFailureDetail";
@@ -90,7 +90,11 @@ const RepositoryFlags: FC<Props> = ({ repository, className, tooltipLocation = "
       {modal}
       <RepositoryFlagContainer>
         {repositoryFlags}
-        <ExtensionPoint name="repository.flags" props={{ repository, tooltipLocation }} renderAll={true} />
+        <ExtensionPoint<extensionPoints.RepositoryFlags>
+          name="repository.flags"
+          props={{ repository, tooltipLocation }}
+          renderAll={true}
+        />
       </RepositoryFlagContainer>
     </div>
   );

package/src/repos/changesets/ChangesetAuthor.tsx

@@ -24,7 +24,7 @@
 import React, { FC } from "react";
 import { Changeset, Person } from "@scm-manager/ui-types";
 import { useTranslation } from "react-i18next";
-import { useBinder } from "@scm-manager/ui-extensions";
+import { extensionPoints, useBinder } from "@scm-manager/ui-extensions";
 import { EXTENSION_POINT } from "../../avatar/Avatar";
 import styled from "styled-components";
 import CommaSeparatedList from "../../CommaSeparatedList";
@@ -42,7 +42,7 @@ type PersonProps = {
 
 const useAvatar = (person: Person): string | undefined => {
   const binder = useBinder();
-  const factory: (person: Person) => string | undefined = binder.getExtension(EXTENSION_POINT);
+  const factory = binder.getExtension<extensionPoints.AvatarFactory>(EXTENSION_POINT);
   if (factory) {
     return factory(person);
   }
@@ -171,7 +171,9 @@ const ChangesetAuthor: FC<Props> = ({ changeset }) => {
   }
 
   // extensions
-  const extensions = binder.getExtensions("changesets.author.suffix", { changeset });
+  const extensions = binder.getExtensions<extensionPoints.ChangesetsAuthorSuffix>("changesets.author.suffix", {
+    changeset
+  });
   if (extensions) {
     authorLine.push(...extensions);
   }

package/src/repos/changesets/ChangesetDescription.tsx

@@ -24,8 +24,8 @@
 
 import React, { FC } from "react";
 import { Changeset } from "@scm-manager/ui-types";
-import { useBinder } from "@scm-manager/ui-extensions";
-import { SplitAndReplace, Replacement } from "@scm-manager/ui-components";
+import { extensionPoints, useBinder } from "@scm-manager/ui-extensions";
+import { Replacement, SplitAndReplace } from "@scm-manager/ui-components";
 
 type Props = {
   changeset: Changeset;
@@ -35,15 +35,14 @@ type Props = {
 const ChangesetDescription: FC<Props> = ({ changeset, value }) => {
   const binder = useBinder();
 
-  const replacements: ((changeset: Changeset, value: string) => Replacement[])[] = binder.getExtensions(
-    "changeset.description.tokens",
-    {
-      changeset,
-      value,
-    }
-  );
+  const replacements: ((changeset: Changeset, value: string) => Replacement[])[] = binder.getExtensions<
+    extensionPoints.ChangesetDescriptionTokens
+  >("changeset.description.tokens", {
+    changeset,
+    value
+  });
 
-  return <SplitAndReplace text={value} replacements={replacements.flatMap((r) => r(changeset, value))} />;
+  return <SplitAndReplace text={value} replacements={replacements.flatMap(r => r(changeset, value))} />;
 };
 
 export default ChangesetDescription;

package/src/repos/changesets/ChangesetRow.tsx

@@ -24,7 +24,7 @@
 import React, { FC } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import { Changeset, File, Repository } from "@scm-manager/ui-types";
 import ChangesetButtonGroup from "./ChangesetButtonGroup";
 import SingleChangeset from "./SingleChangeset";
@@ -54,7 +54,7 @@ const ChangesetRow: FC<Props> = ({ repository, changeset, file }) => {
         </div>
         <div className={classNames("column", "is-flex", "is-justify-content-flex-end", "is-align-items-center")}>
           <ChangesetButtonGroup repository={repository} changeset={changeset} file={file} />
-          <ExtensionPoint
+          <ExtensionPoint<extensionPoints.ChangesetRight>
             name="changeset.right"
             props={{
               repository,

package/src/repos/changesets/SingleChangeset.tsx

@@ -24,7 +24,7 @@
 import React, { FC } from "react";
 import classNames from "classnames";
 import { AvatarImage, AvatarWrapper } from "../../avatar";
-import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import ChangesetDescription from "./ChangesetDescription";
 import { Trans } from "react-i18next";
 import ChangesetAuthor from "./ChangesetAuthor";
@@ -72,7 +72,7 @@ const SingleChangeset: FC<Props> = ({ repository, changeset }) => {
           </AvatarWrapper>
           <FullWidthDiv className={classNames("media-right", "ml-0")}>
             <h4 className={classNames("has-text-weight-bold", "is-ellipsis-overflow")}>
-              <ExtensionPoint
+              <ExtensionPoint<extensionPoints.ChangesetDescription>
                 name="changeset.description"
                 props={{
                   changeset,