Add sorting to imported repos list and corresponding API (#19097)

* adding sorting support for ListConfigurations * Getting sortable headers partially setup * killing the global button styles * Updating sortable headers * cleanup * adding comment about sort field * Update components/dashboard/src/app/Blocked.tsx Co-authored-by: Filip Troníček <[email protected]> * Update components/dashboard/src/components/Button.tsx Co-authored-by: Filip Troníček <[email protected]> * Update components/dashboard/src/components/podkit/buttons/Button.tsx Co-authored-by: Filip Troníček <[email protected]> * Update components/dashboard/src/components/toasts/Toast.tsx remove redundant styles Co-authored-by: Filip Troníček <[email protected]> * Update components/dashboard/src/components/podkit/tables/SortableTable.tsx Co-authored-by: Filip Troníček <[email protected]> * Update components/dashboard/src/usage/UsageDateFilters.tsx remove redundant style Co-authored-by: Filip Troníček <[email protected]> * Update components/dashboard/public/complete-auth/index.html Co-authored-by: Filip Troníček <[email protected]> * extracting to a local LoginButton component * whoopsie --------- Co-authored-by: Filip Troníček <[email protected]>
gitpod-io · Nov 21, 2023 · 73a1c76 · 73a1c76
1 parent 4aef5ce
commit 73a1c76
Show file tree

Hide file tree

Showing 54 changed files with 996 additions and 508 deletions.
diff --git a/components/dashboard/public/complete-auth/index.html b/components/dashboard/public/complete-auth/index.html
@@ -21,6 +21,6 @@
     </script>
 </head>
 <body>
-    If this tab is not closed automatically, feel free to close it and proceed. <button type="button" onclick="window.open('', '_self', ''); window.close();">Close</button>
+    If this tab is not closed automatically, feel free to close it and proceed. <button className="px-4 py-2 my-auto bg-gray-900 hover:bg-gray-800 dark:bg-kumquat-base dark:hover:bg-kumquat-ripe text-gray-50 dark:text-gray-900 text-sm font-medium rounded-xl focus:outline-none focus:ring transition ease-in-out" type="button" onclick="window.open('', '_self', ''); window.close();">Close</button>
 </body>
 </html>
diff --git a/components/dashboard/src/FromReferrer.tsx b/components/dashboard/src/FromReferrer.tsx
@@ -4,7 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { Link } from "react-router-dom";
+import { LinkButton } from "@podkit/buttons/LinkButton";
 
 export default function FromReferrer() {
     const contextUrl = document.referrer;
@@ -36,9 +36,9 @@ export default function FromReferrer() {
                         </p>
                     </div>
                     <span>
-                        <Link to="/">
-                            <button className="secondary">Go to Dashboard</button>
-                        </Link>
+                        <LinkButton variant="secondary" href="/">
+                            Go to Dashboard
+                        </LinkButton>
                     </span>
                 </div>
             </div>

diff --git a/components/dashboard/src/Login.tsx b/components/dashboard/src/Login.tsx
@@ -21,6 +21,8 @@ import { useAuthProviderDescriptions } from "./data/auth-providers/auth-provider
 import { SetupPending } from "./login/SetupPending";
 import { useNeedsSetup } from "./dedicated-setup/use-needs-setup";
 import { AuthProviderDescription } from "@gitpod/public-api/lib/gitpod/v1/authprovider_pb";
+import { Button, ButtonProps } from "@podkit/buttons/Button";
+import { cn } from "@podkit/lib/cn";
 
 export function markLoggedIn() {
     document.cookie = GitpodCookie.generateCookie(window.location.hostname);
@@ -153,28 +155,23 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
 
                                 <div className="w-56 mx-auto flex flex-col space-y-3 items-center">
                                     {providerFromContext ? (
-                                        <button
+                                        <LoginButton
                                             key={"button" + providerFromContext.host}
-                                            className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
                                             onClick={() => openLogin(providerFromContext!.host)}
                                         >
                                             {iconForAuthProvider(providerFromContext.type)}
                                             <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">
                                                 Continue with {simplifyProviderName(providerFromContext.host)}
                                             </span>
-                                        </button>
+                                        </LoginButton>
                                     ) : (
                                         authProviders.data?.map((ap) => (
-                                            <button
-                                                key={"button" + ap.host}
-                                                className="btn-login flex-none w-56 h-10 p-0 inline-flex rounded-xl"
-                                                onClick={() => openLogin(ap.host)}
-                                            >
+                                            <LoginButton key={"button" + ap.host} onClick={() => openLogin(ap.host)}>
                                                 {iconForAuthProvider(ap.type)}
                                                 <span className="pt-2 pb-2 mr-3 text-sm my-auto font-medium truncate overflow-ellipsis">
                                                     Continue with {simplifyProviderName(ap.host)}
                                                 </span>
-                                            </button>
+                                            </LoginButton>
                                         ))
                                     )}
                                     <SSOLoginForm
@@ -215,3 +212,24 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
         </div>
     );
 };
+
+// TODO: Do we really want a different style button for the login page, or could we use our normal secondary variant?
+type LoginButtonProps = {
+    onClick: ButtonProps["onClick"];
+};
+const LoginButton: FC<LoginButtonProps> = ({ children, onClick }) => {
+    return (
+        <Button
+            // Using ghost here to avoid the default button styles
+            variant="ghost"
+            // TODO: Determine if we want this one-off style of button
+            className={cn(
+                "border-none bg-gray-100 hover:bg-gray-200 text-gray-500 dark:text-gray-200 dark:bg-gray-800 dark:hover:bg-gray-600 hover:opacity-100",
+                "flex-none w-56 h-10 p-0 inline-flex rounded-xl",
+            )}
+            onClick={onClick}
+        >
+            {children}
+        </Button>
+    );
+};
diff --git a/components/dashboard/src/OauthClientApproval.tsx b/components/dashboard/src/OauthClientApproval.tsx
@@ -4,6 +4,7 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import { Button } from "@podkit/buttons/Button";
 import gitpodIcon from "./icons/gitpod.svg";
 
 export default function OAuthClientApproval() {
@@ -42,12 +43,12 @@ export default function OAuthClientApproval() {
                                 </h4>
                             </div>
                             <div className="flex justify-center mt-6">
-                                <button className="secondary" onClick={() => updateClientApproval(false)}>
+                                <Button variant="secondary" onClick={() => updateClientApproval(false)}>
                                     Cancel
-                                </button>
-                                <button key={"button-yes"} className="ml-2" onClick={() => updateClientApproval(true)}>
+                                </Button>
+                                <Button key={"button-yes"} className="ml-2" onClick={() => updateClientApproval(true)}>
                                     Authorize
-                                </button>
+                                </Button>
                             </div>
                         </div>
                     </div>

diff --git a/components/dashboard/src/admin/BlockedEmailDomains.tsx b/components/dashboard/src/admin/BlockedEmailDomains.tsx
@@ -16,7 +16,7 @@ import searchIcon from "../icons/search.svg";
 import { getGitpodService } from "../service/service";
 import { AdminPageHeader } from "./AdminPageHeader";
 import Pagination from "../Pagination/Pagination";
-import { Button } from "../components/Button";
+import { Button } from "@podkit/buttons/Button";
 
 export function BlockedEmailDomains() {
     return (
@@ -127,7 +127,7 @@ export function BlockedEmailDomainsList(props: Props) {
                         />
                     </div>
                     <div className="flex space-x-2">
-                        <button onClick={add}>Add Domain</button>
+                        <Button onClick={add}>Add Domain</Button>
                     </div>
                 </div>
             </div>
@@ -231,10 +231,10 @@ function AddBlockedDomainModal(p: AddBlockedDomainModalProps) {
                 <Details br={br} update={update} error={error} />
             </ModalBody>
             <ModalFooter>
-                <Button type="secondary" onClick={p.onClose}>
+                <Button variant="secondary" onClick={p.onClose}>
                     Cancel
                 </Button>
-                <Button htmlType="submit">Add Blocked Domain</Button>
+                <Button type="submit">Add Blocked Domain</Button>
             </ModalFooter>
         </Modal>
     );

diff --git a/components/dashboard/src/admin/BlockedRepositories.tsx b/components/dashboard/src/admin/BlockedRepositories.tsx
@@ -17,7 +17,7 @@ import { ContextMenuEntry } from "../components/ContextMenu";
 import Alert from "../components/Alert";
 import { SpinnerLoader } from "../components/Loader";
 import searchIcon from "../icons/search.svg";
-import { Button } from "../components/Button";
+import { Button } from "@podkit/buttons/Button";
 
 export function BlockedRepositories() {
     return (
@@ -144,7 +144,7 @@ export function BlockedRepositoriesList(props: Props) {
                         />
                     </div>
                     <div className="flex space-x-2">
-                        <button onClick={add}>New Blocked Repository</button>
+                        <Button onClick={add}>New Blocked Repository</Button>
                     </div>
                 </div>
             </div>
@@ -235,10 +235,10 @@ function AddBlockedRepositoryModal(p: AddBlockedRepositoryModalProps) {
                 <Details br={br} update={update} error={error} />
             </ModalBody>
             <ModalFooter>
-                <Button type="secondary" onClick={p.onClose}>
+                <Button variant="secondary" onClick={p.onClose}>
                     Cancel
                 </Button>
-                <Button htmlType="submit">Add Blocked Repository</Button>
+                <Button type="submit">Add Blocked Repository</Button>
             </ModalFooter>
         </Modal>
     );

diff --git a/components/dashboard/src/admin/TeamDetail.tsx b/components/dashboard/src/admin/TeamDetail.tsx
@@ -19,6 +19,7 @@ import { CostCenterJSON, CostCenter_BillingStrategy } from "@gitpod/gitpod-proto
 import Modal from "../components/Modal";
 import { Heading2 } from "../components/typography/headings";
 import search from "../icons/search.svg";
+import { Button } from "@podkit/buttons/Button";
 
 export default function TeamDetail(props: { team: Team }) {
     const { team } = props;
@@ -226,7 +227,7 @@ export default function TeamDetail(props: { team: Team }) {
                 onClose={() => setEditSpendingLimit(false)}
                 title="Change Usage Limit"
                 buttons={[
-                    <button
+                    <Button
                         disabled={usageLimit === costCenter?.spendingLimit}
                         onClick={async () => {
                             if (usageLimit !== undefined) {
@@ -238,7 +239,7 @@ export default function TeamDetail(props: { team: Team }) {
                         }}
                     >
                         Change
-                    </button>,
+                    </Button>,
                 ]}
             >
                 <p className="pb-4 text-gray-500 text-base">Change the usage limit in credits per month.</p>
@@ -260,7 +261,7 @@ export default function TeamDetail(props: { team: Team }) {
                 onClose={() => setEditAddCreditNote(false)}
                 title="Add Credits"
                 buttons={[
-                    <button
+                    <Button
                         disabled={creditNote.credits === 0 || !creditNote.note}
                         onClick={async () => {
                             if (creditNote.credits !== 0 && !!creditNote.note) {
@@ -276,7 +277,7 @@ export default function TeamDetail(props: { team: Team }) {
                         }}
                     >
                         Add Credits
-                    </button>,
+                    </Button>,
                 ]}
             >
                 <p>Adds or subtracts the amount of credits from this account.</p>

diff --git a/components/dashboard/src/admin/UserDetail.tsx b/components/dashboard/src/admin/UserDetail.tsx
@@ -21,6 +21,7 @@ import Property from "./Property";
 import { AdminPageHeader } from "./AdminPageHeader";
 import { CheckboxInputField, CheckboxListField } from "../components/forms/CheckboxInputField";
 import { Heading2, Subheading } from "../components/typography/headings";
+import { Button } from "@podkit/buttons/Button";
 
 export default function UserDetail(p: { user: User }) {
     const [activity, setActivity] = useState(false);
@@ -92,16 +93,16 @@ export default function UserDetail(p: { user: User }) {
                             </Subheading>
                         </div>
                         {!user.lastVerificationTime ? (
-                            <button className="secondary ml-3" disabled={activity} onClick={verifyUser}>
+                            <Button variant="secondary" className="ml-3" disabled={activity} onClick={verifyUser}>
                                 Verify User
-                            </button>
+                            </Button>
                         ) : null}
-                        <button className="secondary danger ml-3" disabled={activity} onClick={toggleBlockUser}>
+                        <Button variant="destructive" className="ml-3" disabled={activity} onClick={toggleBlockUser}>
                             {user.blocked ? "Unblock" : "Block"} User
-                        </button>
-                        <button className="danger ml-3" disabled={activity} onClick={deleteUser}>
+                        </Button>
+                        <Button variant="destructive" className="ml-3" disabled={activity} onClick={deleteUser}>
                             Delete User
-                        </button>
+                        </Button>
                     </div>
                     <div className="flex mt-6">
                         <div className="w-40">
@@ -151,9 +152,9 @@ export default function UserDetail(p: { user: User }) {
                 onClose={() => setEditFeatureFlags(false)}
                 title="Edit Feature Flags"
                 buttons={[
-                    <button className="secondary" onClick={() => setEditFeatureFlags(false)}>
+                    <Button variant="secondary" onClick={() => setEditFeatureFlags(false)}>
                         Done
-                    </button>,
+                    </Button>,
                 ]}
             >
                 <CheckboxListField
@@ -176,9 +177,9 @@ export default function UserDetail(p: { user: User }) {
                 onClose={() => setEditRoles(false)}
                 title="Edit Roles"
                 buttons={[
-                    <button className="secondary" onClick={() => setEditRoles(false)}>
+                    <Button variant="secondary" onClick={() => setEditRoles(false)}>
                         Done
-                    </button>,
+                    </Button>,
                 ]}
             >
                 <CheckboxListField

diff --git a/components/dashboard/src/admin/WorkspaceDetail.tsx b/components/dashboard/src/admin/WorkspaceDetail.tsx
@@ -16,6 +16,7 @@ import { WorkspaceStatusIndicator } from "../workspaces/WorkspaceStatusIndicator
 import Property from "./Property";
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { converter } from "../service/public-api";
+import { Button } from "@podkit/buttons/Button";
 
 export default function WorkspaceDetail(props: { workspace: WorkspaceAndInstance }) {
     const [workspace, setWorkspace] = useState(props.workspace);
@@ -78,8 +79,9 @@ export default function WorkspaceDetail(props: { workspace: WorkspaceAndInstance
                         )}
                     </Subheading>
                 </div>
-                <button
-                    className="secondary ml-3"
+                <Button
+                    variant="secondary"
+                    className="ml-3"
                     onClick={() => {
                         window.location.href = new GitpodHostUrl(window.location.href)
                             .with({
@@ -89,14 +91,15 @@ export default function WorkspaceDetail(props: { workspace: WorkspaceAndInstance
                     }}
                 >
                     Download Workspace
-                </button>
-                <button
-                    className="danger ml-3"
+                </Button>
+                <Button
+                    variant="destructive"
+                    className="ml-3"
                     disabled={activity || workspace.phase === "stopped"}
                     onClick={stopWorkspace}
                 >
                     Stop Workspace
-                </button>
+                </Button>
             </div>
             <div className="flex mt-6">
                 <div className="flex flex-col w-full">

diff --git a/components/dashboard/src/app/Blocked.tsx b/components/dashboard/src/app/Blocked.tsx
@@ -7,6 +7,7 @@
 import { FunctionComponent } from "react";
 import { Heading1, Subheading } from "../components/typography/headings";
 import gitpodIcon from "../icons/gitpod.svg";
+import { Button } from "@podkit/buttons/Button";
 
 export const Blocked: FunctionComponent = () => {
     return (
@@ -23,7 +24,7 @@ export const Blocked: FunctionComponent = () => {
                 .
             </Subheading>
             <a className="mx-auto" href="mailto:[email protected]?Subject=Blocked">
-                <button className="secondary">Contact Support</button>
+                <Button variant="secondary">Contact Support</Button>
             </a>
         </div>
     );

diff --git a/components/dashboard/src/components/Button.tsx b/components/dashboard/src/components/Button.tsx
@@ -26,6 +26,9 @@ export type ButtonProps = {
 // Allow w/ or w/o handling event argument
 type ButtonOnClickHandler = React.DOMAttributes<HTMLButtonElement>["onClick"] | (() => void);
 
+/**
+ * @deprecated use `@podkit/buttons/Button` instead
+ */
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     (
         {

diff --git a/components/dashboard/src/components/Modal.tsx b/components/dashboard/src/components/Modal.tsx
@@ -13,6 +13,7 @@ import Alert, { AlertProps } from "./Alert";
 import "./modal.css";
 import classNames from "classnames";
 import { useTrackEvent } from "../data/tracking/track-event-mutation";
+import { Button } from "@podkit/buttons/Button";
 
 type CloseModalManner = "esc" | "enter" | "x" | "click_outside";
 
@@ -239,17 +240,17 @@ type ModalCloseIconProps = {
 };
 const ModalCloseIcon: FC<ModalCloseIconProps> = ({ onClose }) => {
     return (
-        // TODO: Create an IconButton component
-        <button
+        <Button
+            variant="ghost"
             type="button"
             aria-label="Close modal"
-            className="bg-transparent absolute right-7 top-6 text-gray-800 dark:text-gray-100 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md p-2"
+            className="absolute right-7 top-6"
             onClick={onClose}
         >
             <svg version="1.1" width="14px" height="14px" viewBox="0 0 100 100">
                 <line x1="0" y1="0" x2="100" y2="100" stroke="currentColor" strokeWidth="10px" />
                 <line x1="0" y1="100" x2="100" y2="0" stroke="currentColor" strokeWidth="10px" />
             </svg>
-        </button>
+        </Button>
     );
 };
diff --git a/components/dashboard/src/components/PrebuildLogs.tsx b/components/dashboard/src/components/PrebuildLogs.tsx
@@ -176,7 +176,7 @@ export default function PrebuildLogs(props: PrebuildLogsProps) {
                     <WorkspaceLogs classes="h-full w-full" logsEmitter={logsEmitter} errorMessage={error?.message} />
                 </Suspense>
             </div>
-            <div className="w-full bottom-0 h-20 px-6 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 flex space-x-2">
+            <div className="w-full bottom-0 h-20 px-6 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-600 flex flex-row items-center space-x-2">
                 {prebuild && <PrebuildStatus prebuild={prebuild} />}
                 <div className="flex-grow" />
                 {props.children}