[dashboard] Address review feedback

Author: geropl

components/dashboard/src/admin/BlockedRepositories.tsx

@@ -14,6 +14,7 @@ import Modal from "../components/Modal";
 import CheckBox from "../components/CheckBox";
 import { ItemFieldContextMenu } from "../components/ItemsList";
 import { ContextMenuEntry } from "../components/ContextMenu";
+import info from "../images/info.svg";
 
 export function BlockedRepositories() {
     return (
@@ -81,7 +82,7 @@ export function BlockedRepositoriesList(props: Props) {
 
     const validate = (blockedRepository: NewBlockedRepository): string | undefined => {
         if (blockedRepository.urlRegexp === "") {
-            return "Empty RegEx!";
+            return "Repository URL can not be empty";
         }
     };
 
@@ -113,6 +114,26 @@ export function BlockedRepositoriesList(props: Props) {
                     onClose={() => setDeleteModalVisible(false)}
                 />
             )}
+            <div
+                className={
+                    "flex rounded bg-yellow-50 dark:bg-yellow-500 text-yellow-600 dark:text-yellow-100 p-2 w-2/3 mb-2 w-full"
+                }
+            >
+                <svg
+                    className="m-1 ml-2 mr-4 bg- text-yellow-800 fill-current h-4 w-4"
+                    viewBox="0 0 16 14"
+                    fill="#FBBF24"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M6.25706 1.09882C7.02167 -0.26048 8.97875 -0.260481 9.74336 1.09882L15.3237 11.0194C16.0736 12.3526 15.1102 13.9999 13.5805 13.9999H2.4199C0.890251 13.9999 -0.0731769 12.3526 0.676753 11.0194L6.25706 1.09882ZM9.00012 11C9.00012 11.5523 8.55241 12 8.00012 12C7.44784 12 7.00012 11.5523 7.00012 11C7.00012 10.4477 7.44784 10 8.00012 10C8.55241 10 9.00012 10.4477 9.00012 11ZM8.00012 3C7.44784 3 7.00012 3.44772 7.00012 4V7C7.00012 7.55228 7.44784 8 8.00012 8C8.55241 8 9.00012 7.55228 9.00012 7V4C9.00012 3.44772 8.55241 3 8.00012 3Z"
+                        fill="currentColor"
+                    />
+                </svg>
+                <span>Entries in this table have an immediate effect on all users. Please use it carefully.</span>
+            </div>
             <div className="pt-8 flex">
                 <div className="flex justify-between w-full">
                     <div className="flex">
@@ -146,11 +167,19 @@ export function BlockedRepositoriesList(props: Props) {
                     </div>
                 </div>
             </div>
+            <div
+                className={
+                    "flex rounded bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 p-2 w-2/3 mb-2 w-full"
+                }
+            >
+                <img className="w-4 h-4 m-1 ml-2 mr-4" alt="info" src={info} />
+                <span>Search entries by their Repositoriy URL regular expression (RegEx).</span>
+            </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-9/12">Repository URL Regex</div>
-                    <div className="w-1/12">Block user</div>
-                    <div className="w-2/12">Delete</div>
+                    <div className="w-9/12">Repository URL (RegEx)</div>
+                    <div className="w-1/12">Block Users</div>
+                    <div className="w-1/12"></div>
                 </div>
                 {searchResult.rows.map((br) => (
                     <BlockedRepositoryEntry br={br} confirmedDelete={confirmDeleteBlockedRepository} />
@@ -165,17 +194,18 @@ function BlockedRepositoryEntry(props: { br: BlockedRepository; confirmedDelete:
         {
             title: "Delete",
             onClick: () => props.confirmedDelete(props.br),
+            customFontStyle: "text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300",
         },
     ];
     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="rounded 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-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} />
+                <span className="mr-3 text-lg text-gray-600 truncate">{props.br.blockUser ? "Yes" : "No"}</span>
             </div>
-            <div className="flex flex-col w-2/12">
+            <div className="flex flex-col w-1/12">
                 <ItemFieldContextMenu menuEntries={menuEntries} />
             </div>
         </div>
@@ -233,6 +263,25 @@ function AddBlockedRepositoryModal(p: AddBlockedRepositoryModalProps) {
                 </button>,
             ]}
         >
+            <div
+                className={
+                    "flex rounded bg-blue-50 dark:bg-blue-500 text-blue-600 dark:text-blue-100 p-2 w-2/3 mb-2 w-full"
+                }
+            >
+                <svg
+                    className="m-1 ml-2 mr-4 bg- text-blue-800 fill-current h-4 w-4"
+                    viewBox="0 0 12 12"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM6.75 3C6.75 3.41421 6.41421 3.75 6 3.75C5.58579 3.75 5.25 3.41421 5.25 3C5.25 2.58579 5.58579 2.25 6 2.25C6.41421 2.25 6.75 2.58579 6.75 3ZM5.25 5.25C4.83579 5.25 4.5 5.58579 4.5 6C4.5 6.41421 4.83579 6.75 5.25 6.75V9C5.25 9.41421 5.58579 9.75 6 9.75H6.75C7.16421 9.75 7.5 9.41421 7.5 9C7.5 8.58579 7.16421 8.25 6.75 8.25V6C6.75 5.58579 6.41421 5.25 6 5.25H5.25Z"
+                        fill="currentColor"
+                    />
+                </svg>
+                <span>Repositories are blocked by matching their URL against this regular expression.</span>
+            </div>
             <Details br={br} update={update} error={error} />
         </Modal>
     );
@@ -276,6 +325,7 @@ function Details(props: {
                     className="w-full"
                     type="text"
                     value={props.br.urlRegexp}
+                    placeholder={'e.g. "https://github.com/malicious-user/*"'}
                     disabled={!props.update}
                     onChange={(v) => {
                         if (!!props.update) {
@@ -285,7 +335,7 @@ function Details(props: {
                 />
             </div>
             <CheckBox
-                title={"Block User"}
+                title={"Block Users"}
                 desc={"Block any user that tries to open a workspace for a repository URL that matches this RegEx."}
                 checked={props.br.blockUser}
                 disabled={!props.update}

components/dashboard/src/admin/WorkspacesSearch.tsx

@@ -140,7 +140,7 @@ export function WorkspaceSearch(props: Props) {
             </div>
             <div
                 className={
-                    "flex rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 p-2 w-2/3 mb-2"
+                    "flex rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 p-2 w-2/3 mb-2 w-full"
                 }
             >
                 <img className="w-4 h-4 m-1 ml-2 mr-4" alt="info" src={info} />