Skip to content

fix: adjust URL preview and consolidate spacing #3710

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 28, 2025
Merged

fix: adjust URL preview and consolidate spacing #3710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75dd5ef
fix: adjust URL preview and consolidate spacing
lorenzo-cavazzi May 28, 2025
a2edea5
fix: adjust spacing on slug preview for project and group creation
lorenzo-cavazzi May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 19 additions & 17 deletions client/src/features/groupsV2/new/GroupNew.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,28 +174,30 @@ function GroupV2CreationDetails() {
>
<FormGroup className="d-inline" disabled={result.isLoading}>
<div className={cx("d-flex", "flex-column", "gap-3")}>
<div className="mb-1">
<NameFormField
<div>
<div className="mb-1">
<NameFormField
control={control}
entityName="group"
errors={errors}
name="name"
/>
</div>

<SlugPreviewFormField
compact={true}
control={control}
entityName="group"
errors={errors}
name="name"
name="slug"
resetFunction={resetUrl}
parentPath={parentPath}
slug={currentSlug}
dirtyFields={dirtyFields}
label="Group URL"
entityName="group"
/>
</div>

<SlugPreviewFormField
compact={true}
control={control}
errors={errors}
name="slug"
resetFunction={resetUrl}
parentPath={parentPath}
slug={currentSlug}
dirtyFields={dirtyFields}
label="Group URL"
entityName="group"
/>

<DescriptionFormField
control={control}
entityName="group"
Expand Down
198 changes: 95 additions & 103 deletions client/src/features/project/components/projectMigration/ProjectMigrationDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,8 @@ export function DetailsMigration({
<span>- Resource class:</span>
{resourceClass ? (
<>
<span>{resourceClass?.name} |</span>
<span>{resourceClass?.name}</span>
<span>|</span>
<SessionRowResourceRequests resourceRequests={resourceClassData} />
</>
) : (
Expand All @@ -102,7 +103,7 @@ export function DetailsMigration({
);

const detailsSession = (
<div className={cx("ps-4", "d-flex", "flex-column", "gap-2", "pb-2")}>
<div className={cx("ps-4", "d-flex", "flex-column", "gap-3")}>
{isPinnedImage ? (
<>
<div>
Expand Down Expand Up @@ -133,18 +134,16 @@ export function DetailsMigration({
);

const containerImageInfoAlert = (
<div className="py-2">
<InfoAlert dismissible={false} timeout={0}>
This session image will not update as you make additional commits.{" "}
<ExternalLink
role="text"
showLinkIcon={true}
title="Learn more"
className={cx("text-info")}
url={Links.RENKU_2_MIGRATION_INFO}
/>
</InfoAlert>
</div>
<InfoAlert className="mb-0" dismissible={false} timeout={0}>
This session image will not update as you make additional commits.{" "}
<ExternalLink
role="text"
showLinkIcon={true}
title="Learn more"
className={cx("text-info")}
url={Links.RENKU_2_MIGRATION_INFO}
/>
</InfoAlert>
);

return (
Expand All @@ -154,7 +153,7 @@ export function DetailsMigration({
isProjectSupported &&
!showDetails &&
containerImageInfoAlert}
<div className="mb-2">
<div>
<a
className={cx(
"d-inline-block",
Expand All @@ -168,66 +167,61 @@ export function DetailsMigration({
migrated <ChevronFlippedIcon className="ms-1" flipped={showDetails} />
</a>
</div>
<div className="mb-3">
<Collapse isOpen={showDetails}>
<div className="mx-4">
<div className="py-2">
<span className="fw-bold">
<FileCode className={cx("bi", "me-1")} />
Code repository:
</span>{" "}
{codeRepository}
</div>
<div className="py-2">
<span className="fw-bold">
<FileEarmarkRuled className={cx("bi", "me-1")} /> Datasets &
Data in Git LFS:{" "}
</span>
Will continue to be available via the git lfs command line
</div>
<div className="py-2">
<span className="fw-bold">
<PlayCircle className={cx("bi", "me-1")} /> Session launcher{" "}
</span>
</div>
{detailsSession}
{!isPinnedImage &&
containerImage &&
isProjectSupported &&
showDetails &&
containerImageInfoAlert}
<div className="py-2">
<span className="fw-bold">
<BarChartSteps className={cx("bi", "me-1")} /> Workflows:{" "}
</span>
You may continue to use Renku workflows in your session via the
CLI.
</div>
<div className="py-2">
<span className="fw-bold">
<FileText className={cx("bi", "me-1")} /> Description:
</span>{" "}
{description ? (
description
) : (
<span className="text-body-secondary">
Description not found
</span>
)}
</div>
<div className="py-2">
<span className="fw-bold">
<Bookmarks className={cx("bi", "me-1")} /> Keywords:
</span>{" "}
{keywords ? (
keywords
) : (
<span className="text-body-secondary">Keywords not found</span>
)}
</div>
<Collapse isOpen={showDetails}>
<div className={cx("d-flex", "flex-column", "gap-3", "mx-4")}>
<div>
<span className="fw-bold">
<FileCode className={cx("bi", "me-1")} />
Code repository:
</span>{" "}
{codeRepository}
</div>
</Collapse>
</div>
<div>
<span className="fw-bold">
<FileEarmarkRuled className={cx("bi", "me-1")} /> Datasets & Data
in Git LFS:{" "}
</span>
Will continue to be available via the git lfs command line
</div>
<div>
<span className="fw-bold">
<PlayCircle className={cx("bi", "me-1")} /> Session launcher{" "}
</span>
</div>
{detailsSession}
{!isPinnedImage &&
containerImage &&
isProjectSupported &&
showDetails &&
containerImageInfoAlert}
<div>
<span className="fw-bold">
<BarChartSteps className={cx("bi", "me-1")} /> Workflows:{" "}
</span>
You may continue to use Renku workflows in your session via the CLI.
</div>
<div>
<span className="fw-bold">
<FileText className={cx("bi", "me-1")} /> Description:
</span>{" "}
{description ? (
description
) : (
<span className="text-body-secondary">Description not found</span>
)}
</div>
<div>
<span className="fw-bold">
<Bookmarks className={cx("bi", "me-1")} /> Keywords:
</span>{" "}
{keywords ? (
keywords
) : (
<span className="text-body-secondary">Keywords not found</span>
)}
</div>
</div>
</Collapse>
</>
);
}
Expand All @@ -239,8 +233,8 @@ export function DetailsNotIncludedInMigration() {
}, []);

return (
<div>
<div className="mb-2">
<div className={cx("d-flex", "flex-column", "gap-3")}>
<div>
<a
className={cx(
"d-inline-block",
Expand All @@ -254,34 +248,32 @@ export function DetailsNotIncludedInMigration() {
<ChevronFlippedIcon className="ms-1" flipped={showDetails} />
</a>
</div>
<div className="mb-3">
<Collapse isOpen={showDetails}>
<div className="mx-4">
<div className="py-2">
<span className="fw-bold">
<People className={cx("bi", "me-1")} /> Members:
</span>{" "}
Members will not be migrated. Please add members directly to the
Renku 2.0 project.
</div>
<div className="py-2">
<span className="fw-bold">
<Database className={cx("bi", "me-1")} /> Cloud storage:
</span>{" "}
We&apos;re sorry, cloud storage migration isn&apos;t available at
the moment. Please reconfigure your cloud storage as a Renku 2.0
Data Connector.
</div>
<div className="py-2">
<span className="fw-bold">
<CardImage className={cx("bi", "me-1")} /> Project image:
</span>{" "}
We&apos;re sorry, project image migration isn&apos;t available at
the moment.
</div>
<Collapse isOpen={showDetails}>
<div className={cx("d-flex", "flex-column", "gap-3", "mx-4")}>
<div>
<span className="fw-bold">
<People className={cx("bi", "me-1")} /> Members:
</span>{" "}
Members will not be migrated. Please add members directly to the
Renku 2.0 project.
</div>
</Collapse>
</div>
<div>
<span className="fw-bold">
<Database className={cx("bi", "me-1")} /> Cloud storage:
</span>{" "}
We&apos;re sorry, cloud storage migration isn&apos;t available at
the moment. Please reconfigure your cloud storage as a Renku 2.0
Data Connector.
</div>
<div>
<span className="fw-bold">
<CardImage className={cx("bi", "me-1")} /> Project image:
</span>{" "}
We&apos;re sorry, project image migration isn&apos;t available at
the moment.
</div>
</div>
</Collapse>
</div>
);
}
6 changes: 4 additions & 2 deletions client/src/features/project/components/projectMigration/ProjectMigrationForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
* limitations under the License.
*/

import cx from "classnames";
import { DateTime } from "luxon";
import { useEffect, useMemo } from "react";
import {
Expand All @@ -27,6 +28,7 @@ import {
UseFormWatch,
} from "react-hook-form";
import { Form } from "reactstrap";
import { ErrorAlert } from "../../../../components/Alert";
import { Loader } from "../../../../components/Loader";
import { toHumanDateTime } from "../../../../utils/helpers/DateTimeUtils";
import { GitlabProjectResponse } from "../../GitLab.types";
Expand All @@ -40,7 +42,6 @@ import {
DetailsNotIncludedInMigration,
} from "./ProjectMigrationDetails";
import ProjectMigrationFormInputs from "./ProjectMigrationFormInputs";
import { ErrorAlert } from "../../../../components/Alert";

interface MigrationFormProps {
description?: string;
Expand Down Expand Up @@ -185,6 +186,7 @@ export default function MigrationForm({

return (
<Form
className={cx("d-flex", "flex-column", "gap-3")}
id="project-migration-form"
noValidate
onSubmit={handleSubmit(onSubmit)}
Expand All @@ -199,7 +201,7 @@ export default function MigrationForm({
/>
)}
{isFetchingSessionData && (
<div className="py-2">
<div>
<Loader inline size={16} /> Loading session data...
</div>
)}
Expand Down
Loading
Loading