All files / src/components HeadingTitle.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useState } from "react";
import useIsPrefetched from "../hooks/playbooks/useIsPrefetched.ts";
import usePlaybookKey from "../hooks/playbooks/usePlaybookKey";
import { useDispatch, useSelector } from "react-redux";
import {
  currentPlaybookSelector,
  setCurrentPlaybookKey,
} from "../store/features/playbook/playbookSlice.ts";
import { Check, Edit } from "@mui/icons-material";
import CustomInput from "./Inputs/CustomInput.tsx";
import { InputTypes } from "../types/inputs/inputTypes.ts";
 
type HeadingTitleProps = {
  heading: string;
};
 
function HeadingTitle({ heading }: HeadingTitleProps) {
  const [showEdit, setShowEdit] = useState<boolean>(false);
  const isPrefetched = useIsPrefetched();
  const [executionId] = usePlaybookKey("executionId");
  const currentPlaybook = useSelector(currentPlaybookSelector);
  const dispatch = useDispatch();
  const [isOnPlaybookPage] = usePlaybookKey("isOnPlaybookPage");
 
  const setName = (value: string) => {
    dispatch(setCurrentPlaybookKey({ key: "name", value }));
  };
 
  return (
    <div className="flex gap-2 items-center">
      {showEdit ? (
        <form onSubmit={() => setShowEdit(!showEdit)}>
          <CustomInput
            inputType={InputTypes.TEXT}
            value={currentPlaybook?.name ?? ""}
            handleChange={setName}
            placeholder={"Enter Playbook name"}
            className="!w-[300px]"
          />
        </form>
      ) : (
        <div
          className={`${!isOnPlaybookPage ? "" : "cursor-pointer text-sm"}`}
          onClick={isOnPlaybookPage ? () => setShowEdit(!showEdit) : () => {}}>
          {!isPrefetched && isOnPlaybookPage ? "Editing - " : ""}{" "}
          {currentPlaybook?.name && isOnPlaybookPage
            ? currentPlaybook?.name ?? heading
            : heading}
          {isPrefetched && <> - {executionId}</>}
        </div>
      )}
      {isOnPlaybookPage && !isPrefetched && (
        <button className="ml-2 text-xs bg-white hover:text-white hover:bg-violet-500 text-violet-500 hover:color-white-500 p-1 border border-violet-500 transition-all rounded">
          <div className="icon" onClick={() => setShowEdit(!showEdit)}>
            {showEdit ? <Check /> : <Edit />}
          </div>
        </button>
      )}
    </div>
  );
}
 
export default HeadingTitle;