diff --git a/web/packages/shared/components/AccessRequests/NewRequest/useSpecifiableFields.ts b/web/packages/shared/components/AccessRequests/NewRequest/useSpecifiableFields.ts
new file mode 100644
index 0000000000000..ff3dc5463f9ec
--- /dev/null
+++ b/web/packages/shared/components/AccessRequests/NewRequest/useSpecifiableFields.ts
@@ -0,0 +1,176 @@
+import { useState } from 'react';
+
+import { Option } from 'shared/components/Select';
+import {
+ getPendingRequestDurationOptions,
+ ReviewerOption,
+} from 'shared/components/AccessRequests/NewRequest';
+import { AccessRequest } from 'shared/services/accessRequests';
+
+import {
+ getDurationOptionIndexClosestToOneWeek,
+ getDurationOptionsFromStartTime,
+} from '../AccessDuration/durationOptions';
+
+export function useSpecifiableFields() {
+ /**
+ * Fetched response from `createAccessRequest` with dry run enabled.
+ * Contains max time options (to calculate max duration and requestTTL options)
+ * and suggested reviewers that were available both statically (from roles)
+ * and dynamically (from access lists).
+ */
+ const [dryRunResponse, setDryRunResponse] = useState
();
+
+ /**
+ * Fetched response from `fetchResourceRequestRoles`.
+ * Required roles to gain access to the resources requested.
+ */
+ const [resourceRequestRoles, setResourceRequestRoles] = useState(
+ []
+ );
+
+ const [selectedResourceRequestRoles, setSelectedResourceRequestRoles] =
+ useState([]);
+
+ /**
+ * User selected reviewers from suggested reviewers options and/or
+ * any other reviewers they manually added.
+ */
+ const [selectedReviewers, setSelectedReviewers] = useState(
+ []
+ );
+
+ /**
+ * Specifies when the access request can be "assumed" by.
+ * No startTime means access request is to be available
+ * to assume immediately.
+ */
+ const [startTime, setStartTime] = useState();
+
+ /**
+ * Specifies how long the access request should last for.
+ * Duration countdown starts from access request creation.
+ * Resets when startTime changes.
+ */
+ const [maxDuration, setMaxDuration] = useState>();
+
+ /**
+ * How long the request can be in a PENDING state before it expires.
+ * Resets when startTime changes.
+ */
+ const [pendingRequestTtl, setPendingRequestTtl] = useState>();
+
+ /**
+ * Options for shortening or extending pending TTL.
+ */
+ let pendingRequestTtlOptions: Option[] = [];
+ /**
+ * Options for extending or shortening the access request duration.
+ */
+ let maxDurationOptions: Option[] = [];
+
+ if (dryRunResponse) {
+ pendingRequestTtlOptions = getPendingRequestDurationOptions(
+ dryRunResponse.created,
+ maxDuration.value
+ );
+ maxDurationOptions = getDurationOptionsFromStartTime(
+ startTime,
+ dryRunResponse
+ );
+ }
+
+ function preselectPendingRequestTtlOption(
+ newMaxDuration: number,
+ dryRequestCreated: Date
+ ) {
+ const newRequestTtlOptions = getPendingRequestDurationOptions(
+ dryRequestCreated,
+ newMaxDuration
+ );
+ const ttlIndex = getDurationOptionIndexClosestToOneWeek(
+ newRequestTtlOptions,
+ dryRequestCreated
+ );
+ setPendingRequestTtl(newRequestTtlOptions[ttlIndex]);
+ }
+
+ function onMaxDurationChange(newMaxDurationOption: Option) {
+ setMaxDuration(newMaxDurationOption);
+ // Re-set pending request TTL, since pending duration
+ // can't be greater than max duration.
+ preselectPendingRequestTtlOption(
+ newMaxDurationOption.value,
+ dryRunResponse.created
+ );
+ }
+
+ /**
+ * An empty start date will default to dry run's response created date.
+ */
+ function onStartTimeChange(start?: Date) {
+ updateStartAndDurationFields(start, dryRunResponse);
+ }
+
+ function updateStartAndDurationFields(
+ start: Date,
+ dryRequest: AccessRequest
+ ) {
+ setStartTime(start);
+
+ // Pre-select default max duration.
+ const newDurationOpts = getDurationOptionsFromStartTime(start, dryRequest);
+
+ const durationIndex = getDurationOptionIndexClosestToOneWeek(
+ newDurationOpts,
+ start || dryRequest.created
+ );
+ const newMaxDuration = newDurationOpts[durationIndex];
+ setMaxDuration(newMaxDuration);
+
+ preselectPendingRequestTtlOption(newMaxDuration.value, dryRequest.created);
+ }
+
+ /**
+ * An empty dry run request will just set the response to null.
+ * Teleterm requires clearing this response when user closes
+ * checkout.
+ */
+ function onDryRunChange(dryRequest?: AccessRequest) {
+ setDryRunResponse(dryRequest);
+
+ if (dryRequest) {
+ // Initialize fields.
+ updateStartAndDurationFields(null /* startTime */, dryRequest);
+
+ // Initially select suggested reviewers for the requestor.
+ const reviewers = dryRequest.reviewers.map(r => r.name);
+ setSelectedReviewers(
+ reviewers.map(r => ({
+ value: r,
+ label: r,
+ isSelected: true,
+ }))
+ );
+ }
+ }
+
+ return {
+ selectedReviewers,
+ setSelectedReviewers,
+ resourceRequestRoles,
+ setResourceRequestRoles,
+ selectedResourceRequestRoles,
+ setSelectedResourceRequestRoles,
+ maxDuration,
+ onMaxDurationChange,
+ maxDurationOptions,
+ pendingRequestTtl,
+ setPendingRequestTtl,
+ pendingRequestTtlOptions,
+ dryRunResponse,
+ startTime,
+ onStartTimeChange,
+ onDryRunChange,
+ };
+}
diff --git a/web/packages/shared/components/AccessRequests/fixtures/index.ts b/web/packages/shared/components/AccessRequests/fixtures/index.ts
index 241d7a2752bbf..24aabcd94d5fe 100644
--- a/web/packages/shared/components/AccessRequests/fixtures/index.ts
+++ b/web/packages/shared/components/AccessRequests/fixtures/index.ts
@@ -36,7 +36,11 @@ export const dryRunResponse: AccessRequest = {
sessionTTL: new Date('2024-02-15T14:51:03.999893Z'),
sessionTTLDuration: '',
reviews: [],
- reviewers: [],
+ reviewers: [
+ { name: 'bob', state: '' },
+ { name: 'cat', state: '' },
+ { name: 'george washington', state: '' },
+ ],
thresholdNames: ['default'],
resources: [],
assumeStartTime: null,
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
index 5e2678e967e20..2217609b32b7b 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/AccessRequestCheckout.tsx
@@ -87,7 +87,6 @@ export function AccessRequestCheckout() {
clearCreateAttempt,
data,
shouldShowClusterNameColumn,
- suggestedReviewers,
selectedReviewers,
setSelectedReviewers,
assumedRequests,
@@ -95,10 +94,14 @@ export function AccessRequestCheckout() {
goToRequestsList,
setShowCheckout,
maxDuration,
- setMaxDuration,
+ onMaxDurationChange,
+ maxDurationOptions,
dryRunResponse,
- requestTTL,
- setRequestTTL,
+ pendingRequestTtl,
+ setPendingRequestTtl,
+ pendingRequestTtlOptions,
+ startTime,
+ onStartTimeChange,
} = useAccessRequestCheckout();
const isRoleRequest = data[0]?.kind === 'role';
@@ -110,7 +113,6 @@ export function AccessRequestCheckout() {
// We should rather detect how much space we have,
// but for simplicity we only count items.
const moreToShow = Math.max(data.length - MAX_RESOURCES_IN_BAR_TO_SHOW, 0);
-
return (
<>
{data.length > 0 && !isCollapsed() && (
@@ -241,7 +243,6 @@ export function AccessRequestCheckout() {
setSelectedResourceRequestRoles={setSelectedResourceRequestRoles}
createRequest={createRequest}
clearAttempt={clearCreateAttempt}
- reviewers={suggestedReviewers}
selectedReviewers={selectedReviewers}
setSelectedReviewers={setSelectedReviewers}
requireReason={false}
@@ -250,9 +251,13 @@ export function AccessRequestCheckout() {
fetchStatus={'loaded'}
dryRunResponse={dryRunResponse}
maxDuration={maxDuration}
- setMaxDuration={setMaxDuration}
- requestTTL={requestTTL}
- setRequestTTL={setRequestTTL}
+ onMaxDurationChange={onMaxDurationChange}
+ maxDurationOptions={maxDurationOptions}
+ pendingRequestTtl={pendingRequestTtl}
+ pendingRequestTtlOptions={pendingRequestTtlOptions}
+ setPendingRequestTtl={setPendingRequestTtl}
+ startTime={startTime}
+ onStartTimeChange={onStartTimeChange}
/>
)}
diff --git a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
index fd638cf528bd1..11f78ea5ebd09 100644
--- a/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
+++ b/web/packages/teleterm/src/ui/AccessRequestCheckout/useAccessRequestCheckout.ts
@@ -22,15 +22,13 @@ import { Timestamp } from 'gen-proto-ts/google/protobuf/timestamp_pb';
import useAttempt from 'shared/hooks/useAttemptNext';
import {
- ReviewerOption,
getDryRunMaxDuration,
PendingListItem,
} from 'shared/components/AccessRequests/NewRequest';
+import { useSpecifiableFields } from 'shared/components/AccessRequests/NewRequest/useSpecifiableFields';
import { CreateRequest } from 'shared/components/AccessRequests/Shared/types';
-import { Option } from 'shared/components/Select';
-
import { useAppContext } from 'teleterm/ui/appContextProvider';
import {
PendingAccessRequest,
@@ -49,8 +47,6 @@ import { ResourceKind } from '../DocumentAccessRequests/NewRequest/useNewRequest
import { makeUiAccessRequest } from '../DocumentAccessRequests/useAccessRequests';
-import type { AccessRequest } from 'shared/services/accessRequests';
-
export default function useAccessRequestCheckout() {
const ctx = useAppContext();
ctx.workspacesService.useState();
@@ -59,33 +55,28 @@ export default function useAccessRequestCheckout() {
ctx.workspacesService?.getActiveWorkspace()?.localClusterUri;
const rootClusterUri = ctx.workspacesService?.getRootClusterUri();
- // Contains max time options (to calculate max duration and requestTTL options)
- // and suggested reviewers that were available both statically (from roles)
- // and dynamically (from access lists).
- const [dryRunResponse, setDryRunResponse] = useState();
- // The reviewers defined in the users roles (static) and access list owners
- // (dynamic).
- const [suggestedReviewers, setSuggestedReviewers] = useState([]);
- // User selected reviewers from suggested reviewers options and/or
- // any other reviewers they manually added.
- const [selectedReviewers, setSelectedReviewers] = useState(
- []
- );
-
- // Access request lifetime upon creation.
- // Duration countdown starts from access request creation.
- const [maxDuration, setMaxDuration] = useState>();
- // How long the request can be in a PENDING state before it expires.
- const [requestTTL, setRequestTTL] = useState>();
+ const {
+ selectedReviewers,
+ setSelectedReviewers,
+ resourceRequestRoles,
+ setResourceRequestRoles,
+ selectedResourceRequestRoles,
+ setSelectedResourceRequestRoles,
+ maxDuration,
+ onMaxDurationChange,
+ maxDurationOptions,
+ pendingRequestTtl,
+ setPendingRequestTtl,
+ pendingRequestTtlOptions,
+ dryRunResponse,
+ onDryRunChange,
+ startTime,
+ onStartTimeChange,
+ } = useSpecifiableFields();
const [showCheckout, setShowCheckout] = useState(false);
const [hasExited, setHasExited] = useState(false);
const [requestedCount, setRequestedCount] = useState(0);
- const [resourceRequestRoles, setResourceRequestRoles] = useState(
- []
- );
- const [selectedResourceRequestRoles, setSelectedResourceRequestRoles] =
- useState([]);
const { attempt: createRequestAttempt, setAttempt: setCreateRequestAttempt } =
useAttempt('');
@@ -100,15 +91,18 @@ export default function useAccessRequestCheckout() {
workspaceAccessRequest?.getPendingAccessRequest();
useEffect(() => {
- // Do a new dry run per checkout to get the latest time options
- // and latest calculated suggested reviewers.
- if (showCheckout) {
+ // Do a new dry run per changes to pending data
+ // to get the latest time options and latest calculated
+ // suggested reviewers.
+ // Options and reviewers can change depending on the selected
+ // roles or resources.
+ if (showCheckout && requestedCount == 0) {
performDryRun();
}
- }, [showCheckout]);
+ }, [showCheckout, pendingAccessRequest]);
useEffect(() => {
- if (!pendingAccessRequest) {
+ if (!pendingAccessRequest || requestedCount > 0) {
return;
}
@@ -147,7 +141,7 @@ export default function useAccessRequestCheckout() {
) {
clearCreateAttempt();
setRequestedCount(0);
- setDryRunResponse(null);
+ onDryRunChange(null /* set dryRunResponse to null */);
}
}, [showCheckout, hasExited, createRequestAttempt.status]);
@@ -280,18 +274,7 @@ export default function useAccessRequestCheckout() {
setCreateRequestAttempt({ status: '' });
const accessRequest = makeUiAccessRequest(teletermAccessRequest);
- setDryRunResponse(accessRequest);
-
- const reviewers = accessRequest.reviewers.map(r => r.name).sort();
- setSuggestedReviewers(reviewers);
- // Initially select suggested reviewers for the requestor.
- setSelectedReviewers(
- reviewers.map(r => ({
- value: r,
- label: r,
- isSelected: true,
- }))
- );
+ onDryRunChange(accessRequest);
}
async function createRequest(req: CreateRequest) {
@@ -371,14 +354,17 @@ export default function useAccessRequestCheckout() {
createRequestAttempt,
collapseBar,
setShowCheckout,
- suggestedReviewers,
selectedReviewers,
setSelectedReviewers,
dryRunResponse,
maxDuration,
- setMaxDuration,
- requestTTL,
- setRequestTTL,
+ onMaxDurationChange,
+ maxDurationOptions,
+ pendingRequestTtl,
+ setPendingRequestTtl,
+ pendingRequestTtlOptions,
+ startTime,
+ onStartTimeChange,
};
}