Move the shared part of access requests UI to OSS

web/packages/shared/components/AccessRequests/AccessDuration/AccessDurationRequest.tsx

@@ -0,0 +1,101 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { useState, useEffect } from 'react';
+import { Flex, LabelInput, Text } from 'design';
+
+import Select, { Option } from 'shared/components/Select';
+import { ToolTipInfo } from 'shared/components/ToolTip';
+
+import { AccessRequest } from 'shared/services/accessRequests';
+
+import {
+  getDurationOptionIndexClosestToOneWeek,
+  getDurationOptionsFromStartTime,
+} from './durationOptions';
+
+export function AccessDurationRequest({
+  assumeStartTime,
+  accessRequest,
+  maxDuration,
+  setMaxDuration,
+}: {
+  assumeStartTime: Date;
+  accessRequest: AccessRequest;
+  maxDuration: Option<number>;
+  setMaxDuration(s: Option<number>): void;
+}) {
+  // Options for extending or shortening the access request duration.
+  const [durationOptions, setDurationOptions] = useState<Option<number>[]>([]);
+
+  useEffect(() => {
+    if (!assumeStartTime) {
+      defaultDuration();
+    } else {
+      updateAccessDuration(assumeStartTime);
+    }
+  }, [assumeStartTime]);
+
+  function defaultDuration() {
+    const created = accessRequest.created;
+    const options = getDurationOptionsFromStartTime(created, accessRequest);
+
+    setDurationOptions(options);
+    if (options.length > 0) {
+      const durationIndex = getDurationOptionIndexClosestToOneWeek(
+        options,
+        accessRequest.created
+      );
+      setMaxDuration(options[durationIndex]);
+    }
+  }
+
+  function updateAccessDuration(start: Date) {
+    const updatedDurationOpts = getDurationOptionsFromStartTime(
+      start,
+      accessRequest
+    );
+
+    const durationIndex = getDurationOptionIndexClosestToOneWeek(
+      updatedDurationOpts,
+      start
+    );
+
+    setMaxDuration(updatedDurationOpts[durationIndex]);
+    setDurationOptions(updatedDurationOpts);
+  }
+
+  return (
+    <LabelInput typography="body2" color="text.slightlyMuted">
+      <Flex alignItems="center">
+        <Text mr={1}>Access Duration</Text>
+        <ToolTipInfo>
+          How long you would be given elevated privileges. Note that the time it
+          takes to approve this request will be subtracted from the duration you
+          requested.
+        </ToolTipInfo>
+      </Flex>
+
+      <Select
+        options={durationOptions}
+        onChange={setMaxDuration}
+        value={maxDuration}
+      />
+    </LabelInput>
+  );
+}

web/packages/shared/components/AccessRequests/AccessDuration/AccessDurationReview.tsx

@@ -0,0 +1,49 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { Flex, Text } from 'design';
+
+import { ToolTipInfo } from 'shared/components/ToolTip';
+
+import { AccessRequest } from 'shared/services/accessRequests';
+
+import { getFormattedDurationTxt } from '../Shared/utils';
+
+export function AccessDurationReview({
+  assumeStartTime,
+  accessRequest,
+}: {
+  assumeStartTime: Date;
+  accessRequest: AccessRequest;
+}) {
+  return (
+    <Flex alignItems="center">
+      <Text mr={1}>
+        <b>Access Duration: </b>
+        {getFormattedDurationTxt({
+          start: assumeStartTime || accessRequest.assumeStartTime || new Date(),
+          end: accessRequest.expires,
+        })}
+      </Text>
+      <ToolTipInfo>
+        How long the access will be granted for after approval.
+      </ToolTipInfo>
+    </Flex>
+  );
+}

web/packages/shared/components/AccessRequests/AccessDuration/durationOptions.test.ts

@@ -0,0 +1,100 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { addHours, addWeeks, addDays } from 'date-fns';
+
+import {
+  getDurationOptionIndexClosestToOneWeek,
+  DurationOption,
+} from './durationOptions';
+
+describe('getDurationOptionIndexClosestToOneWeek', () => {
+  const beginDate = new Date('2024-02-10T03:00:00.000000Z');
+  jest.useFakeTimers().setSystemTime(beginDate);
+
+  const durationOpts: DurationOption[] = [
+    { value: beginDate.getTime(), label: '' }, // earliest date
+    { value: addHours(beginDate, 3).getTime(), label: '' },
+    { value: addHours(beginDate, 6).getTime(), label: '' },
+    { value: addHours(beginDate, 9).getTime(), label: '' },
+    { value: addDays(beginDate, 3).getTime(), label: '' },
+    { value: addDays(beginDate, 7).getTime(), label: '' }, //  one week
+    { value: addDays(beginDate, 8).getTime(), label: '' },
+    { value: addDays(beginDate, 10).getTime(), label: '' },
+    { value: addWeeks(beginDate, 2).getTime(), label: '' }, // two week
+  ];
+
+  const lastDurationIndex = durationOpts.length - 1;
+
+  test('one week from selected date, is greater than value from last index, returns the last index', () => {
+    const startDate = addDays(beginDate, 10);
+
+    const index = getDurationOptionIndexClosestToOneWeek(
+      durationOpts,
+      startDate // 1 week from startDate is 17 days, past 2 weeks.
+    );
+    expect(index).toBe(lastDurationIndex);
+  });
+
+  test('one week from selected date, is equal to the value from last index, returns the last index', () => {
+    const startDate = addWeeks(beginDate, 1);
+
+    // Ensure the expected option is what we expect.
+    expect(durationOpts[lastDurationIndex].value).toBe(
+      addWeeks(startDate, 1).getTime()
+    );
+
+    const index = getDurationOptionIndexClosestToOneWeek(
+      durationOpts,
+      startDate // 1 week from start date is exactly 2 weeks
+    );
+    expect(index).toBe(lastDurationIndex);
+  });
+
+  test('one week from selected date, is less than the last index, returns the index equal to one week', () => {
+    const startDate = beginDate;
+    const expectedIndex = 5;
+
+    // Ensure the expected option is what we expect.
+    expect(durationOpts[expectedIndex].value).toBe(
+      addWeeks(beginDate, 1).getTime() // 1 week from start date is exactly 1 week
+    );
+
+    const index = getDurationOptionIndexClosestToOneWeek(
+      durationOpts,
+      startDate
+    );
+    expect(index).toBe(expectedIndex);
+  });
+
+  test('one week from selected date, is less than the last index, returns the index closest but no greater than one week', () => {
+    const startDate = addDays(beginDate, 3);
+    const expectedIndex = 7;
+
+    // Ensure the expected option is what we expect.
+    expect(durationOpts[expectedIndex].value).toBe(
+      addDays(beginDate, 10).getTime() // 1 week from start date is day 10
+    );
+
+    const index = getDurationOptionIndexClosestToOneWeek(
+      durationOpts,
+      startDate
+    );
+    expect(index).toBe(expectedIndex);
+  });
+});