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

@@ -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"]}
                 />
               )}
             />

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={

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.",

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;
 };
 

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;