diff --git a/docs/en/development/plugins/extension-points.md b/docs/en/development/plugins/extension-points.md
index 56c273e029..0359f5837e 100644
--- a/docs/en/development/plugins/extension-points.md
+++ b/docs/en/development/plugins/extension-points.md
@@ -33,6 +33,7 @@ The following extension points are provided for the frontend:
### profile.route
### profile.setting
### repo-config.route
+### repo-config.details
### repos.branch-details.information
### repos.content.metadata
- Location: At meta data view for file
@@ -46,13 +47,13 @@ The following extension points are provided for the frontend:
### repositoryRole.role-details.information
### repository.setting
### repos.repository-avatar
+### repos.repository-avatar.primary
- Location: At each repository in repository overview
- can be used to add avatar for each repository (e.g., to mark repository type)
### repos.repository-details.information
- Location: At bottom of a single repository view
- can be used to show detailed information about the repository (how to clone, e.g.)
-
### repos.sources.view
### roles.route
### user.route
diff --git a/gradle/changelog/repository-avatar-extensionpoint.yaml b/gradle/changelog/repository-avatar-extensionpoint.yaml
new file mode 100644
index 0000000000..d8b07afbcd
--- /dev/null
+++ b/gradle/changelog/repository-avatar-extensionpoint.yaml
@@ -0,0 +1,2 @@
+- type: added
+ description: New extension points for custom repository avatars ([#1614](https://github.com/scm-manager/scm-manager/pull/1614))
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 1452832896..2067368c3a 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -55824,7 +55824,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
className="CardColumn__AvatarWrapper-sc-1w6lsih-1 lhzEPm media-left"
>
void;
+ handleFile: (file: File, event?: ChangeEvent) => void;
+ filenamePlaceholder?: string;
+ disabled?: boolean;
};
-const FileUpload: FC = ({ handleFile }) => {
+const FileUpload: FC = ({ handleFile, filenamePlaceholder = "", disabled = false }) => {
const [t] = useTranslation("commons");
const [file, setFile] = useState(null);
@@ -41,21 +43,26 @@ const FileUpload: FC = ({ handleFile }) => {
className="file-input"
type="file"
name="resume"
+ disabled={disabled}
onChange={(event: ChangeEvent) => {
const uploadedFile = event?.target?.files![0];
// @ts-ignore the uploaded file doesn't match our types
setFile(uploadedFile);
// @ts-ignore the uploaded file doesn't match our types
- handleFile(uploadedFile);
+ handleFile(uploadedFile, event);
}}
/>
- {t("fileUpload.label")}
+ {t("fileUpload.label")}
- {file?.name || ""}
+ {file?.name ? (
+ {file?.name}
+ ) : (
+ {filenamePlaceholder}
+ )}
);
diff --git a/scm-ui/ui-components/src/modals/FullscreenModal.tsx b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
index 72951da5ca..8cb6a27ffc 100644
--- a/scm-ui/ui-components/src/modals/FullscreenModal.tsx
+++ b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
@@ -33,6 +33,7 @@ type Props = {
closeFunction: () => void;
body: ReactNode;
active: boolean;
+ closeButtonLabel?: string;
};
const FullSizedModal = styled(Modal)`
@@ -42,9 +43,9 @@ const FullSizedModal = styled(Modal)`
}
`;
-const FullscreenModal: FC = ({ title, closeFunction, body, active }) => {
+const FullscreenModal: FC = ({ title, closeFunction, body, active, closeButtonLabel }) => {
const [t] = useTranslation("repos");
- const footer = ;
+ const footer = ;
return ;
};
diff --git a/scm-ui/ui-components/src/repos/RepositoryAvatar.tsx b/scm-ui/ui-components/src/repos/RepositoryAvatar.tsx
index 5664ad07a6..e7822a0387 100644
--- a/scm-ui/ui-components/src/repos/RepositoryAvatar.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryAvatar.tsx
@@ -21,31 +21,42 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
-import React from "react";
+import React, { FC } from "react";
import { ExtensionPoint } from "@scm-manager/ui-extensions";
import { Repository } from "@scm-manager/ui-types";
import { Image } from "@scm-manager/ui-components";
+import styled from "styled-components";
+
+const Avatar = styled.p`
+ border-radius: 5px;
+`;
type Props = {
repository: Repository;
};
-class RepositoryAvatar extends React.Component {
- render() {
- const { repository } = this.props;
- return (
-