added component to set lifespan of token (#955)

src/clients/advanced/AdvancedSettings.tsx

@@ -14,6 +14,7 @@ import {
 import { FormAccess } from "../../components/form-access/FormAccess";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
 import { TimeSelector } from "../../components/time-selector/TimeSelector";
+import { TokenLifespan } from "./TokenLifespan";
 
 type AdvancedSettingsProps = {
   control: Control<Record<string, any>>;
@@ -60,32 +61,13 @@ export const AdvancedSettings = ({
       )}
       {protocol === "openid-connect" && (
         <>
-          <FormGroup
-            label={t("accessTokenLifespan")}
-            fieldId="accessTokenLifespan"
-            labelIcon={
-              <HelpItem
-                helpText="clients-help:accessTokenLifespan"
-                forLabel={t("accessTokenLifespan")}
-                forID={t(`common:helpLabel`, {
-                  label: t("accessTokenLifespan"),
-                })}
-              />
-            }
-          >
-            <Controller
+          <TokenLifespan
+            id="accessTokenLifespan"
             name="attributes.access-token-lifespan"
             defaultValue=""
-              control={control}
-              render={({ onChange, value }) => (
-                <TimeSelector
             units={["minutes", "days", "hours"]}
-                  value={value}
-                  onChange={onChange}
+            control={control}
           />
-              )}
-            />
-          </FormGroup>
 
           <FormGroup
             label={t("oAuthMutual")}

src/clients/advanced/TokenLifespan.tsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  FormGroup,
+  Select,
+  SelectOption,
+  SelectVariant,
+  Split,
+  SplitItem,
+} from "@patternfly/react-core";
+
+import {
+  TimeSelector,
+  Unit,
+} from "../../components/time-selector/TimeSelector";
+import { HelpItem } from "../../components/help-enabler/HelpItem";
+
+type TokenLifespanProps = {
+  id: string;
+  name: string;
+  defaultValue: string;
+  control: Control<FieldValues>;
+  units?: Unit[];
+};
+
+const never = "tokenLifespan.never";
+const expires = "tokenLifespan.expires";
+
+export const TokenLifespan = ({
+  id,
+  name,
+  defaultValue,
+  control,
+  units,
+}: TokenLifespanProps) => {
+  const { t } = useTranslation("clients");
+  const [open, setOpen] = useState(false);
+
+  return (
+    <FormGroup
+      label={t(id)}
+      fieldId={id}
+      labelIcon={
+        <HelpItem
+          helpText={`clients-help:${id}`}
+          forLabel={t(id)}
+          forID={t(`common:helpLabel`, {
+            label: t(id),
+          })}
+        />
+      }
+    >
+      <Controller
+        name={name}
+        defaultValue={defaultValue}
+        control={control}
+        render={({ onChange, value }) => (
+          <Split hasGutter>
+            <SplitItem>
+              <Select
+                variant={SelectVariant.single}
+                onToggle={(isExpanded) => setOpen(isExpanded)}
+                isOpen={open}
+                onSelect={(_, value) => {
+                  onChange(value);
+                  setOpen(false);
+                }}
+                selections={[
+                  typeof value === "number" && value !== -1
+                    ? t(expires)
+                    : t(never),
+                ]}
+              >
+                <SelectOption value={-1}>{t(never)}</SelectOption>
+                <SelectOption value={60}>{t(expires)}</SelectOption>
+              </Select>
+            </SplitItem>
+            <SplitItem>
+              {typeof value === "number" && value !== -1 && (
+                <TimeSelector units={units} value={value} onChange={onChange} />
+              )}
+            </SplitItem>
+          </Split>
+        )}
+      />
+    </FormGroup>
+  );
+};

src/clients/messages.ts

@@ -245,5 +245,9 @@ export default {
     importFile: "Import file",
     importSuccess: "New certificate imported",
     importError: "Could not import certificate {{error}}",
+    tokenLifespan: {
+      expires: "Expires in",
+      never: "Never expires",
+    },
   },
 };