WIP for migration to invite

teams-gui/src/App.js

@@ -41,8 +41,9 @@ const App = () => {
                 } else {
                     //shortcut notation
                     currentUser.superAdmin = currentUser.person.superAdmin;
-                    currentUser.superAdminModus = false;
+                    currentUser.superAdminModus = currentUser.superAdmin;
                     setUser(currentUser);
+                    setSuperAdmin(currentUser.superAdminModus);
                     setLoading(false);
                 }
             })

teams-gui/src/api/index.js

@@ -197,6 +197,14 @@ export function changeRole(membershipProperties) {
     return postPutJson("memberships", membershipProperties);
 }
 
+export function teamInviteAppDetails(id) {
+    return fetchJson(`invite-app/${id}`)
+}
+
+export function teamInviteAppMigrate(id) {
+    return postPutJson("invite-app/migrate", {id: id}, "PUT");
+}
+
 export function changeExpiryDate(membershipExpiryDate) {
     return postPutJson("memberships/expiry-date", membershipExpiryDate);
 }

teams-gui/src/components/MigrateTeamForm.js

@@ -0,0 +1,92 @@
+import I18n from "i18n-js";
+import {React, useEffect, useState} from "react";
+import "./MigrateTeamForm.scss";
+import {ReactComponent as BackIcon} from "../icons/arrow-left-1.svg";
+import {teamInviteAppDetails} from "../api";
+import {SpinnerField} from "./SpinnerField";
+import {Button} from "./Button";
+
+export const MigrateTeamForm = ({migrateTeam, user, team, setShowForm}) => {
+
+    const [loaded, setLoaded] = useState(false);
+    const [teamDetails, setTeamDetails] = useState(false);
+
+    useEffect(() => {
+        teamInviteAppDetails(team.id).then(res => {
+            setTeamDetails(res);
+            setLoaded(true);
+        })
+    }, [team])
+
+    if (!loaded) {
+        return <SpinnerField/>;
+    }
+
+    return (
+        <div className="migrate-teams-form-container">
+            <button className="back" onClick={() => {
+                setShowForm(false);
+                document.title = I18n.t("headerTitles.index", {page: I18n.t("headerTitles.team-details")});
+                window.scrollTo(0, 0);
+            }}>
+                <BackIcon/><span>{I18n.t("forms.back")}</span>
+            </button>
+            <h2>{I18n.t("migrateTeam.header")}</h2>
+            <p>{I18n.t("migrateTeam.info")}</p>
+
+            <table>
+                <thead>
+                <tr>
+                    <th className={"attr"}>{I18n.t("migrateTeam.table.attribute")}</th>
+                    <th className={"value"}>{I18n.t("migrateTeam.table.value")}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {teamDetails.applications.map(application => <>
+                    <tr>
+                        <td className={"instance"} colSpan={2}>{I18n.t("migrateTeam.table.application")}</td>
+                    </tr>
+                    <tr>
+                        <td>{I18n.t("migrateTeam.table.manageId")}</td>
+                        <td>{application.manageId}</td>
+                    </tr>
+                    <tr>
+                        <td>{I18n.t("migrateTeam.table.manageType")}</td>
+                        <td>{application.manageType}</td>
+                    </tr>
+                    <tr>
+                        <td>{I18n.t("migrateTeam.table.landingPage")}</td>
+                        <td>{application.landingPage}</td>
+                    </tr>
+                </>)}
+                {teamDetails.memberships.map(membership => <>
+                    <tr>
+                        <td className={"instance"} colSpan={2}>{I18n.t("migrateTeam.table.membership", {name: membership.person.name})}</td>
+                    </tr>
+                    <tr>
+                        <td>{I18n.t("migrateTeam.table.role")}</td>
+                        <td>{membership.role}</td>
+                    </tr>
+                    <tr>
+                        <td>{I18n.t("migrateTeam.table.urn")}</td>
+                        <td>{membership.person.urn}</td>
+                    </tr>
+                    <tr>
+                        <td>{I18n.t("migrateTeam.table.schacHome")}</td>
+                        <td>{membership.person.schacHomeOrganization}</td>
+                    </tr>
+                    <tr>
+                        <td>{I18n.t("migrateTeam.table.email")}</td>
+                        <td>{membership.person.email}</td>
+                    </tr>
+                </>) }
+                </tbody>
+            </table>
+            <div className={"actions"}>
+                <Button onClick={migrateTeam} txt={I18n.t("migrateTeam.migrate")}/>
+            </div>
+
+
+        </div>
+    );
+};

teams-gui/src/components/MigrateTeamForm.scss

@@ -0,0 +1,84 @@
+@import "../styles/vars.scss";
+
+div.migrate-teams-form-container {
+    display: flex;
+    flex-direction: column;
+    width: 75%;
+
+    @media (max-width: $width-app) {
+        width: 100%;
+        padding: 0 10px 10px 10px;
+    }
+
+    .back {
+        margin: 25px 0;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        color: $primary-blue;
+        background-color: transparent;
+        border: none;
+        font-family: "Source Sans Pro", sans-serif;
+        font-size: 16px;
+        max-width: 100px;
+
+        svg {
+            width: 16px;
+            height: auto;
+            margin-right: 14px;
+        }
+    }
+
+    p {
+        margin: 25px 0 0 0;
+
+        &.last {
+            margin: 25px 0;
+        }
+    }
+
+    table {
+        margin: 20px 0 40px 0;
+
+        th, td {
+            padding: 10px 0;
+
+            &.attr {
+                width: 35%;
+            }
+
+            &.value {
+                width: 65%;
+            }
+
+        }
+
+        thead {
+            tr {
+                border-bottom: 1px solid black;
+            }
+        }
+
+        tbody {
+            tr {
+                border-bottom: 1px solid $primary-grey;
+                td {
+                    &.instance {
+                        font-weight: 600;
+                    }
+                }
+            }
+        }
+
+    }
+
+    div.actions {
+        display: flex;
+        margin-bottom: 25px;
+
+        a {
+            margin: 0 25px 25px auto;
+        }
+    }
+}
+

teams-gui/src/locale/en.js

@@ -18,6 +18,7 @@ I18n.translations.en = {
         "teams": "Join request",
         "join-request": "Join request",
         "add-members": "Add members",
+        "migrate": "Migrate team",
         "include-team" : "Include team",
         "missing-attributes": "Missing attributes",
     },
@@ -32,7 +33,8 @@ I18n.translations.en = {
     myteams: {
         tabs: {
             myTeams: "My teams",
-            publicTeams: "Public teams"
+            publicTeams: "Public teams",
+            migrations: "Invite migration"
         },
         columns: {
             title: "Team name",
@@ -198,12 +200,14 @@ I18n.translations.en = {
         manager: "Manager",
         admin: "Admin",
         owner: "Owner",
+        superUser: "Superuser",
         title: "You're {{role}}"
     },
     details: {
         leave: "Leave team",
         delete: "Delete team",
         edit: "Edit team",
+        migrate: "Migrate",
         confirmations: {
             leave: "Are you sure you want to leave this team?",
             delete: "Are you sure you want to delete this team?"
@@ -349,7 +353,25 @@ I18n.translations.en = {
             email: "Email"
         }
     },
-
+    migrateTeam: {
+        header: "Migration",
+        info: "Review the applications and schacHome values of the persons and hit 'Migrate' to transfer this team to the invite application. The team will be deleted after an successful migration.",
+        migrate: "Migrate",
+        table: {
+            attribute: "Attribute",
+            value: "Value",
+            name: "Name",
+            application: "Application",
+            manageId: "Manage identifier",
+            manageType: "Entity type",
+            landingPage: "Landing page",
+            membership: "Membership {{name}}",
+            role: "Role",
+            urn: "Unspecified urn",
+            schacHome: "SchacHome organization",
+            email: "Email"
+        }
+    }
 };
 
 export default I18n.translations.en;

teams-gui/src/locale/nl.js

@@ -18,6 +18,7 @@ I18n.translations.nl = {
         "teams": "Toetredingsverzoek",
         "join-request": "Toetredingsverzoek",
         "add-members": "Leden toevoegen",
+        "migrate": "Migreer team",
         "include-team" : "Team koppelen",
         "missing-attributes": "Missende attributes",
     },
@@ -32,7 +33,8 @@ I18n.translations.nl = {
     myteams: {
         tabs: {
             myTeams: "Mijn teams",
-            publicTeams: "Publieke teams"
+            publicTeams: "Publieke teams",
+            migrations: "Invite migratie"
         },
         columns: {
             title: "Teamnaam",
@@ -198,12 +200,14 @@ I18n.translations.nl = {
         manager: "Manager",
         admin: "Beheerder",
         owner: "Eigenaar",
+        superUser: "Superuser",
         title: "Je bent {{role}}"
     },
     details: {
         leave: "Verlaat team",
         delete: "Verwijder team",
         edit: "Bewerk team",
+        migrate: "Migreer",
         confirmations: {
             leave: "Weet je zeker dat je dit team wilt verlaten?",
             delete: "Weet je zeker dat je dit team wilt verwijderen?"

teams-gui/src/pages/TeamDetails.js

@@ -21,6 +21,7 @@ import {
     getTeamDetailByPublicLink,
     rejectJoinRequest,
     resetPublicLink,
+    teamInviteAppMigrate,
 } from "../api";
 import I18n from "i18n-js";
 import {ActionMenu} from "../components/ActionMenu";
@@ -51,6 +52,7 @@ import {setFlash} from "../flash/events";
 import TeamWelcomeDialog from "../components/TeamWelcomeDialog";
 import {MarkDown} from "../components/MarkDown";
 import {DateField} from "../components/DateField";
+import {MigrateTeamForm} from "../components/MigrateTeamForm";
 
 let currentExpiryDate;
 
@@ -69,6 +71,7 @@ const TeamDetail = ({user, showMembers = false}) => {
     });
     const [isNewTeam, setIsNewTeam] = useState(showMembers);
     const [showAddMembersForm, setShowAddMembersForm] = useState(showMembers);
+    const [showMigrateForm, setShowShowMigrateForm] = useState(showMembers);
     const [alerts, setAlerts] = useState([]);
     const [searchQuery, setSearchQuery] = useState("");
     const [memberList, setMembersList] = useState([]);
@@ -687,6 +690,19 @@ const TeamDetail = ({user, showMembers = false}) => {
         navigate(`/edit-team/${team.id}`);
     }
 
+    const startMigrationForm = () => {
+        addHistoryState();
+        setShowAddMembersForm(false);
+        setShowAddAdminsButton(false);
+        setShowShowMigrateForm(true);
+        document.title = I18n.t("headerTitles.index", {page: I18n.t("headerTitles.migrate")});
+    }
+
+    const migrateTeam = () => {
+        teamInviteAppMigrate(team.id)
+            .then(() => navigate("/"));
+    }
+
     const processDeleteTeam = (showConfirmation) => {
         if (showConfirmation) {
             setConfirmation({
@@ -724,6 +740,12 @@ const TeamDetail = ({user, showMembers = false}) => {
                 action: () => processDeleteTeam(true),
             });
         }
+        if (user.superAdminModus) {
+            actions.push({
+                name: I18n.t("details.migrate"),
+                action: () => startMigrationForm(),
+            })
+        }
         return actions;
     };
 
@@ -826,7 +848,8 @@ const TeamDetail = ({user, showMembers = false}) => {
                 />
             )}
             {renderAlertBanners()}
-            {(!showAddMembersForm && !selectedJoinRequest && !selectedInvitation && !showExternalTeams && !invitationInvalid) && (
+            {(!showAddMembersForm && !selectedJoinRequest && !selectedInvitation && !showExternalTeams && !invitationInvalid
+            && !showMigrateForm) && (
                 <div className="team-members">
                     {!team.hideMembers && <h2>{I18n.t("teamDetails.members")} ({memberList.length})</h2>}
                     {team.hideMembers && <h3>{I18n.t("teamDetails.hideMembers")}</h3>}
@@ -891,6 +914,11 @@ const TeamDetail = ({user, showMembers = false}) => {
                                                      user={user}
                                                      team={team}
                                                      setShowForm={setShowExternalTeams}/>}
+
+            {showMigrateForm && <MigrateTeamForm migrateTeam={migrateTeam}
+                                                 user={user}
+                                                 team={team}
+                                                 setShowForm={setShowShowMigrateForm}/>}
         </Page>
     );
 };

teams-gui/src/utils/roles.js

@@ -52,6 +52,9 @@ export function isOnlyAdmin(team, currentUser) {
 }
 
 export const actionDropDownTitle = (team, user) => {
+    if (user.superAdminModus) {
+        return I18n.t("roles.title", {role: I18n.t("roles.superUser")});
+    }
     const membership = getMembership(team, user);
     if (!membership) {
         return I18n.t("roles.title", {role: I18n.t("roles.guest")});