access kc button in ManageUsersView

pvarki · Feb 3, 2025 · bd54ce6 · bd54ce6
1 parent cd0a458
commit bd54ce6
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 19 deletions.
diff --git a/src/assets/icons/kclogo.svg b/src/assets/icons/kclogo.svg
diff --git a/src/assets/locale/en.json b/src/assets/locale/en.json
@@ -162,6 +162,10 @@
   "manageUsersView.addUsers": "Add Users",
   "manageUsersView.approveUsers": "Approve Users",
   "manageUsersView.manageUsers": "Manage Users",
+  "manageUsersView.keycloakAccess": "Access Keycloak (Beta)",
+  "manageUsersView.keycloakAccessDesc1": "<strong>Keycloak</strong> is a backend service, which syncs user's roles and groups across services integrated to Deploy App. Managing groups is <strong>not</strong> necessary right now.",
+  "manageUsersView.keycloakAccessDesc2": "If you know how to use it, you may access it from the button below. Later on, user role & group management will be <strong>done directly here in Deploy App</strong> for maximum ease of use.",
+  "manageUsersView.openKeycloak": "Open Keycloak",
 
   "USERMANAGEMENTVIEW": "USERMANAGEMENTVIEW",
   "userManagement.rejectionSuccessMessage": "Success: The user has been removed.",

diff --git a/src/assets/locale/fi.json b/src/assets/locale/fi.json
@@ -163,6 +163,10 @@
   "manageUsersView.addUsers": "Lisää käyttäjiä",
   "manageUsersView.approveUsers": "Hyväksy käyttäjiä",
   "manageUsersView.manageUsers": "Hallitse käyttäjiä",
+  "manageUsersView.keycloakAccess": "Avaa Keycloak (Beta)",
+  "manageUsersView.keycloakAccessDesc1": "<strong>Keycloak</strong> on taustapalvelu, joka synkronoi käyttäjien roolit ja ryhmät Deploy App-palvelimessasi mukana olevien palveluiden välillä. Sen käyttäminen <strong>ei</strong> ole tällä hetkellä välttämätöntä.",
+  "manageUsersView.keycloakAccessDesc2": "Jos osaat käyttää Keycloakia, voit avata sen alla olevasta painikkeesta. Myöhemmin käyttäjien rooli- ja ryhmähallinta tehdään <strong>suoraan Deploy Appissa</strong>, jotta käyttökokemus olisi mahdollisimman helppo.",
+  "manageUsersView.openKeycloak": "Avaa Keycloak",
 
   "USERMANAGEMENTVIEW": "USERMANAGEMENTVIEW",
   "userManagement.rejectionSuccessMessage": "Käyttäjän hylkääminen onnistui.",

diff --git a/src/views/usermgmt/ManageUsersView.tsx b/src/views/usermgmt/ManageUsersView.tsx
@@ -3,11 +3,12 @@ import android from "../../assets/icons/qrcode.svg";
 import sanla from "../../assets/heroimages/ryhmä.jpeg";
 import apple from "../../assets/icons/trooper3.png";
 import windows from "../../assets/icons/useredi2.svg";
+import kcicon from "../../assets/icons/kclogo.svg";
 import { Layout } from "../../components/Layout";
 import { Card } from "../../components/Card";
 import { CardsContainer } from "../../components/CardsContainer";
 import { ServiceInfoCard } from "../../components/ServiceInfoCard";
-import { UnfoldableCard } from "../../components/UnfoldableCard";
+import { UnfoldableCard } from "../../components/UnfoldableCard2";
 import { Trans } from "react-i18next";
 
 export function ManageUsersView() {
@@ -17,6 +18,12 @@ export function ManageUsersView() {
     window.scrollTo(0, 60);
   }, []);
 
+  // Construct the Keycloak URL dynamically:
+  // Remove a leading "mtls." from the hostname if present,
+  // then add the "kc." prefix, port, and fixed path.
+  const currentDomain = window.location.hostname.replace(/^mtls\./, "");
+  const keycloakUrl = `https://kc.${currentDomain}:9443/admin/RASENMAEHER/console/`;
+
   return (
     <div className="pb-10">
       <Layout
@@ -40,24 +47,32 @@ export function ManageUsersView() {
 
             <UnfoldableCard
               title={<Trans i18nKey="manageUsersView.unfoldableCardTitle" />}
-              description1={
-                <Trans
-                  i18nKey="manageUsersView.unfoldableCardDescription1"
-                  components={{ strong: <strong /> }}
-                />
-              }
-              description2={
-                <Trans
-                  i18nKey="manageUsersView.unfoldableCardDescription2"
-                  components={{ strong: <strong /> }}
-                />
-              }
-              description3={
-                <Trans
-                  i18nKey="manageUsersView.unfoldableCardDescription3"
-                  components={{ strong: <strong /> }}
-                />
-              }
+              steps={[
+                {
+                  description: (
+                    <Trans
+                      i18nKey="manageUsersView.unfoldableCardDescription1"
+                      components={{ strong: <strong /> }}
+                    />
+                  ),
+                },
+                {
+                  description: (
+                    <Trans
+                      i18nKey="manageUsersView.unfoldableCardDescription2"
+                      components={{ strong: <strong /> }}
+                    />
+                  ),
+                },
+                {
+                  description: (
+                    <Trans
+                      i18nKey="manageUsersView.unfoldableCardDescription3"
+                      components={{ strong: <strong /> }}
+                    />
+                  ),
+                },
+              ]}
             />
 
             <Card
@@ -75,6 +90,45 @@ export function ManageUsersView() {
               image={windows}
               url="/app/admin/user-management"
             />
+
+            <div className="w-full mt-4">
+              <UnfoldableCard
+                title={<Trans i18nKey="manageUsersView.keycloakAccess" />}
+                styling="bg-backgroundLight w-full"
+                steps={[
+                  {
+                    description: (
+                      <Trans
+                        i18nKey="manageUsersView.keycloakAccessDesc1"
+                        components={{ strong: <strong /> }}
+                      />
+                    ),
+                  },
+                  {
+                    imageSrc: kcicon,
+                    imageClasses: "w-36 h-12 mx-auto",
+                    description: (
+                      <Trans
+                        i18nKey="manageUsersView.keycloakAccessDesc2"
+                        components={{ strong: <strong /> }}
+                      />
+                    ),
+                  },
+                ]}
+                content={
+                  <div className="w-full flex justify-center mt-4">
+                    <a
+                      href={keycloakUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block w-full max-w-[400px] mx-auto text-center px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-bold transition"
+                    >
+                      <Trans i18nKey="manageUsersView.openKeycloak" />
+                    </a>
+                  </div>
+                }
+              />
+            </div>
           </CardsContainer>
         </div>
       </Layout>