chore: archive Pair.tsx to legacy

src/components/recorder/Pair.tsx

@@ -1,181 +0,0 @@
-import React, { FC, useState } from 'react';
-import { Stack, Button, IconButton, Tooltip, Badge } from "@mui/material";
-import { AddPair, deletePair, UpdatePair } from "../../api/workflow";
-import { WorkflowFile } from "maxun-core";
-import { ClearButton } from "../ui/buttons/ClearButton";
-import { GenericModal } from "../ui/GenericModal";
-import { PairEditForm } from "../../../legacy/src/PairEditForm";
-import { PairDisplayDiv } from "../../../legacy/src/PairDisplayDiv";
-import { EditButton } from "../ui/buttons/EditButton";
-import { BreakpointButton } from "../ui/buttons/BreakpointButton";
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import styled from "styled-components";
-import { LoadingButton } from "@mui/lab";
-
-type WhereWhatPair = WorkflowFile["workflow"][number];
-
-
-interface PairProps {
-  handleBreakpoint: () => void;
-  isActive: boolean;
-  index: number;
-  pair: WhereWhatPair;
-  updateWorkflow: (workflow: WorkflowFile) => void;
-  numberOfPairs: number;
-  handleSelectPairForEdit: (pair: WhereWhatPair, index: number) => void;
-}
-
-
-export const Pair: FC<PairProps> = (
-  {
-    handleBreakpoint, isActive, index,
-    pair, updateWorkflow, numberOfPairs,
-    handleSelectPairForEdit
-  }) => {
-  const [open, setOpen] = useState(false);
-  const [edit, setEdit] = useState(false);
-  const [breakpoint, setBreakpoint] = useState(false);
-
-  const enableEdit = () => setEdit(true);
-  const disableEdit = () => setEdit(false);
-
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => {
-    setOpen(false);
-    disableEdit();
-  }
-
-  const handleDelete = () => {
-    deletePair(index - 1).then((updatedWorkflow) => {
-      updateWorkflow(updatedWorkflow);
-    }).catch((error) => {
-      console.error(error);
-    });
-  };
-
-  const handleEdit = (pair: WhereWhatPair, newIndex: number) => {
-    if (newIndex !== index) {
-      AddPair((newIndex - 1), pair).then((updatedWorkflow) => {
-        updateWorkflow(updatedWorkflow);
-      }).catch((error) => {
-        console.error(error);
-      });
-    } else {
-      UpdatePair((index - 1), pair).then((updatedWorkflow) => {
-        updateWorkflow(updatedWorkflow);
-      }).catch((error) => {
-        console.error(error);
-      });
-    }
-    handleClose();
-  };
-
-  const handleBreakpointClick = () => {
-    setBreakpoint(!breakpoint);
-    handleBreakpoint();
-  };
-
-  return (
-    <PairWrapper isActive={isActive}>
-      <Stack direction="row">
-        <div style={{ display: 'flex', maxWidth: '20px', alignItems: 'center', justifyContent: 'center', }}>
-          {isActive ? <LoadingButton loading variant="text" />
-            : breakpoint ? <BreakpointButton changeColor={true} handleClick={handleBreakpointClick} />
-              : <BreakpointButton handleClick={handleBreakpointClick} />
-          }
-        </div>
-        <Badge badgeContent={pair.what.length} color="primary">
-          <Button sx={{
-            position: 'relative',
-            color: 'black',
-            padding: '5px 20px',
-            fontSize: '1rem',
-            textTransform: 'none',
-          }} variant='text' key={`pair-${index}`}
-            onClick={() => handleSelectPairForEdit(pair, index)}>
-            index: {index}
-          </Button>
-        </Badge>
-        <Stack direction="row" spacing={0}
-          sx={{
-            color: 'inherit',
-            "&:hover": {
-              color: 'inherit',
-            }
-          }}>
-          <Tooltip title="View" placement='right' arrow>
-            <div>
-              <ViewButton
-                handleClick={handleOpen}
-              />
-            </div>
-          </Tooltip>
-
-          <Tooltip title="Raw edit" placement='right' arrow>
-            <div>
-              <EditButton
-                handleClick={() => {
-                  enableEdit();
-                  handleOpen();
-                }}
-              />
-            </div>
-          </Tooltip>
-          <Tooltip title="Delete" placement='right' arrow>
-            <div>
-              <ClearButton handleClick={handleDelete} />
-            </div>
-          </Tooltip>
-        </Stack>
-      </Stack>
-      <GenericModal isOpen={open} onClose={handleClose}>
-        {edit
-          ?
-          <PairEditForm
-            onSubmitOfPair={handleEdit}
-            numberOfPairs={numberOfPairs}
-            index={index.toString()}
-            where={pair.where ? JSON.stringify(pair.where) : undefined}
-            what={pair.what ? JSON.stringify(pair.what) : undefined}
-            id={pair.id}
-          />
-          :
-          <div>
-            <PairDisplayDiv
-              index={index.toString()}
-              pair={pair}
-            />
-          </div>
-        }
-      </GenericModal>
-    </PairWrapper>
-  );
-};
-
-interface ViewButtonProps {
-  handleClick: () => void;
-}
-
-const ViewButton = ({ handleClick }: ViewButtonProps) => {
-  return (
-    <IconButton aria-label="add" size={"small"} onClick={handleClick}
-      sx={{ color: 'inherit', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
-      <VisibilityIcon />
-    </IconButton>
-  );
-}
-
-
-const PairWrapper = styled.div<{ isActive: boolean }>`
-  background-color: ${({ isActive }) => isActive ? 'rgba(255, 0, 0, 0.1)' : 'transparent'};
-  border: ${({ isActive }) => isActive ? 'solid 2px red' : 'none'};
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-  width: 98%;
-  color: gray;
-  &:hover { 
-    color: dimgray; 
-    background: ${({ isActive }) => isActive ? 'rgba(255, 0, 0, 0.1)' : 'transparent'};
-  }
-`;