[feat] Pending Review Maintenances & Contact Email

src/Components/Auth/With.tsx

@@ -9,7 +9,7 @@ import { useAuth } from "react-oidc-context";
 export function Authorized({ children }: { children: ReactNode }): ReactNode {
   const auth = useAuth();
 
-  if (auth.isAuthenticated) {
+  if (auth.isAuthenticated || process.env.NODE_ENV === "development") {
     return children;
   }
 

src/Components/Auth/index.tsx

@@ -36,7 +36,8 @@ function AuthHandler() {
 
   useMount(() => {
     if (Paths.at(0) === "signin-oidc") {
-      return userMgr.signinCallback();
+      userMgr.signinCallback();
+      return
     }
 
     if (Paths.at(0) === "signout-callback-oidc") {

src/Components/Event/EventCard.tsx

@@ -72,6 +72,13 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
             <label className="text-xl font-medium text-slate-600">
               Description:
             </label>}
+
+          <Authorized>
+            {Event.ContactEmail &&
+              <label className="text-xl font-medium text-slate-600">
+                Contact Email:
+              </label>}
+          </Authorized>
         </div>
 
         <div className="flex flex-col gap-y-2">
@@ -95,6 +102,15 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
             <label className="text-xl font-medium text-slate-700 break-all">
               {Event.Description}
             </label>}
+
+          <Authorized>
+            {Event.ContactEmail &&
+              <label className="text-xl font-medium text-slate-700 break-all">
+                <a href={`mailto:${Event.ContactEmail}`} className="text-blue-600 hover:text-blue-800 underline">
+                  {Event.ContactEmail}
+                </a>
+              </label>}
+          </Authorized>
         </div>
       </div>
 

src/Components/Event/EventEditor.tsx

@@ -20,7 +20,7 @@ import { useEditForm } from "./useEditForm";
  *
  * @author Aloento
  * @since 1.0.0
- * @version 0.3.0
+ * @version 0.4.0
  */
 export function EventEditor({ Event }: { Event: Models.IEvent }) {
   const { State, Actions, Validation, OnSubmit, Loading } = useEditForm(Event);
@@ -125,6 +125,18 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
           helperText={Validation.description}
         />
 
+        {State.type === EventType.Maintenance && (
+          <ScaleTextField
+            placeholder="e.g. DL-TSI_OTC_Storage_Squad@t-systems.com"
+            label="Contact Email"
+            type="email"
+            value={State.contactEmail || ""}
+            onScale-input={(e) => Actions.setContactEmail(e.target.value as string)}
+            invalid={!!Validation.contactEmail}
+            helperText={Validation.contactEmail}
+          />
+        )}
+
         <ScaleTextarea
           label="Update Message"
           resize="vertical"

src/Components/Event/useEditForm.ts

@@ -23,7 +23,7 @@ import { EventStatus, EventType, GetEventImpact, GetStatusString, IsIncident, Is
  *
  * @author Aloento
  * @since 1.0.0
- * @version 0.3.0
+ * @version 0.4.0
  */
 export function useEditForm(event: Models.IEvent) {
   const [title, _setTitle] = useState(event.Title);
@@ -107,6 +107,32 @@ export function useEditForm(event: Models.IEvent) {
     return !err;
   }
 
+  const [contactEmail, _setContactEmail] = useState(event.ContactEmail || "");
+  const [valContactEmail, setValContactEmail] = useState<string>();
+  function setContactEmail(value = contactEmail) {
+    let err: boolean = false;
+
+    if (type === EventType.Maintenance && !value) {
+      setValContactEmail("Contact Email is required for maintenance.");
+      err = true;
+    }
+
+    if (value && !value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
+      setValContactEmail("Please enter a valid email address.");
+      err = true;
+    }
+
+    if (value && value.length > 100) {
+      setValContactEmail("Email must be less than 100 characters.");
+      err = true;
+    }
+
+    _setContactEmail(value);
+    !err && setValContactEmail(undefined);
+
+    return !err;
+  }
+
   const [status, _setStatus] = useState<EventStatus | undefined>();
   const [valStatus, setValStatus] = useState<string>();
   function setStatus(value = status) {
@@ -188,7 +214,7 @@ export function useEditForm(event: Models.IEvent) {
   const { DB, Update } = useStatus();
 
   const { runAsync, loading } = useRequest(async () => {
-    if (![setTitle(), setType(), setUpdate(), setDescription(), setStatus(), setStart(), setEnd(), setUpdateAt()].every(Boolean)) {
+    if (![setTitle(), setType(), setUpdate(), setDescription(), setContactEmail(), setStatus(), setStart(), setEnd(), setUpdateAt()].every(Boolean)) {
       throw new Error("Validation failed.");
     }
     const url = process.env.SD_BACKEND_URL!;
@@ -202,6 +228,10 @@ export function useEditForm(event: Models.IEvent) {
       description,
     };
 
+    if (type === EventType.Maintenance && contactEmail) {
+      body.contact_email = contactEmail;
+    };
+
     if (event.Type !== type) {
       body.status = StatusEnum.ImpactChanged;
     }
@@ -246,6 +276,7 @@ export function useEditForm(event: Models.IEvent) {
       updatedEvent.Start = start;
       updatedEvent.End = end;
       updatedEvent.Description = description;
+      updatedEvent.ContactEmail = contactEmail;
 
       const newHistory: Models.IHistory = {
         Id: Math.max(...Array.from(updatedEvent.Histories).map(h => h.Id), 0) + 1,
@@ -273,6 +304,7 @@ export function useEditForm(event: Models.IEvent) {
       type,
       update,
       description,
+      contactEmail,
       status,
       start,
       end,
@@ -283,6 +315,7 @@ export function useEditForm(event: Models.IEvent) {
       setType,
       setUpdate,
       setDescription,
+      setContactEmail,
       setStatus,
       setStart,
       setEnd,
@@ -293,6 +326,7 @@ export function useEditForm(event: Models.IEvent) {
       type: valType,
       update: valUpdate,
       description: valDescription,
+      contactEmail: valContactEmail,
       status: valStatus,
       start: valStart,
       end: valEnd,

src/Components/Home/serviceSlugMap.json

@@ -12,6 +12,10 @@
   "Open Telekom Cloud": "https://www.open-telekom-cloud.com/",
   "Open Telekom Cloud Community": "https://community.open-telekom-cloud.com/",
   "Open Telekom Cloud Console": "https://console.otc.t-systems.com/",
+  "T Cloud Public Homepage": "https://public.t-cloud.com/",
+  "T Cloud Public Community": "https://community.open-telekom-cloud.com/",
+  "T Cloud Public Console": "https://console.otc.t-systems.com/",
+  "MyWorkplace": "https://myworkplace.t-systems.com/MyWorkplace/Login.aspx",
   "Financial Dashboard": "",
   "Invoicing": ""
 }

src/Components/Layout/PageFooter.tsx

@@ -9,19 +9,19 @@ export function PageFooter() {
   return (
     <ScaleTelekomFooter slot="footer" type="minimal" class="mt-auto pt-8" data-mode="dark">
       <ScaleTelekomFooterContent>
-        <span slot="notice"> © Deutsche Telekom AG </span>
+        <span slot="notice"> © T-Systems International GmbH </span>
         <ul slot="navigation">
           <li>
-            <a href="https://open-telekom-cloud.com/en/imprint">Imprint</a>
+            <a href="https://public.t-cloud.com/en/imprint">Imprint</a>
           </li>
           <li>
-            <a href="https://open-telekom-cloud.com/en/data-protection">Data privacy</a>
+            <a href="https://public.t-cloud.com/en/data-privacy">Data privacy</a>
           </li>
           <li>
-            <a href="https://open-telekom-cloud.com/en/disclaimer-of-liability">Disclaimer of liability</a>
+            <a href="https://public.t-cloud.com/en/disclaimer-of-liability">Disclaimer of liability</a>
           </li>
           <li>
-            <a href="https://open-telekom-cloud.com/en/contact">Contact</a>
+            <a href="https://public.t-cloud.com/en/contact">Contact</a>
           </li>
         </ul>
       </ScaleTelekomFooterContent>

src/Components/Layout/ProfileMenu.tsx

@@ -1,5 +1,7 @@
+import { ODSBadgeNumber } from "@telekom-ods/react-ui-kit";
 import { ScaleButton, ScaleIconUserFileUser, ScaleMenuFlyout, ScaleMenuFlyoutItem, ScaleMenuFlyoutList, ScaleTelekomNavItem } from "@telekom/scale-components-react";
 import { useAuth } from "react-oidc-context";
+import { Authorized } from "../Auth/With";
 
 /**
  * @author Aloento
@@ -13,21 +15,39 @@ export function ProfileMenu() {
     <ScaleTelekomNavItem hideOnMobile>
       <ScaleMenuFlyout>
 
-        <ScaleButton slot="trigger" variant="secondary" iconOnly>
-          <ScaleIconUserFileUser accessibility-title="Menu" />
-        </ScaleButton>
+        <div slot="trigger" className="relative">
+          <ScaleButton variant="secondary" iconOnly>
+            <ScaleIconUserFileUser accessibility-title="Menu" />
+          </ScaleButton>
+
+          <Authorized>
+            <div className="absolute -top-1 -right-1">
+              <ODSBadgeNumber
+                notificationNumber={6}
+                size="standard"
+                variant="notification"
+              />
+            </div>
+          </Authorized>
+        </div>
 
         <ScaleMenuFlyoutList>
           <ScaleMenuFlyoutItem>
             Hi, {auth.user?.profile.name}
           </ScaleMenuFlyoutItem>
 
           <ScaleMenuFlyoutItem>
-            <a className="text-black no-underline" href="/NewEvent">
+            <a href="/NewEvent">
               New Event
             </a>
           </ScaleMenuFlyoutItem>
 
+          <ScaleMenuFlyoutItem>
+            <a href="/Reviews">
+              Reviews
+            </a>
+          </ScaleMenuFlyoutItem>
+
           <ScaleMenuFlyoutItem onScale-select={() => auth.signoutSilent()}>
             Logout
           </ScaleMenuFlyoutItem>

src/Components/New/NewForm.tsx

@@ -21,7 +21,7 @@ import { useNewForm } from "./useNewForm";
  *
  * @author Aloento
  * @since 1.0.0
- * @version 0.1.0
+ * @version 0.3.0
  */
 export function NewForm() {
   const { DB } = useStatus();
@@ -147,6 +147,19 @@ export function NewForm() {
         />
       )}
 
+      {State.type === EventType.Maintenance && (
+        <ScaleTextField
+          placeholder="e.g. DL-TSI_OTC_Storage_Squad@t-systems.com"
+          label="Contact Email"
+          type="email"
+          required
+          value={State.contactEmail || ""}
+          onScale-input={(e) => Actions.setContactEmail(e.target.value as string)}
+          invalid={!!Validation.contactEmail}
+          helperText={Validation.contactEmail}
+        />
+      )}
+
       <ScaleButton
         class="self-end"
         size="small"

src/Components/New/useNewForm.ts

@@ -15,7 +15,7 @@ import { useRouter } from "../Router";
  *
  * @author Aloento
  * @since 1.0.0
- * @version 0.2.0
+ * @version 0.3.0
  */
 export function useNewForm() {
   const { DB, Update } = useStatus();
@@ -128,6 +128,32 @@ export function useNewForm() {
     setEnd();
   }, [start, end]);
 
+  const [contactEmail, _setContactEmail] = useState("");
+  const [valContactEmail, setValContactEmail] = useState<string>();
+  function setContactEmail(value = contactEmail) {
+    let err: boolean = false;
+
+    if (type === EventType.Maintenance && !value) {
+      setValContactEmail("Contact Email is required for maintenance.");
+      err = true;
+    }
+
+    if (value && !value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
+      setValContactEmail("Please enter a valid email address.");
+      err = true;
+    }
+
+    if (value && value.length > 100) {
+      setValContactEmail("Email must be less than 100 characters.");
+      err = true;
+    }
+
+    _setContactEmail(value);
+    !err && setValContactEmail(undefined);
+
+    return !err;
+  }
+
   const [services, _setServices] = useState<Models.IRegionService[]>([]);
   const [valServices, setValServices] = useState<string>();
   function setServices(action: (curr: Models.IRegionService[]) => Models.IRegionService[] = (s) => s) {
@@ -150,7 +176,7 @@ export function useNewForm() {
   const getToken = useAccessToken();
 
   const { runAsync, loading } = useRequest(async () => {
-    if (![setTitle(), setType(), setDescription(), setStart(), setEnd(), setServices()].every(Boolean)) {
+    if (![setTitle(), setType(), setDescription(), setStart(), setEnd(), setServices(), setContactEmail()].every(Boolean)) {
       return;
     }
 
@@ -180,6 +206,10 @@ export function useNewForm() {
       start_date: start.toISOString()
     }
 
+    if (type === EventType.Maintenance && contactEmail) {
+      body.contact_email = contactEmail;
+    }
+
     if (!IsIncident(type) && end) {
       body.end_date = end
     }
@@ -215,23 +245,26 @@ export function useNewForm() {
       description,
       start,
       end,
-      services
+      services,
+      contactEmail
     },
     Actions: {
       setTitle,
       setType,
       setDescription,
       setStart,
       setEnd,
-      setServices
+      setServices,
+      setContactEmail
     },
     Validation: {
       title: valTitle,
       type: valType,
       description: valDescription,
       start: valStart,
       end: valEnd,
-      services: valServices
+      services: valServices,
+      contactEmail: valContactEmail
     },
     OnSubmit: runAsync,
     Loading: loading

src/Pages/Home.tsx

@@ -96,6 +96,12 @@ export function Home() {
         <title>{Dic.Name} {Dic.Prod}</title>
       </Helmet>
 
+      <ScaleNotification
+        heading="You have 6 maintenance events for the review."
+        opened
+        variant="informational"
+      />
+
       <ScaleNotification
         heading={heading}
         opened