[Portal] Migrate Hooks page to Radix UI with tab navigation

portal/src/BlockerDialog.tsx

@@ -1,69 +1,46 @@
-import React, { useContext, useMemo } from "react";
-import {
-  IDialogContentProps,
-  Dialog,
-  DialogType,
-  DialogFooter,
-  IDialogProps,
-  IButtonProps,
-} from "@fluentui/react";
-import PrimaryButton from "./PrimaryButton";
-import DefaultButton from "./DefaultButton";
-import { Context, FormattedMessage } from "./intl";
-import { useSystemConfig } from "./context/SystemConfigContext";
+import React from "react";
+import { FormattedMessage } from "./intl";
+import { ConfirmationDialog } from "./components/v2/ConfirmationDialog/ConfirmationDialog";
 
-export interface BlockerDialogProps extends IDialogProps {
+export interface BlockerDialogProps {
+  open: boolean;
   contentTitleId: string;
   contentSubTextId: string;
   contentConfirmId?: string;
   contentCancelId?: string;
-  onDialogConfirm?: IButtonProps["onClick"];
+  onDialogConfirm?: () => void;
   onDialogDismiss?: () => void;
 }
 
 const BlockerDialog: React.VFC<BlockerDialogProps> = function BlockerDialog(
   props
 ) {
   const {
+    open,
     contentTitleId,
     contentSubTextId,
     contentConfirmId,
     contentCancelId,
     onDialogConfirm,
     onDialogDismiss,
-    ...rest
   } = props;
 
-  const { themes } = useSystemConfig();
-  const { renderToString } = useContext(Context);
-
-  const dialogContentProps: IDialogContentProps = useMemo(
-    () => ({
-      type: DialogType.normal,
-      title: <FormattedMessage id={contentTitleId} />,
-      subText: renderToString(contentSubTextId),
-    }),
-    [renderToString, contentTitleId, contentSubTextId]
-  );
-
   return (
-    <Dialog
-      dialogContentProps={dialogContentProps}
-      onDismiss={onDialogDismiss}
-      {...rest}
-    >
-      <DialogFooter>
-        <PrimaryButton
-          onClick={onDialogConfirm}
-          theme={themes.destructive}
-          text={<FormattedMessage id={contentConfirmId ?? "confirm"} />}
-        />
-        <DefaultButton
-          onClick={onDialogDismiss}
-          text={<FormattedMessage id={contentCancelId ?? "cancel"} />}
-        />
-      </DialogFooter>
-    </Dialog>
+    <ConfirmationDialog
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) {
+          onDialogDismiss?.();
+        }
+      }}
+      title={<FormattedMessage id={contentTitleId} />}
+      description={<FormattedMessage id={contentSubTextId} />}
+      confirmText={<FormattedMessage id={contentConfirmId ?? "confirm"} />}
+      cancelText={<FormattedMessage id={contentCancelId ?? "cancel"} />}
+      confirmColor="red"
+      onConfirm={() => onDialogConfirm?.()}
+      onCancel={() => onDialogDismiss?.()}
+    />
   );
 };
 

portal/src/FormContainer.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useContext, useMemo, useState } from "react";
-import { Dialog, DialogFooter, Spinner, SpinnerSize } from "@fluentui/react";
+import React, { useCallback, useContext, useState } from "react";
+import { Spinner, SpinnerSize } from "@fluentui/react";
 import { Context, FormattedMessage } from "./intl";
 import { useSystemConfig } from "./context/SystemConfigContext";
 import { FormErrorMessageBar } from "./FormErrorMessageBar";
 import PrimaryButton from "./PrimaryButton";
-import DefaultButton from "./DefaultButton";
 import DefaultLayout from "./DefaultLayout";
 import {
   FormContainerBase,
@@ -13,6 +12,7 @@ import {
 } from "./FormContainerBase";
 import ActionButton from "./ActionButton";
 import styles from "./FormContainer.module.css";
+import { ConfirmationDialog } from "./components/v2/ConfirmationDialog/ConfirmationDialog";
 
 export interface SaveButtonProps {
   labelId: string;
@@ -60,13 +60,6 @@ const FormContainer_: React.VFC<FormContainerProps> = function FormContainer_(
     setTimeout(() => setIsResetDialogVisible(false), 0);
   }, [onReset]);
 
-  const resetDialogContentProps = useMemo(() => {
-    return {
-      title: <FormattedMessage id="FormContainer.reset-dialog.title" />,
-      subText: renderToString("FormContainer.reset-dialog.message"),
-    };
-  }, [renderToString]);
-
   return (
     <>
       <DefaultLayout
@@ -93,23 +86,25 @@ const FormContainer_: React.VFC<FormContainerProps> = function FormContainer_(
           {props.children}
         </form>
       </DefaultLayout>
-      <Dialog
-        hidden={!isResetDialogVisible}
-        dialogContentProps={resetDialogContentProps}
-        onDismiss={onDismissResetDialog}
-      >
-        <DialogFooter>
-          <PrimaryButton
-            onClick={doReset}
-            theme={themes.destructive}
-            text={<FormattedMessage id="FormContainer.reset-dialog.confirm" />}
-          />
-          <DefaultButton
-            onClick={onDismissResetDialog}
-            text={<FormattedMessage id="cancel" />}
-          />
-        </DialogFooter>
-      </Dialog>
+      <ConfirmationDialog
+        open={isResetDialogVisible}
+        onOpenChange={(open) => {
+          if (!open) {
+            onDismissResetDialog();
+          }
+        }}
+        title={<FormattedMessage id="FormContainer.reset-dialog.title" />}
+        description={
+          <FormattedMessage id="FormContainer.reset-dialog.message" />
+        }
+        confirmText={
+          <FormattedMessage id="FormContainer.reset-dialog.confirm" />
+        }
+        cancelText={<FormattedMessage id="cancel" />}
+        confirmColor="red"
+        onConfirm={doReset}
+        onCancel={onDismissResetDialog}
+      />
     </>
   );
 };

portal/src/NavigationBlockerDialog.tsx

@@ -64,7 +64,7 @@ const NavigationBlockerDialog: React.VFC<NavigationBlockerDialogProps> =
 
     return (
       <BlockerDialog
-        hidden={!navigationBlockerDialog.visible}
+        open={navigationBlockerDialog.visible}
         contentTitleId="NavigationBlockerDialog.title"
         contentSubTextId="NavigationBlockerDialog.content"
         contentConfirmId="NavigationBlockerDialog.confirm"

portal/src/components/saml/EditSAMLCertificateForm.module.css

@@ -1,3 +1,121 @@
-.addButtonIcon {
-  margin: 0 10px 0 0;
+.keysTableWrapper {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+@media (min-width: 1081px) {
+  .keysTableWrapper {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .keysTableWrapper::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.keysTable {
+  min-width: 100%;
+}
+
+.keysTableHeader {
+  @apply flex w-full items-center;
+  min-width: 100%;
+  min-height: 2.75rem;
+}
+
+.keysTableHeaderCellFingerprint,
+.keysTableHeaderCellStatus,
+.keysTableHeaderCellActions {
+  @apply flex items-center px-3 py-3 text-sm font-semibold;
+  color: var(--gray-12);
+}
+
+.keysTableHeaderCellFingerprint {
+  @apply flex-1 min-w-0;
+}
+
+.keysTableHeaderCellStatus {
+  width: 6.5rem;
+  min-width: 6.5rem;
+  flex-shrink: 0;
+}
+
+.keysTableHeaderCellActions {
+  width: 3.5rem;
+  flex-shrink: 0;
+  @apply justify-end;
+}
+
+.keysTableRow {
+  @apply flex w-full items-center;
+  min-width: 100%;
+  min-height: 2.75rem;
+  border-top: 1px solid var(--gray-a6);
+  background-color: var(--gray-a2);
+}
+
+.keysTableCellFingerprint,
+.keysTableCellStatus,
+.keysTableCellActions {
+  @apply flex items-center px-3 py-3 text-sm;
+  color: var(--gray-12);
+}
+
+.keysTableCellFingerprint {
+  @apply flex min-w-0 flex-1 items-center overflow-hidden;
+}
+
+.keysTableCellFingerprintText {
+  @apply min-w-0 truncate;
+}
+
+.keysTableCellStatus {
+  width: 6.5rem;
+  min-width: 6.5rem;
+  flex-shrink: 0;
+}
+
+.keysTableCellActions {
+  width: 3.5rem;
+  flex-shrink: 0;
+  @apply justify-end;
+}
+
+.activeStatus {
+  position: relative;
+  width: fit-content;
+}
+
+.activeStatusText {
+  color: var(--green-11);
+}
+
+.activeStatusSpinner {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.activateButton {
+  @apply inline-flex cursor-pointer items-center border-0 bg-transparent p-0 text-sm font-semibold whitespace-nowrap;
+  color: var(--accent-9);
+}
+
+.activateButton:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.generateKeyButton {
+  @apply inline-flex cursor-pointer items-center gap-1 border-0 bg-transparent p-0 text-sm font-semibold;
+  color: var(--accent-9);
+}
+
+.generateKeyButton:disabled {
+  @apply cursor-not-allowed opacity-50;
 }