Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x | import React, { MouseEvent, useEffect, useState } from "react";
import { useGetConnectedPlaybooksQuery } from "../../store/features/integrations/api/getConnectedPlaybooksApi.ts";
function AffectedPlaybooks({ id }) {
const { isFetching, data } = useGetConnectedPlaybooksQuery(id);
const [filteredData, setFilteredData] = useState([]);
const handleClick = (e: MouseEvent<HTMLElement>) => {
e.stopPropagation();
setFilteredData(data);
};
const navigateToPlaybook = (e: MouseEvent<HTMLElement>, id: string) => {
e.stopPropagation();
window.open(`/playbooks/${id}`, "_blank");
};
useEffect(() => {
Iif (data?.length > 0) {
setFilteredData(data?.filter((_: any, i: number) => i < 5));
}
}, [data]);
Iif (data?.length === 0) return;
return (
<div className="my-1">
<p className="text-xs">
Playbooks affected by this change: ({data?.length})
</p>
{isFetching && <p className="text-xs">Loading...</p>}
<div className="flex flex-wrap gap-2 my-1">
{filteredData?.map((playbook: any) => (
<div
key={playbook.playbook_id}
onClick={(e) => navigateToPlaybook(e, playbook.playbook_id)}
className="bg-gray-200 p-1 text-xs rounded hover:bg-violet-500 hover:text-white !no-underline transition-all cursor-pointer">
{playbook.playbook_name}
</div>
))}
</div>
{filteredData?.length !== data?.length && (
<p
onClick={handleClick}
className="text-xs text-violet-500 hover:underline cursor-pointer">
See More
</p>
)}
</div>
);
}
export default AffectedPlaybooks;
|