-
`;
@@ -71215,124 +71048,110 @@ exports[`Storyshots Repositories/RepositoryEntry Avatar EP 1`] = `
-
+
-
+
+
+
-
+
+
-
-
+
- 
-
-
+ heartOfGold
+
+
+
-
-
-
- heartOfGold
-
-
-
-
-
-
-
-
-
-
-
- repository.archived
-
-
- - The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive -
-
-
+
+
+
-
+
+ overview.lastModified
+
+
+
+
+
+
-
-
-
-
+ repository.archived
-
-
-
-
-
`;
@@ -71340,127 +71159,113 @@ exports[`Storyshots Repositories/RepositoryEntry Before Title EP 1`] = `
-
+
-
+
+
+
-
+
+
-
-
+
-
-
-
+ heartOfGold
+
+
+
-
-
-
- heartOfGold
-
-
-
-
-
-
-
-
- - The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive -
-
-
+
+
+
-
+
-
-
-
-
-
-
-
-
-
+ 3 days ago
+
+
+
+
+
-
-
`;
@@ -71468,124 +71273,110 @@ exports[`Storyshots Repositories/RepositoryEntry Default 1`] = `
-
+
-
+
+
+
-
+
+
+
-
-
+
- 
-
-
+ heartOfGold
+
+
+
-
-
-
-
- heartOfGold
-
-
-
-
-
-
-
-
- - The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive -
-
-
+
+
+
-
+
-
-
-
-
-
-
-
-
-
+ 3 days ago
+
+
+
+
+
-
-
`;
@@ -71593,137 +71384,122 @@ exports[`Storyshots Repositories/RepositoryEntry Exporting 1`] = `
-
+
-
+
+
+
-
+
+
-
-
+
-
-
-
+ heartOfGold
+
+
+
-
-
-
- heartOfGold
-
-
-
-
-
-
-
-
- - The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive -
-
-
+
+
+
-
+
-
-
-
-
-
-
-
-
-
+ 3 days ago
+
+
+
+
+
-
-
`;
@@ -71731,138 +71507,123 @@ exports[`Storyshots Repositories/RepositoryEntry HealthCheck Failure 1`] = `
-
+
-
+
+
+
-
+
+
-
-
+
-
-
-
+ heartOfGold
+
+
+
-
-
-
- heartOfGold
-
-
-
-
-
-
-
-
-
-
-
- repository.exporting
-
-
- - The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive -
-
-
+
+
+
-
+
+ overview.lastModified
+
+
+
+
+
+
-
-
-
-
+ repository.exporting
-
-
-
-
-
`;
@@ -71870,149 +71631,134 @@ exports[`Storyshots Repositories/RepositoryEntry MultiRepositoryTags 1`] = `
-
+
-
+
+
+
-
+
+
-
-
+
-
-
-
+ heartOfGold
+
+
+
-
-
-
- heartOfGold
-
-
-
-
-
-
-
-
-
-
-
- repository.healthCheckFailure
-
-
- - The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive -
-
-
+
+
+
-
+
+ overview.lastModified
+
+
+
+
+
+
-
-
-
-
+ repository.healthCheckFailure
-
-
-
-
-
`;
@@ -72020,138 +71766,123 @@ exports[`Storyshots Repositories/RepositoryEntry RepositoryFlag EP 1`] = `
-
+
-
+
+
+
-
+
+
-
-
+
-
-
-
+ heartOfGold
+
+
+
-
-
-
- heartOfGold
-
-
-
-
-
-
-
-
-
-
-
- repository.archived
-
-
-
-
- repository.exporting
-
-
- - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -
-
-
+
+
+
-
+
+ overview.lastModified
+
+
+
+
+
+
-
-
-
-
+ repository.archived
-
-
-
+ repository.exporting
+
-
-
`;
@@ -72159,124 +71890,110 @@ exports[`Storyshots Repositories/RepositoryEntry With long texts 1`] = `
-
+
-
+
+
+
-
+
+
-
-
+
-
-
-
+ heartOfGold
+
+
+
-
-
-
- heartOfGold
-
-
-
-
-
-
-
-
-
-
-
- repository.healthCheckFailure
-
-
- - The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive -
-
-
+
+
+
-
+
+ overview.lastModified
+
+
+
+
+
+
-
-
-
-
+ repository.healthCheckFailure
-
-
-
- = ({ namespaceHeader, elements }) => {
- const content = elements.map((entry, index) => (
-
-
- ));
-
- return (
- <>
- = ({ namespaceHeader, elements, collapsed, onCollapsedChange }) => (
+
+ {elements}
+
+);
export default GroupEntries;
diff --git a/scm-ui/ui-components/src/layout/GroupEntry.stories.tsx b/scm-ui/ui-components/src/layout/GroupEntry.stories.tsx
deleted file mode 100644
index c5ed3a9e2c..0000000000
--- a/scm-ui/ui-components/src/layout/GroupEntry.stories.tsx
+++ /dev/null
@@ -1,75 +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 Icon from "../Icon";
-import { storiesOf } from "@storybook/react";
-import { MemoryRouter } from "react-router-dom";
-import React from "react";
-import GroupEntry from "./GroupEntry";
-import { Button, ButtonGroup } from "../buttons";
-import copyToClipboard from "../CopyToClipboard";
-
-const link = "/foo/bar";
-const avatar =
-
-);
-
-storiesOf("GroupEntry", module)
- .addDecorator((story) => {story()} )
- .addDecorator((storyFn) =>
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
- dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
- clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
- consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
- sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
- takimata sanctus est Lorem ipsum dolor sit amet.
-
- }
- contentRight={contentRight}
- />
- ));
diff --git a/scm-ui/ui-components/src/layout/GroupEntry.tsx b/scm-ui/ui-components/src/layout/GroupEntry.tsx
deleted file mode 100644
index 673e4e777d..0000000000
--- a/scm-ui/ui-components/src/layout/GroupEntry.tsx
+++ /dev/null
@@ -1,122 +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, ReactNode } from "react";
-import { Link } from "react-router-dom";
-import classNames from "classnames";
-import styled from "styled-components";
-import { useTranslation } from "react-i18next";
-import { useKeyboardIteratorTarget } from "@scm-manager/ui-shortcuts";
-
-const StyledGroupEntry = styled.div`
- max-height: calc(90px - 1.5rem);
- width: 100%;
- pointer-events: all;
-`;
-
-const OverlayLink = styled(Link)`
- width: 100%;
- position: absolute;
- height: calc(90px - 1.5rem);
- pointer-events: all;
- border-radius: 4px;
- :hover {
- cursor: pointer;
- }
-`;
-
-const Avatar = styled.div`
- .predefined-avatar {
- height: 48px;
- width: 48px;
- font-size: 1.75rem;
- }
-`;
-
-const Description = styled.p`
- height: 1.5rem;
- text-overflow: ellipsis;
- overflow-x: hidden;
- overflow-y: visible;
- white-space: nowrap;
- word-break: break-all;
-`;
-
-const ContentLeft = styled.div`
- min-width: 0;
-`;
-
-const ContentRight = styled.div`
- pointer-events: all;
- margin-bottom: -10px;
-`;
-
-type Props = {
- title?: string;
- avatar: string | ReactNode;
- name: string | ReactNode;
- description?: string | ReactNode;
- contentRight?: ReactNode;
- link: string;
- ariaLabel?: string;
-};
-
-const GroupEntry: FC = ({ link, avatar, title, name, description, contentRight, ariaLabel }) => {
- const [t] = useTranslation("repos");
- const ref = useKeyboardIteratorTarget();
- return (
- = ({ elements, group }) => {
+ const [collapsed, setCollapsed] = useLocalStorage(`repoNamespace.${group.name}.collapsed`, null);
+
+ return (
+ {elements}
+
+ );
+};
+
+export default NamespaceEntries;
diff --git a/scm-ui/ui-components/src/layout/index.ts b/scm-ui/ui-components/src/layout/index.ts
index 8c30900e47..40eb038873 100644
--- a/scm-ui/ui-components/src/layout/index.ts
+++ b/scm-ui/ui-components/src/layout/index.ts
@@ -36,3 +36,4 @@ export { default as CustomQueryFlexWrappedColumns } from "./CustomQueryFlexWrapp
export { default as PrimaryContentColumn } from "./PrimaryContentColumn";
export { default as SecondaryNavigationColumn } from "./SecondaryNavigationColumn";
export { default as GroupEntries } from "./GroupEntries";
+export { default as NamespaceEntries } from "./NamespaceEntries";
diff --git a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
index 7ffb427e9d..2d3205795f 100644
--- a/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryEntry.tsx
@@ -21,18 +21,19 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
-import React, { FC, useState } from "react";
+import React, { FC } from "react";
import { Repository } from "@scm-manager/ui-types";
-import { DateFromNow, Modal } from "@scm-manager/ui-components";
+import { DateFromNow } from "@scm-manager/ui-components";
import RepositoryAvatar from "./RepositoryAvatar";
-import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
-import GroupEntry from "../layout/GroupEntry";
+import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
import RepositoryFlags from "./RepositoryFlags";
import styled from "styled-components";
-import Icon from "../Icon";
import { useTranslation } from "react-i18next";
-import classNames from "classnames";
-import { EXTENSION_POINT } from "../avatar/Avatar";
+import { useKeyboardIteratorTarget } from "@scm-manager/ui-shortcuts";
+import { Card } from "@scm-manager/ui-layout";
+import { Link } from "react-router-dom";
+import { Menu } from "@scm-manager/ui-overlays";
+import { Icon } from "@scm-manager/ui-buttons";
type DateProp = Date | string;
@@ -43,125 +44,97 @@ type Props = {
baseDate?: DateProp;
};
-const ContentRightContainer = styled.div`
- height: calc(80px - 1.5rem);
+const Avatar = styled.div`
+ .predefined-avatar {
+ height: 48px;
+ width: 48px;
+ font-size: 1.75rem;
+ }
`;
-const QuickAction = styled(Icon)`
- margin-top: 0.2rem;
+const StyledLink = styled(Link)`
+ overflow-wrap: anywhere;
`;
-const ContactAvatar = styled.img`
- max-width: 20px;
-`;
-
-const ContactActionWrapper = styled.a`
- height: 20px;
- width: 20px;
- padding-right: 2rem;
-`;
-
-const Name = styled.strong`
+const DescriptionRow = styled(Card.Row)`
+ text-wrap: nowrap;
+ overflow: hidden;
text-overflow: ellipsis;
- overflow-x: hidden;
- overflow-y: visible;
- white-space: nowrap;
+`;
+
+const DetailsRow = styled(Card.Row)`
+ gap: 0.5rem;
`;
const RepositoryEntry: FC = ({ repository, baseDate }) => {
const [t] = useTranslation("repos");
- const [openCloneModal, setOpenCloneModal] = useState(false);
+ const ref = useKeyboardIteratorTarget();
- const avatarFactory = binder.getExtension(EXTENSION_POINT);
-
- const renderContactIcon = () => {
- if (avatarFactory) {
- return (
-
- {openCloneModal && (
-
- name="repos.repository-details.information"
- renderAll={true}
- props={{
- repository
- }}
- />
- }
- closeFunction={() => setOpenCloneModal(false)}
- />
- )}
-
- {repository.contact ? (
-
- {renderContactIcon()}
-
- ) : null}
- setOpenCloneModal(true)}
- title={t("overview.clone")}
- />
-
-
-
+ const actions = () => (
+
);
const repositoryLink = `/repo/${repository.namespace}/${repository.name}/`;
- const actions = createContentRight();
- const name = (
- {actions()}}
+ rowGap="0.25rem"
+ avatar={
+
+
+ }
+ >
+
+
+ name="repository.card.beforeTitle"
+ props={{ repository }}
+ />
+
+
+ {repository.name}{" "}
+
+
+
+ {repository.description}
+
+
+ {t("overview.lastModified")}{" "}
+
+
);
};
diff --git a/scm-ui/ui-components/src/repos/RepositoryFlag.tsx b/scm-ui/ui-components/src/repos/RepositoryFlag.tsx
index f79ac8805a..3e1b8f1597 100644
--- a/scm-ui/ui-components/src/repos/RepositoryFlag.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryFlag.tsx
@@ -24,8 +24,9 @@
import React, { FC } from "react";
import { Color, Size } from "../styleConstants";
-import Tooltip, { TooltipLocation } from "../Tooltip";
-import Tag from "../Tag";
+import { Card } from "@scm-manager/ui-layout";
+import { Tooltip } from "@scm-manager/ui-overlays";
+import { TooltipLocation } from "../Tooltip";
type Props = {
color?: Color;
@@ -36,10 +37,10 @@ type Props = {
};
const RepositoryFlag: FC = ({ children, title, size = "small", tooltipLocation = "bottom", ...props }) => (
-
-
+
+
{children}
-
+
);
diff --git a/scm-ui/ui-components/src/repos/RepositoryFlags.tsx b/scm-ui/ui-components/src/repos/RepositoryFlags.tsx
index 541e34e97d..b2425a4761 100644
--- a/scm-ui/ui-components/src/repos/RepositoryFlags.tsx
+++ b/scm-ui/ui-components/src/repos/RepositoryFlags.tsx
@@ -24,12 +24,12 @@
import React, { FC, useState } from "react";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
-import styled from "styled-components";
import { Repository } from "@scm-manager/ui-types";
import { ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
import { TooltipLocation } from "../Tooltip";
import RepositoryFlag from "./RepositoryFlag";
import HealthCheckFailureDetail from "./HealthCheckFailureDetail";
+import styled from "styled-components";
type Props = {
repository: Repository;
@@ -37,10 +37,8 @@ type Props = {
tooltipLocation?: TooltipLocation;
};
-const RepositoryFlagContainer = styled.div`
- .tag {
- margin-left: 0.25rem;
- }
+const GapedContainer = styled.div`
+ gap: 0.5rem;
`;
const RepositoryFlags: FC = ({ repository, className, tooltipLocation = "right" }) => {
@@ -86,17 +84,15 @@ const RepositoryFlags: FC = ({ repository, className, tooltipLocation = "
);
return (
-
+ name="repository.flags"
+ props={{ repository, tooltipLocation }}
+ renderAll={true}
+ />
+
);
};
diff --git a/scm-ui/ui-layout/src/card/Card.tsx b/scm-ui/ui-layout/src/card/Card.tsx
index 5eab439539..8ea4a0778d 100644
--- a/scm-ui/ui-layout/src/card/Card.tsx
+++ b/scm-ui/ui-layout/src/card/Card.tsx
@@ -28,6 +28,7 @@ import CSS from "csstype";
type Props = HTMLAttributes & {
action?: React.ReactElement;
+ avatar?: React.ReactElement;
/**
* @default "div"
*/
@@ -48,7 +49,7 @@ type Props = HTMLAttributes & {
* @since 2.44.0
*/
const Card = React.forwardRef(
- ({ className, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) =>
+ ({ className, avatar, rowGap = "0.5rem", children, as: Comp = "div", action, ...props }, ref) =>
React.createElement(
Comp,
{
@@ -56,13 +57,14 @@ const Card = React.forwardRef(
ref,
...props,
},
+ avatar ? avatar : null,
, "defaultOpen">;
+ defaultCollapsed?: boolean;
+ collapsed?: boolean;
+ onCollapsedChange?: (collapsed: boolean) => void;
+} & Pick, "className" | "children">;
/**
* @beta
* @since 2.46.0
*/
-const Collapsible = React.forwardRef(({ children, header, defaultOpen }, ref) => {
- const [open, setOpen] = useState(defaultOpen);
- const titleId = useGeneratedId();
- return (
-
-
-
- {header}
-
-
- {open ? "angle-up" : "angle-down"}
-
-
- {children}
-
- );
-});
+const Collapsible = React.forwardRef(
+ ({ children, header, className, defaultCollapsed, collapsed, onCollapsedChange }, ref) => {
+ const [isCollapsed, setCollapsed] = useState(defaultCollapsed);
+ const titleId = useGeneratedId();
+ useEffect(() => {
+ if (collapsed !== undefined) {
+ setCollapsed(collapsed);
+ }
+ }, [collapsed]);
+
+ return (
+ {
+ setCollapsed(!o);
+ if (onCollapsedChange) {
+ onCollapsedChange(!o);
+ }
+ }}
+ defaultOpen={!defaultCollapsed}
+ >
+
+
+ {header}
+
+
+ {isCollapsed ? "angle-left" : "angle-down"}
+
+
+ {children}
+
+ );
+ }
+);
export default Collapsible;
diff --git a/scm-ui/ui-styles/src/components/_card.scss b/scm-ui/ui-styles/src/components/_card.scss
index 898a69a535..2ae9752627 100644
--- a/scm-ui/ui-styles/src/components/_card.scss
+++ b/scm-ui/ui-styles/src/components/_card.scss
@@ -24,6 +24,7 @@
.scmm-card {
padding: 0.5rem;
+ gap: 0.5rem;
*:is(h1, h2, h3, h4, h5, h6) a {
color: var(--scm-secondary-text);
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index 8452d50014..4b4b206a92 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -65,7 +65,9 @@
"allNamespaces": "Alle Namespaces",
"clone": "Clone/Checkout",
"contact": "E-Mail senden an {{contact}}",
- "ariaLabel": "Repository {{name}}"
+ "ariaLabel": "Repository {{name}}",
+ "lastModified": "Letzte Änderung",
+ "sendMailToContact": "E-Mail an Kontakt senden"
},
"create": {
"title": "Repository hinzufügen",
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index 16beaeceaf..71bbb05028 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -65,7 +65,9 @@
"allNamespaces": "All namespaces",
"clone": "Clone/Checkout",
"contact": "Send mail to {{contact}}",
- "ariaLabel": "Repository {{name}}"
+ "ariaLabel": "Repository {{name}}",
+ "lastModified": "Last modified",
+ "sendMailToContact": "Send mail to contact"
},
"create": {
"title": "Add Repository",
diff --git a/scm-ui/ui-webapp/src/repos/branches/containers/BranchTableWrapper.tsx b/scm-ui/ui-webapp/src/repos/branches/containers/BranchTableWrapper.tsx
index ce599641e2..f3ea6683eb 100644
--- a/scm-ui/ui-webapp/src/repos/branches/containers/BranchTableWrapper.tsx
+++ b/scm-ui/ui-webapp/src/repos/branches/containers/BranchTableWrapper.tsx
@@ -96,7 +96,7 @@ const BranchTableWrapper: FC = ({ repository, baseUrl, data }) => {
{activeBranches.length > 0 ? (
-
+
= ({ repository, baseUrl, data }) => {
) : null}
{staleBranches.length > 0 ? (
-
+
= ({ group }) => {
- const [t] = useTranslation("namespaces");
-
- const settingsLink = group.namespace?._links?.permissions && (
-
- {
- render() {
- const { repositories, namespaces } = this.props;
-
- const groups = groupByNamespace(repositories, namespaces);
- return (
- = ({ repositories, namespaces }) => (
+ <>
+ {groupByNamespace(repositories, namespaces).map((group) => (
+
-
`;
diff --git a/scm-ui/ui-components/src/layout/GroupEntries.tsx b/scm-ui/ui-components/src/layout/GroupEntries.tsx
index 14523f3e87..a2dbf9a0bc 100644
--- a/scm-ui/ui-components/src/layout/GroupEntries.tsx
+++ b/scm-ui/ui-components/src/layout/GroupEntries.tsx
@@ -22,35 +22,19 @@
* SOFTWARE.
*/
import React, { FC, ReactNode } from "react";
-import classNames from "classnames";
-import styled from "styled-components";
-
-const Separator = styled.div`
- border-bottom: 1px solid rgb(219, 219, 219, 0.5);
-`;
+import { CardList, Collapsible } from "@scm-manager/ui-layout";
type Props = {
namespaceHeader: ReactNode;
elements: ReactNode[];
+ collapsed?: boolean;
+ onCollapsedChange?: (collapsed: boolean) => void;
};
-const GroupEntries: FC
-
+
-
+
+
+
-
+
+
-
-
+
-
-
-
+ veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-loooooooooooooooooooooooooooooooooooooooooooooooooooong-repooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaame
+
+
+
-
-
-
- veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery-loooooooooooooooooooooooooooooooooooooooooooooooooooong-repooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo-naaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaame
-
-
-
-
-
-
-
-
- - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -
-
-
+
+
+
-
+
-
-
-
-
-
-
-
-
-
+ 3 days ago
+
+
+
+
+
{entry}
- {index + 1 !== elements.length ?
- {namespaceHeader}
-
- {content}
-
-
- );
-};
+const GroupEntries: FC{storyFn()}
)
- .add("Default", () => (
-
-
-
- {avatar}
-
-
- {contentRight}
-
-
-
- );
-};
-
-export default GroupEntry;
diff --git a/scm-ui/ui-components/src/layout/NamespaceEntries.tsx b/scm-ui/ui-components/src/layout/NamespaceEntries.tsx
new file mode 100644
index 0000000000..9f94b0ba2a
--- /dev/null
+++ b/scm-ui/ui-components/src/layout/NamespaceEntries.tsx
@@ -0,0 +1,66 @@
+/*
+ * 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, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocalStorage } from "@scm-manager/ui-api";
+import { CardList, Collapsible } from "@scm-manager/ui-layout";
+import { RepositoryGroup } from "@scm-manager/ui-types";
+import { Link } from "react-router-dom";
+import { Icon } from "../index";
+
+type Props = {
+ elements: ReactNode[];
+ group: RepositoryGroup;
+};
+
+const DefaultGroupHeader: FC<{ group: RepositoryGroup }> = ({ group }) => {
+ const [t] = useTranslation("namespaces");
+ return (
+ <>
+
+
- {description}
-
- {name}
- {group.name}
+ {" "} + +
-
- name="repository.card.beforeTitle"
- props={{ repository }}
- />
- {repository.name}
- );
return (
- <>
-
+
{modal}
-
- {repositoryFlags}
-
- name="repository.flags"
- props={{ repository, tooltipLocation }}
- renderAll={true}
- />
-
-
+ {repositoryFlags}
+
{children}
,
- action ? {action} : null
+ action ? action : null
)
);
diff --git a/scm-ui/ui-layout/src/collapsible/Collapsible.tsx b/scm-ui/ui-layout/src/collapsible/Collapsible.tsx
index 1e084b667f..9d61c97387 100644
--- a/scm-ui/ui-layout/src/collapsible/Collapsible.tsx
+++ b/scm-ui/ui-layout/src/collapsible/Collapsible.tsx
@@ -22,11 +22,12 @@
* SOFTWARE.
*/
-import React, { ComponentProps, ReactNode, useState } from "react";
+import React, { ComponentProps, ReactNode, useEffect, useState } from "react";
import * as RadixCollapsible from "@radix-ui/react-collapsible";
import { Icon } from "@scm-manager/ui-buttons";
import styled from "styled-components";
import { useGeneratedId } from "@scm-manager/ui-components";
+import classNames from "classnames";
const StyledTrigger = styled(RadixCollapsible.Trigger)`
margin-right: 0.5rem;
@@ -38,28 +39,49 @@ const StyledCollapsibleHeader = styled.div`
type Props = {
header: ReactNode;
-} & Pick
- {groups.map((group) => {
- return
- );
- }
-}
+const RepositoryList: FC