refactor: AnnoDialog (SCE-34)

.infra/rdev/values.yaml

@@ -2,7 +2,7 @@ stack:
   services:
     explorer:
       image:
-        tag: sha-29601284
+        tag: sha-064d4b58
       replicaCount: 1
       env:
         # env vars common to all deployment stages

client/src/components/AnnoDialog/AnnoDialog.tsx

@@ -1,115 +1,87 @@
 import React from "react";
 import { Button, Dialog, Classes, Colors, Tooltip } from "@blueprintjs/core";
+import { AnnoDialogProps } from "./types";
+import { DialogForm, DialogWrapper, SecondaryText } from "./style";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any --- FIXME: disabled temporarily on migrate to TS.
-type State = any;
+export function AnnoDialog(props: AnnoDialogProps): JSX.Element {
+  const {
+    isActive,
+    text,
+    title,
+    instruction,
+    cancelTooltipContent,
+    errorMessage,
+    validationError,
+    annoSelect,
+    annoInput,
+    secondaryInstructions,
+    secondaryInput,
+    handleCancel,
+    handleSubmit,
+    primaryButtonText,
+    secondaryButtonText,
+    handleSecondaryButtonSubmit,
+    primaryButtonProps,
+  } = props;
 
-// eslint-disable-next-line @typescript-eslint/ban-types --- FIXME: disabled temporarily on migrate to TS.
-export class AnnoDialog extends React.PureComponent<{}, State> {
-  // eslint-disable-next-line @typescript-eslint/ban-types --- FIXME: disabled temporarily on migrate to TS.
-  constructor(props: {}) {
-    super(props);
-    this.state = {};
-  }
-
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types --- FIXME: disabled temporarily on migrate to TS.
-  render() {
-    const {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'isActive' does not exist on type 'Readon... Remove this comment to see the full error message
-      isActive,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'text' does not exist on type 'Readonly<{... Remove this comment to see the full error message
-      text,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'title' does not exist on type 'Readonly<... Remove this comment to see the full error message
-      title,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'instruction' does not exist on type 'Rea... Remove this comment to see the full error message
-      instruction,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'cancelTooltipContent' does not exist on ... Remove this comment to see the full error message
-      cancelTooltipContent,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'errorMessage' does not exist on type 'Re... Remove this comment to see the full error message
-      errorMessage,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'validationError' does not exist on type ... Remove this comment to see the full error message
-      validationError,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoSelect' does not exist on type 'Read... Remove this comment to see the full error message
-      annoSelect,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'annoInput' does not exist on type 'Reado... Remove this comment to see the full error message
-      annoInput,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryInstructions' does not exist on... Remove this comment to see the full error message
-      secondaryInstructions,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryInput' does not exist on type '... Remove this comment to see the full error message
-      secondaryInput,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleCancel' does not exist on type 'Re... Remove this comment to see the full error message
-      handleCancel,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleSubmit' does not exist on type 'Re... Remove this comment to see the full error message
-      handleSubmit,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'primaryButtonText' does not exist on typ... Remove this comment to see the full error message
-      primaryButtonText,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'secondaryButtonText' does not exist on t... Remove this comment to see the full error message
-      secondaryButtonText,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'handleSecondaryButtonSubmit' does not ex... Remove this comment to see the full error message
-      handleSecondaryButtonSubmit,
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'primaryButtonProps' does not exist on ty... Remove this comment to see the full error message
-      primaryButtonProps,
-    } = this.props;
-
-    return (
-      <Dialog icon="tag" title={title} isOpen={isActive} onClose={handleCancel}>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-          }}
-        >
-          <div className={Classes.DIALOG_BODY}>
-            <div style={{ marginBottom: 20 }}>
-              <p>{instruction}</p>
-              {annoInput || null}
-              <p
-                style={{
-                  marginTop: 7,
-                  visibility: validationError ? "visible" : "hidden",
-                  color: Colors.ORANGE3,
-                }}
-              >
-                {errorMessage}
-              </p>
-              {/* we might rename, secondary button and secondary input are not related */}
-              {secondaryInstructions && (
-                <p style={{ marginTop: secondaryInstructions ? 20 : 0 }}>
-                  {secondaryInstructions}
-                </p>
-              )}
-              {secondaryInput || null}
-            </div>
-            {annoSelect || null}
-          </div>
-          <div className={Classes.DIALOG_FOOTER}>
-            <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-              <Tooltip content={cancelTooltipContent}>
-                <Button onClick={handleCancel}>Cancel</Button>
-              </Tooltip>
-              {/* we might rename, secondary button and secondary input are not related */}
-              {handleSecondaryButtonSubmit && secondaryButtonText ? (
-                <Button
-                  onClick={handleSecondaryButtonSubmit}
-                  disabled={!text || validationError}
-                  intent="none"
-                  type="button"
-                >
-                  {secondaryButtonText}
-                </Button>
-              ) : null}
+  return (
+    <Dialog icon="tag" title={title} isOpen={isActive} onClose={handleCancel}>
+      <DialogForm
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <div className={Classes.DIALOG_BODY}>
+          <DialogWrapper style={{ marginBottom: 20 }}>
+            <p>{instruction}</p>
+            {annoInput || null}
+            <p
+              style={{
+                marginTop: 7,
+                visibility: validationError ? "visible" : "hidden",
+                color: Colors.ORANGE3,
+              }}
+            >
+              {errorMessage}
+            </p>
+            {/* we might rename, secondary button and secondary input are not related */}
+            {secondaryInstructions && (
+              <SecondaryText secondaryInstructions={secondaryInstructions}>
+                {secondaryInstructions}
+              </SecondaryText>
+            )}
+            {secondaryInput || null}
+          </DialogWrapper>
+          {annoSelect || null}
+        </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Tooltip content={cancelTooltipContent}>
+              <Button onClick={handleCancel}>Cancel</Button>
+            </Tooltip>
+            {/* we might rename, secondary button and secondary input are not related */}
+            {handleSecondaryButtonSubmit && secondaryButtonText ? (
               <Button
-                {...primaryButtonProps} // eslint-disable-line react/jsx-props-no-spreading -- Spreading props allows for modularity
-                onClick={handleSubmit}
+                onClick={handleSecondaryButtonSubmit}
                 disabled={!text || validationError}
-                intent="primary"
-                type="submit"
+                intent="none"
+                type="button"
               >
-                {primaryButtonText}
+                {secondaryButtonText}
               </Button>
-            </div>
+            ) : null}
+            <Button
+              {...primaryButtonProps} // Spreading props allows for modularity
+              onClick={handleSubmit}
+              disabled={!text || validationError}
+              intent="primary"
+              type="submit"
+            >
+              {primaryButtonText}
+            </Button>
           </div>
-        </form>
-      </Dialog>
-    );
-  }
+        </div>
+      </DialogForm>
+    </Dialog>
+  );
 }

client/src/components/AnnoDialog/style.ts

@@ -0,0 +1,18 @@
+import styled from "@emotion/styled";
+
+interface SecondaryTextProps {
+  secondaryInstructions: string;
+}
+
+export const DialogForm = styled.form`
+  margin: 0;
+  padding: 0;
+`;
+
+export const DialogWrapper = styled.div`
+  margin-bottom: 20px;
+`;
+
+export const SecondaryText = styled.p<SecondaryTextProps>`
+  margin-top: ${(props) => (props.secondaryInstructions ? 20 : 0)};
+`;

client/src/components/AnnoDialog/types.ts

@@ -0,0 +1,21 @@
+import { MouseEvent, SyntheticEvent } from "react";
+
+export interface AnnoDialogProps {
+  isActive: boolean;
+  text: string;
+  title: string;
+  instruction: string;
+  cancelTooltipContent: string;
+  errorMessage?: string;
+  validationError: boolean;
+  annoSelect?: JSX.Element | null;
+  annoInput: JSX.Element | null;
+  secondaryInstructions?: string;
+  secondaryInput?: JSX.Element | null;
+  handleCancel: (e: SyntheticEvent<HTMLElement, Event>) => void;
+  handleSubmit: (e: MouseEvent<HTMLElement>) => void;
+  primaryButtonText: string;
+  secondaryButtonText?: string;
+  handleSecondaryButtonSubmit?: () => void;
+  primaryButtonProps: Record<string, unknown>;
+}

client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/EditGenesetNameDialogue/EditGenesetNameDialogue.tsx

@@ -101,11 +101,7 @@ export class EditGenesetNameDialogue extends React.PureComponent<{}, State> {
     return (
       <>
         <AnnoDialog
-          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: boolean; inputProps: { "data-tes... Remove this comment to see the full error message
           isActive={genesetsUI.isEditingGenesetName === parentGeneset}
-          inputProps={{
-            "data-testid": `${genesetsUI.isEditingGenesetName}:rename-geneset-dialog`,
-          }}
           primaryButtonProps={{
             "data-testid": `${genesetsUI.isEditingGenesetName}:submit-geneset`,
           }}
@@ -114,7 +110,6 @@ export class EditGenesetNameDialogue extends React.PureComponent<{}, State> {
           cancelTooltipContent="Close this dialog without renaming the gene set."
           primaryButtonText="Edit gene set name and description"
           text={newGenesetName}
-          secondaryText={newGenesetDescription}
           validationError={
             this.validate(newGenesetName, genesets) &&
             parentGenesetDescription === newGenesetDescription

client/src/components/RightSideBar/components/GeneExpression/components/GeneSet/components/GeneSetMenus/components/AddGeneToGenesetDialogue/AddGeneToGenesetDialogue.tsx

@@ -70,9 +70,7 @@ export class AddGeneToGenesetDialogue extends React.PureComponent<{}, State> {
     return (
       <>
         <AnnoDialog
-          // @ts-expect-error ts-migrate(2322) FIXME: Type '{ isActive: boolean; inputProps: { "data-tes... Remove this comment to see the full error message
           isActive={genesetsUI.isAddingGenesToGeneset === geneset}
-          inputProps={{ "data-testid": `${geneset}:create-label-dialog` }}
           primaryButtonProps={{
             "data-testid": `${geneset}:submit-gene`,
           }}