[dashboard] BlockedRepo UI

Author: geropl

components/dashboard/src/App.tsx

@@ -48,7 +48,7 @@ import { parseProps } from "./start/StartWorkspace";
 import SelectIDEModal from "./settings/SelectIDEModal";
 import { StartPage, StartPhase } from "./start/StartPage";
 import { isGitpodIo } from "./utils";
-import { BlockedRepositorySettings } from "./admin/BlockedRepositorySettings";
+import { BlockedRepositories } from "./admin/BlockedRepositories";
 
 const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "./Setup"));
 const Workspaces = React.lazy(() => import(/* webpackPrefetch: true */ "./workspaces/Workspaces"));
@@ -366,7 +366,7 @@ function App() {
                     <AdminRoute path="/admin/teams" component={TeamsSearch} />
                     <AdminRoute path="/admin/workspaces" component={WorkspacesSearch} />
                     <AdminRoute path="/admin/projects" component={ProjectsSearch} />
-                    <AdminRoute path="/admin/blocked-repositories" component={BlockedRepositorySettings} />
+                    <AdminRoute path="/admin/blocked-repositories" component={BlockedRepositories} />
                     <AdminRoute path="/admin/license" component={License} />
                     <AdminRoute path="/admin/settings" component={AdminSettings} />
 

components/dashboard/src/admin/BlockedRepositories.tsx

@@ -0,0 +1,275 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { AdminGetListResult } from "@gitpod/gitpod-protocol";
+import { useEffect, useRef, useState } from "react";
+import { getGitpodService } from "../service/service";
+import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
+import { BlockedRepository } from "@gitpod/gitpod-protocol/lib/blocked-repositories-protocol";
+import ConfirmationModal from "../components/ConfirmationModal";
+import Modal from "../components/Modal";
+import CheckBox from "../components/CheckBox";
+
+export function BlockedRepositories() {
+    return (
+        <PageWithAdminSubMenu title="Blocked Repositories" subtitle="Search and manage all blocked repositories.">
+            <BlockedRepositoriesList />
+        </PageWithAdminSubMenu>
+    );
+}
+
+type NewBlockedRepository = Pick<BlockedRepository, "urlRegexp" | "blockUser">;
+
+interface Props {}
+
+export function BlockedRepositoriesList(props: Props) {
+    const [searchResult, setSearchResult] = useState<AdminGetListResult<BlockedRepository>>({ rows: [], total: 0 });
+    const [queryTerm, setQueryTerm] = useState("");
+    const [searching, setSearching] = useState(false);
+
+    const [isAddModalVisible, setAddModalVisible] = useState(false);
+    const [isDeleteModalVisible, setDeleteModalVisible] = useState(false);
+
+    const [currentBlockedRepository, setCurrentBlockedRepository] = useState({
+        id: 0,
+        urlRegexp: "",
+        blockUser: false,
+    } as BlockedRepository);
+
+    const search = async () => {
+        setSearching(true);
+        try {
+            const result = await getGitpodService().server.adminGetBlockedRepositories({
+                limit: 100,
+                orderBy: "urlRegexp",
+                offset: 0,
+                orderDir: "asc",
+                searchTerm: queryTerm,
+            });
+            setSearchResult(result);
+        } finally {
+            setSearching(false);
+        }
+    };
+    useEffect(() => {
+        search(); // Initial list
+    }, []);
+
+    const add = () => {
+        setCurrentBlockedRepository({
+            id: 0,
+            urlRegexp: "",
+            blockUser: false,
+        } as BlockedRepository);
+        setAddModalVisible(true);
+    };
+
+    const save = async (blockedRepository: NewBlockedRepository) => {
+        await getGitpodService().server.adminCreateBlockedRepository(
+            blockedRepository.urlRegexp,
+            blockedRepository.blockUser,
+        );
+        setAddModalVisible(false);
+        search();
+    };
+
+    const deleteBlockedRepository = async (blockedRepository: BlockedRepository) => {
+        await getGitpodService().server.adminDeleteBlockedRepository(blockedRepository.id);
+        search();
+    };
+
+    const confirmDeleteBlockedRepository = (blockedRepository: BlockedRepository) => {
+        setCurrentBlockedRepository(blockedRepository);
+        setAddModalVisible(false);
+        setDeleteModalVisible(true);
+    };
+
+    return (
+        <>
+            {isAddModalVisible && (
+                <AddBlockedRepositoryModal
+                    blockedRepository={currentBlockedRepository}
+                    save={save}
+                    onClose={() => setAddModalVisible(false)}
+                />
+            )}
+            {isDeleteModalVisible && (
+                <DeleteBlockedRepositoryModal
+                    blockedRepository={currentBlockedRepository}
+                    deleteBlockedRepository={() => deleteBlockedRepository(currentBlockedRepository)}
+                    onClose={() => setDeleteModalVisible(false)}
+                />
+            )}
+            <div className="pt-8 flex">
+                <div className="flex justify-between w-full">
+                    <div className="flex">
+                        <div className="py-4">
+                            <svg
+                                className={searching ? "animate-spin" : ""}
+                                width="16"
+                                height="16"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
+                                    fill="#A8A29E"
+                                />
+                            </svg>
+                        </div>
+                        <input
+                            type="search"
+                            placeholder="Search by URL Regex"
+                            onKeyDown={(ke) => ke.key === "Enter" && search()}
+                            onChange={(v) => {
+                                setQueryTerm(v.target.value.trim());
+                            }}
+                        />
+                    </div>
+                    <div className="flex space-x-2">
+                        <button disabled={searching} onClick={search}>
+                            Search
+                        </button>
+                        <button onClick={add}>New Variable</button>
+                    </div>
+                </div>
+            </div>
+            <div className="flex flex-col space-y-2">
+                <div className="px-6 py-3 flex justify-between text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800 mb-2">
+                    <div className="w-8">ID</div>
+                    <div className="w-9/12">URL Regex</div>
+                    <div className="w-1/12">Block user</div>
+                    <div className="w-2/12">Delete</div>
+                </div>
+                {searchResult.rows.map((br) => (
+                    <BlockedRepositoryEntry br={br} confirmedDelete={confirmDeleteBlockedRepository} />
+                ))}
+            </div>
+        </>
+    );
+}
+
+function BlockedRepositoryEntry(props: { br: BlockedRepository; confirmedDelete: (br: BlockedRepository) => void }) {
+    return (
+        <div className="rounded-xl whitespace-nowrap flex py-6 px-6 w-full justify-between hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gitpod-kumquat-light group">
+            <div className="flex flex-col w-8 truncate">
+                <span className="mr-3 text-lg text-gray-600 truncate">{props.br.id}</span>
+            </div>
+            <div className="flex flex-col w-9/12 truncate">
+                <span className="mr-3 text-lg text-gray-600 truncate">{props.br.urlRegexp}</span>
+            </div>
+            <div className="flex flex-col self-center w-1/12">
+                <CheckBox title={""} desc={""} checked={props.br.blockUser} disabled={true} />
+            </div>
+            <div className="flex flex-col w-2/12">
+                <button onClick={() => props.confirmedDelete(props.br)}>Delete</button>
+            </div>
+        </div>
+    );
+}
+
+interface AddBlockedRepositoryModalProps {
+    blockedRepository: NewBlockedRepository;
+    onClose: () => void;
+    save: (br: NewBlockedRepository) => void;
+}
+
+function AddBlockedRepositoryModal(p: AddBlockedRepositoryModalProps) {
+    const [br, setBr] = useState({ ...p.blockedRepository });
+    const ref = useRef(br);
+
+    const update = (pev: Partial<NewBlockedRepository>) => {
+        const newEnv = { ...ref.current, ...pev };
+        setBr(newEnv);
+        ref.current = newEnv;
+    };
+
+    useEffect(() => {
+        setBr({ ...p.blockedRepository });
+    }, [p.blockedRepository]);
+
+    let save = () => {
+        const v = ref.current;
+        p.save(v);
+        p.onClose();
+        return true;
+    };
+
+    return (
+        <Modal
+            visible={true}
+            title={"New Blocked Repository"}
+            onClose={p.onClose}
+            onEnter={save}
+            buttons={[
+                <button className="secondary" onClick={p.onClose}>
+                    Cancel
+                </button>,
+                <button className="ml-2" onClick={save}>
+                    Add Blocked Repository
+                </button>,
+            ]}
+        >
+            <Details br={br} update={update} />
+        </Modal>
+    );
+}
+
+function DeleteBlockedRepositoryModal(props: {
+    blockedRepository: BlockedRepository;
+    deleteBlockedRepository: () => void;
+    onClose: () => void;
+}) {
+    return (
+        <ConfirmationModal
+            title="Delete 'Blocked Repository'"
+            areYouSureText="Are you sure you want to delete this repository from the list?"
+            buttonText="Delete 'Blocked Repository''"
+            onClose={props.onClose}
+            onConfirm={() => {
+                props.deleteBlockedRepository();
+                props.onClose();
+            }}
+        >
+            <Details br={props.blockedRepository} />
+        </ConfirmationModal>
+    );
+}
+
+function Details(props: { br: NewBlockedRepository; update?: (pev: Partial<NewBlockedRepository>) => void }) {
+    return (
+        <div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4 flex flex-col">
+            <div>
+                <h4>URL Regex</h4>
+                <input
+                    autoFocus
+                    className="w-full"
+                    type="text"
+                    value={props.br.urlRegexp}
+                    disabled={!props.update}
+                    onChange={(v) => {
+                        if (!!props.update) {
+                            props.update({ urlRegexp: v.target.value });
+                        }
+                    }}
+                />
+            </div>
+            <CheckBox
+                title={"Block User"}
+                desc={"Automatically block every user which tries to start a workspace based on this repository"}
+                checked={props.br.blockUser}
+                disabled={!props.update}
+                onChange={(v) => {
+                    if (!!props.update) {
+                        props.update({ blockUser: v.target.checked });
+                    }
+                }}
+            />
+        </div>
+    );
+}