-
Notifications
You must be signed in to change notification settings - Fork 192
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[INNO] ARC-2714 - Adding modals for backfill page (#2598)
* - Modal added for backfilling and disconnecting subscription * - Fixing eslint in a test case * - WIP - backfill modal * - WIP - backfill modal * - WIP - backfill modal * - Using the corrected datepicker * - Fixing the delete subscription endpoint * - Test cases added - TODO updated * - Fixing test cases
- Loading branch information
1 parent
c6020bb
commit a5ebf21
Showing
10 changed files
with
445 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import "@testing-library/jest-dom"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import { BrowserRouter } from "react-router-dom"; | ||
| import userEvent from "@testing-library/user-event"; | ||
| import DisconnectSubscriptionModal from "./DisconnectSubscriptionModal"; | ||
|
|
||
| const sampleSubscription = { | ||
| app_slug: "string", | ||
| syncWarning: "warning", | ||
| id: 1, | ||
| account: { | ||
| login: "sample", | ||
| id: 1, | ||
| avatar_url: "string", | ||
| }, | ||
| repository_selection: "string", | ||
| app_id: 1, | ||
| target_id: 1, | ||
| target_type: "string", | ||
| created_at: "string", | ||
| updated_at: "string", | ||
| syncStatus: "string", | ||
| totalNumberOfRepos: 2, | ||
| numberOfSyncedRepos: 2, | ||
| jiraHost: "https://test-jira.atlassian.net", | ||
| isGlobalInstall: true, | ||
| backfillSince: null, | ||
| subscriptionId: 1, | ||
| html_url: "html_url" | ||
| }; | ||
| const isModalOpened = jest.fn(); | ||
|
|
||
| test("Disconnect subscription Modal", async () => { | ||
| render( | ||
| <BrowserRouter> | ||
| <DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} /> | ||
| </BrowserRouter> | ||
| ); | ||
|
|
||
| expect(screen.getByText("Disconnect sample?")).toBeInTheDocument(); | ||
| const text = screen.getByTestId("disconnect-content"); | ||
| expect(text.textContent).toBe("Are you sure you want to disconnect your organization sample? This means that you will have to redo the backfill of historical data if you ever want to reconnect"); | ||
|
|
||
| await userEvent.click(screen.getByText("Cancel")); | ||
| expect(isModalOpened).toBeCalled(); | ||
| }); |
44 changes: 44 additions & 0 deletions
44
spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@atlaskit/modal-dialog"; | ||
| import Button from "@atlaskit/button"; | ||
| import { SuccessfulConnection } from "../../../../../src/rest-interfaces"; | ||
|
|
||
| /** | ||
| * NOTE: While testing in dev mode, please disable the React.StrictMode first, | ||
| * otherwise this modal won't show up. | ||
| */ | ||
| const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: { | ||
| subscription: SuccessfulConnection, | ||
| setIsModalOpened: (x: boolean) => void | ||
| }) => { | ||
| const disconnect = () => { | ||
| // TODO: API call to disconnect this subscription | ||
| console.log("Disconnect", subscription.account.login); | ||
| setIsModalOpened(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Modal onClose={() => setIsModalOpened(false)}> | ||
| <ModalHeader> | ||
| <ModalTitle appearance="warning"> | ||
| <>Disconnect {subscription.account.login}?</> | ||
| </ModalTitle> | ||
| </ModalHeader> | ||
| <ModalBody> | ||
| <p data-testid="disconnect-content"> | ||
| Are you sure you want to disconnect your organization <b>{subscription.account.login}</b>? | ||
| This means that you will have to redo the backfill of historical data if you ever want to reconnect | ||
| </p> | ||
| </ModalBody> | ||
| <ModalFooter> | ||
| <Button appearance="subtle" onClick={() => setIsModalOpened(false)}>Cancel</Button> | ||
| <Button appearance="danger" onClick={disconnect}> | ||
| Disconnect | ||
| </Button> | ||
| </ModalFooter> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default DisconnectSubscriptionModal; |
46 changes: 46 additions & 0 deletions
46
spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import "@testing-library/jest-dom"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import { BrowserRouter } from "react-router-dom"; | ||
| import userEvent from "@testing-library/user-event"; | ||
| import RestartBackfillModal from "./RestartBackfillModal"; | ||
|
|
||
| const sampleSubscription = { | ||
| app_slug: "string", | ||
| syncWarning: "warning", | ||
| id: 1, | ||
| account: { | ||
| login: "sample", | ||
| id: 1, | ||
| avatar_url: "string", | ||
| }, | ||
| repository_selection: "string", | ||
| app_id: 1, | ||
| target_id: 1, | ||
| target_type: "string", | ||
| created_at: "string", | ||
| updated_at: "string", | ||
| syncStatus: "string", | ||
| totalNumberOfRepos: 2, | ||
| numberOfSyncedRepos: 2, | ||
| jiraHost: "https://test-jira.atlassian.net", | ||
| isGlobalInstall: true, | ||
| backfillSince: null, | ||
| subscriptionId: 1, | ||
| html_url: "html_url" | ||
| }; | ||
| const isModalOpened = jest.fn(); | ||
|
|
||
| test("Restart backfill Modal", async () => { | ||
| render( | ||
| <BrowserRouter> | ||
| <RestartBackfillModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} /> | ||
| </BrowserRouter> | ||
| ); | ||
|
|
||
| expect(screen.getByText("Backfill your data")).toBeInTheDocument(); | ||
| // expect(screen.queryByTestId("backfill-datepicker")).toBeInTheDocument(); | ||
| expect(screen.getByRole("checkbox", {name: "Restart the backfill from today to this date"})).toBeInTheDocument(); | ||
|
|
||
| await userEvent.click(screen.getByText("Cancel")); | ||
| expect(isModalOpened).toBeCalled(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@atlaskit/modal-dialog"; | ||
| import Button from "@atlaskit/button"; | ||
| import { SuccessfulConnection } from "../../../../../src/rest-interfaces"; | ||
| import { Checkbox } from "@atlaskit/checkbox"; | ||
| import { Label } from "@atlaskit/form"; | ||
| import { DatePicker } from "@atlaskit/datetime-picker"; | ||
|
|
||
| /** | ||
| * NOTE: While testing in dev mode, please disable the React.StrictMode first, | ||
| * otherwise this modal won't show up. | ||
| */ | ||
| const RestartBackfillModal = ({ subscription, setIsModalOpened }: { | ||
| subscription: SuccessfulConnection, | ||
| setIsModalOpened: (x: boolean) => void | ||
| }) => { | ||
| const [restartFromDateCheck, setRestartFromDateCheck] = useState(false); | ||
| const [backfillDate, setBackfillDate] = useState(""); | ||
|
|
||
| /** | ||
| * TODO: Remove this later once the issue within datepicker is identified and fixed | ||
| * Thread: https://atlassian.slack.com/archives/CFJ9DU39U/p1701912243843529 | ||
| * | ||
| * The datepicker jumps around when rendered inside a modal, | ||
| * Until that is fixed, adding a short disable for the datepicker, | ||
| * which is then enabled to avoid having the jumpy effect. | ||
| */ | ||
| const [isDisabled, setIsDisabled] = useState(true); | ||
| useEffect(() => { | ||
| setTimeout(() => setIsDisabled(false), 10); | ||
| }, []); | ||
|
|
||
| const backfill = () => { | ||
| // TODO: API call to disconnect this subscription | ||
| console.log("Backfill for", subscription.account.login, restartFromDateCheck, backfillDate); | ||
| setIsModalOpened(false); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Modal onClose={() => setIsModalOpened(false)}> | ||
| <ModalHeader> | ||
| <ModalTitle>Backfill your data</ModalTitle> | ||
| </ModalHeader> | ||
| <ModalBody> | ||
| <p> | ||
| Backfilling data can take a long time, so we’ll only backfill your data from the last 6 months. | ||
| If you want to backfill more data, choose a date below. Branches will be backfilled regardless of their age. | ||
| </p> | ||
| <p> | ||
| <Label htmlFor="backfill-date-picker">Choose date</Label> | ||
| <DatePicker | ||
| testId="backfill-datepicker" | ||
| selectProps={{ | ||
| inputId: "backfill-date-picker", | ||
| }} | ||
| placeholder="Select date" | ||
| isDisabled={isDisabled} // TODO: remove this later | ||
| onChange={setBackfillDate} | ||
| /> | ||
| </p> | ||
| <p> | ||
| <Checkbox | ||
| onChange={() => setRestartFromDateCheck(!restartFromDateCheck)} | ||
| label={`Restart the backfill from today to this date`} | ||
| name="restart-from-selected-date" | ||
| /> | ||
| </p> | ||
| </ModalBody> | ||
| <ModalFooter> | ||
| <Button appearance="subtle" onClick={() => setIsModalOpened(false)}>Cancel</Button> | ||
| <Button appearance="danger" onClick={backfill}> | ||
| Backfill data | ||
| </Button> | ||
| </ModalFooter> | ||
| </Modal> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default RestartBackfillModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.