wip: show internal gitlab reference warning

change banner content

change banner content

Author: ciyer

client/src/components/TakeActionAlert.module.scss

@@ -0,0 +1,10 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/variables-dark";
+@import "../styles/renku_bootstrap_customization.scss";
+
+.dangerAlert {
+  --bs-danger-bg-subtle: #{tint-color(#dc3545, 0%)};
+  --bs-danger-text-emphasis: #{tint-color(#dc3545, 100%)};
+  --bs-danger-border-subtle: #{tint-color(#dc3545, 0%)};
+}

client/src/components/TakeActionAlert.tsx

@@ -0,0 +1,47 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import cx from "classnames";
+import { Alert } from "reactstrap";
+import styles from "./TakeActionAlert.module.scss";
+
+interface TakeActionAlertProps {
+  children: React.ReactNode;
+  "data-cy"?: string;
+  icon?: React.ReactNode;
+  className?: string;
+}
+export default function TakeActionAlert({
+  children,
+  icon,
+  ...props
+}: TakeActionAlertProps) {
+  return (
+    <Alert
+      color="danger"
+      isOpen
+      data-cy={props["data-cy"]}
+      className={cx(styles.dangerAlert, props.className, "overflow-y-auto")}
+    >
+      <div className={cx("d-flex", "gap-3")}>
+        {icon && <div>{icon}</div>}
+        <div className={cx("my-auto", "w-100")}>{children}</div>
+      </div>
+    </Alert>
+  );
+}

client/src/features/ProjectPageV2/ProjectPageHeader/ProjectGitLabWarnBanner.module.css

@@ -0,0 +1,10 @@
+.modalBody {
+  max-height: 50vh;
+}
+
+/* this is needed for correct alignment */
+.gitlabReferencesButton {
+  position: relative;
+  top: -2px;
+  --bs-link-color: white;
+}

client/src/features/ProjectPageV2/ProjectPageHeader/ProjectGitLabWarnBanner.tsx

@@ -0,0 +1,218 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License
+ */
+import cx from "classnames";
+import { useCallback, useState } from "react";
+import { FlagFill } from "react-bootstrap-icons";
+import { Button, ListGroup, ModalBody, ModalHeader } from "reactstrap";
+
+import ScrollableModal from "~/components/modal/ScrollableModal";
+import TakeActionAlert from "~/components/TakeActionAlert";
+import PermissionsGuard from "~/features/permissionsV2/PermissionsGuard";
+import type { Project } from "~/features/projectsV2/api/projectV2.api";
+import { useGetProjectsByProjectIdSessionLaunchersQuery } from "~/features/sessionsV2/api/sessionLaunchersV2.api";
+import type { SessionLaunchersList } from "~/features/sessionsV2/api/sessionLaunchersV2.api";
+import { useGetUserQueryState } from "~/features/usersV2/api/users.api";
+
+import useProjectPermissions from "../utils/useProjectPermissions.hook";
+
+import styles from "./ProjectGitLabWarnBanner.module.css";
+
+function projectRenkulabGitLabReferences(
+  project: Project,
+  allLaunchers: SessionLaunchersList
+) {
+  const repositories =
+    project.repositories?.filter((repo) =>
+      repo.includes("gitlab.renkulab.io")
+    ) ?? [];
+  const launchers = allLaunchers.filter((launcher) =>
+    launcher.environment.container_image?.includes("registry.renkulab.io")
+  );
+  return { repositories, launchers };
+}
+
+function doesProjectReferenceRenkulabGitLab(
+  project: Project,
+  allLaunchers: SessionLaunchersList
+) {
+  const { repositories, launchers } = projectRenkulabGitLabReferences(
+    project,
+    allLaunchers
+  );
+  return repositories.length > 0 || launchers.length > 0;
+}
+
+function GitLabReferencesMessage({
+  repositories,
+  launchers,
+}: Pick<ProjectGitLabWarnModalProps, "repositories" | "launchers">) {
+  const repoCount = repositories.length;
+  const launcherCount = launchers.length;
+  // This should not actually happen, but handle this case anyway
+  if (repoCount === 0 && launcherCount === 0) return null;
+  if (repoCount > 0 && launcherCount > 0) {
+    return (
+      <>
+        Follow these instructions to fix problems in your{" "}
+        {repositories.length === 1 ? "repository" : "repositories"} and{" "}
+        {launchers.length === 1 ? "launcher" : "launchers"}
+      </>
+    );
+  }
+  if (repoCount > 0) {
+    return (
+      <>
+        Follow these instructions to fix problems in your{" "}
+        {repositories.length === 1 ? "repository" : "repositories"}
+      </>
+    );
+  }
+  return (
+    <>
+      Follow these instructions to fix problems in your{" "}
+      {launchers.length === 1 ? "launcher" : "launchers"}
+    </>
+  );
+}
+
+interface ProjectGitLabWarnModalProps {
+  isOpen: boolean;
+  launchers: SessionLaunchersList;
+  project: Project;
+  repositories: string[];
+  title: string;
+  toggle: () => void;
+}
+
+export function ProjectGitLabWarnModal({
+  isOpen,
+  launchers,
+  project,
+  repositories,
+  title,
+  toggle,
+}: ProjectGitLabWarnModalProps) {
+  return (
+    <ScrollableModal
+      data-cy="migrate-list-modal"
+      backdrop="static"
+      isOpen={isOpen}
+      toggle={toggle}
+      size="lg"
+      centered
+    >
+      <ModalHeader toggle={toggle}>
+        <span className="fw-normal">{title} </span>
+        {project.namespace}/{project.slug}
+      </ModalHeader>
+      <ModalBody className={cx(styles.modalBody)}>
+        <ListGroup flush data-cy="repository-list">
+          {repositories.map((repo) => (
+            <span key={repo}>{repo}</span>
+          ))}
+          {launchers.map((launcher) => (
+            <span key={launcher.id}>
+              {launcher.environment.container_image}
+            </span>
+          ))}
+        </ListGroup>
+      </ModalBody>
+    </ScrollableModal>
+  );
+}
+
+interface ProjectEditorWarnBannerProps {
+  project: Project;
+  launchers: SessionLaunchersList;
+}
+function ProjectEditorWarnBanner({
+  project,
+  launchers: allLaunchers,
+}: ProjectEditorWarnBannerProps) {
+  const { repositories, launchers } = projectRenkulabGitLabReferences(
+    project,
+    allLaunchers
+  );
+  const [isModalOpen, setModalOpen] = useState(false);
+  const toggleOpen = useCallback(() => {
+    setModalOpen((open) => !open);
+  }, []);
+  return (
+    <>
+      <TakeActionAlert className="p-2" icon={null}>
+        <div className="pt-2">
+          <h2>
+            <FlagFill className={cx("bi", "me-3")} />
+            You <b>must take action</b> to avoid losing access to your data.
+          </h2>
+          <div>
+            <Button
+              className={cx("p-0", styles.gitlabReferencesButton)}
+              color="link"
+              data-cy="list-gitlab-references-link"
+              onClick={toggleOpen}
+            >
+              <GitLabReferencesMessage
+                repositories={repositories}
+                launchers={launchers}
+              />
+            </Button>
+          </div>
+        </div>
+      </TakeActionAlert>
+      {isModalOpen && (
+        <ProjectGitLabWarnModal
+          isOpen={isModalOpen}
+          launchers={launchers}
+          project={project}
+          repositories={repositories}
+          title="Repositories and Launchers referencing GitLab"
+          toggle={toggleOpen}
+        />
+      )}
+    </>
+  );
+}
+
+export default function ProjectGitLabWarnBanner({
+  project,
+}: {
+  project: Project;
+}) {
+  const { data: currentUser } = useGetUserQueryState();
+  const userPermissions = useProjectPermissions({ projectId: project.id });
+
+  const {
+    data: launchers,
+    error: launchersError,
+    isLoading: isLoadingLaunchers,
+  } = useGetProjectsByProjectIdSessionLaunchersQuery({ projectId: project.id });
+  if (currentUser == null) return null;
+  if (isLoadingLaunchers || launchersError || launchers == null) return null;
+  if (!doesProjectReferenceRenkulabGitLab(project, launchers)) return null;
+  return (
+    <PermissionsGuard
+      disabled={null}
+      enabled={
+        <ProjectEditorWarnBanner project={project} launchers={launchers} />
+      }
+      requestedPermission="write"
+      userPermissions={userPermissions}
+    />
+  );
+}

client/src/features/ProjectPageV2/ProjectPageHeader/ProjectPageHeader.tsx

@@ -26,6 +26,7 @@ import { ProjectImageView } from "../ProjectPageContent/ProjectInformation/Proje
 
 import ProjectAutostartRedirectBanner from "./ProjectAutostartRedirectBanner";
 import ProjectCopyBanner from "./ProjectCopyBanner";
+import ProjectGitLabWarnBanner from "./ProjectGitLabWarnBanner";
 import ProjectTemplateInfoBanner from "./ProjectTemplateInfoBanner";
 
 interface ProjectPageHeaderProps {
@@ -43,6 +44,7 @@ export default function ProjectPageHeader({ project }: ProjectPageHeaderProps) {
 
   return (
     <header>
+      <ProjectGitLabWarnBanner project={project} />
       <Row>
         <Col xs={12} lg={2}>
           <div className={cx("d-none", "d-lg-block")}>