From 21c0cfcdad225b29bfabbcd6a23126a5643d9c42 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 18 Mar 2021 09:07:26 +0100
Subject: [PATCH] changed time select order + added success message (#447)

* changed time select order + added success message

fixes: #445

* show time instead of the nice from now

* made "Remaining count" wrappable
---
 src/clients/initial-access/CreateInitialAccessToken.tsx | 4 +++-
 src/clients/initial-access/InitialAccessTokenList.tsx   | 6 +++++-
 src/clients/messages.json                               | 1 +
 src/components/table-toolbar/KeycloakDataTable.tsx      | 2 ++
 src/components/time-selector/TimeSelector.tsx           | 4 +++-
 5 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/clients/initial-access/CreateInitialAccessToken.tsx b/src/clients/initial-access/CreateInitialAccessToken.tsx
index 9f179051b4..218a99d3f2 100644
--- a/src/clients/initial-access/CreateInitialAccessToken.tsx
+++ b/src/clients/initial-access/CreateInitialAccessToken.tsx
@@ -51,6 +51,7 @@ export const CreateInitialAccessToken = () => {
           token={token}
           toggleDialog={() => {
             setToken("");
+            addAlert(t("tokenSaveSuccess"), AlertVariant.success);
             history.push(`/${realm}/clients/initialAccessToken`);
           }}
         />
@@ -78,13 +79,14 @@ export const CreateInitialAccessToken = () => {
           >
             <Controller
               name="expiration"
-              defaultValue=""
+              defaultValue={86400}
               control={control}
               render={({ onChange, value }) => (
                 <TimeSelector
                   data-testid="expiration"
                   value={value}
                   onChange={onChange}
+                  units={["days", "hours", "minutes", "seconds"]}
                 />
               )}
             />
diff --git a/src/clients/initial-access/InitialAccessTokenList.tsx b/src/clients/initial-access/InitialAccessTokenList.tsx
index 18281638fc..1de09066df 100644
--- a/src/clients/initial-access/InitialAccessTokenList.tsx
+++ b/src/clients/initial-access/InitialAccessTokenList.tsx
@@ -3,6 +3,7 @@ import { useHistory, useRouteMatch } from "react-router-dom";
 import moment from "moment";
 import { useTranslation } from "react-i18next";
 import { AlertVariant, Button, ButtonVariant } from "@patternfly/react-core";
+import { wrappable } from "@patternfly/react-table";
 
 import ClientInitialAccessPresentation from "keycloak-admin/lib/defs/clientInitialAccessPresentation";
 import { KeycloakDataTable } from "../../components/table-toolbar/KeycloakDataTable";
@@ -84,7 +85,9 @@ export const InitialAccessTokenList = () => {
             name: "expiration",
             displayKey: "clients:expires",
             cellRenderer: (row) =>
-              moment(row.timestamp! * 1000 + row.expiration! * 1000).fromNow(),
+              moment(row.timestamp! * 1000 + row.expiration! * 1000).format(
+                "LLL"
+              ),
           },
           {
             name: "count",
@@ -93,6 +96,7 @@ export const InitialAccessTokenList = () => {
           {
             name: "remainingCount",
             displayKey: "clients:remainingCount",
+            transforms: [wrappable],
           },
         ]}
         emptyState={
diff --git a/src/clients/messages.json b/src/clients/messages.json
index d83aaa5005..450b994833 100644
--- a/src/clients/messages.json
+++ b/src/clients/messages.json
@@ -92,6 +92,7 @@
     "expiration": "Expiration",
     "noTokens": "No initial access tokens",
     "noTokensInstructions": "You haven't created any initial access tokens. Create an initial access token by clicking \"Create\".",
+    "tokenSaveSuccess": "New initial access token has been created",
     "tokenSaveError": "Could not create initial access token {{error}}",
     "initialAccessTokenDetails": "Initial access token details",
     "copyInitialAccessToken": "Please copy and paste the initial access token before closing as it can not be retrieved later.",
diff --git a/src/components/table-toolbar/KeycloakDataTable.tsx b/src/components/table-toolbar/KeycloakDataTable.tsx
index 81574ea515..4577b60a15 100644
--- a/src/components/table-toolbar/KeycloakDataTable.tsx
+++ b/src/components/table-toolbar/KeycloakDataTable.tsx
@@ -6,6 +6,7 @@ import {
   IActions,
   IActionsResolver,
   IFormatter,
+  ITransform,
   Table,
   TableBody,
   TableHeader,
@@ -72,6 +73,7 @@ export type Field<T> = {
   name: string;
   displayKey?: string;
   cellFormatters?: IFormatter[];
+  transforms?: ITransform[];
   cellRenderer?: (row: T) => ReactNode;
 };
 
diff --git a/src/components/time-selector/TimeSelector.tsx b/src/components/time-selector/TimeSelector.tsx
index 2e86d254b4..7ae630ffd5 100644
--- a/src/components/time-selector/TimeSelector.tsx
+++ b/src/components/time-selector/TimeSelector.tsx
@@ -33,7 +33,9 @@ export const TimeSelector = ({
     { unit: "days", label: t("times.days"), multiplier: 86400 },
   ];
 
-  const times = allTimes.filter((t) => units.includes(t.unit));
+  const times = units.map(
+    (unit) => allTimes.find((time) => time.unit === unit)!
+  );
   const defaultMultiplier = allTimes.find((time) => time.unit === units[0])
     ?.multiplier;