Untitled

mail@pastecode.io avatar
unknown
typescript
a year ago
39 kB
3
Indexable
Never
import React, { useEffect, useRef, useState } from 'react';

import {
  Box,
  Button,
  Drawer,
  FormControl,
  FormControlLabel,
  IconButton,
  Radio,
  RadioGroup,
  TableBody,
  TableCell,
  Table,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  Checkbox,
  TextField,
  Tooltip,
  MenuList,
  MenuItem,
  Grid,
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { CloseOutlined, CheckBoxOutlined } from '@material-ui/icons';
import { Autocomplete } from '@material-ui/lab';
import { isArray, uniqBy } from 'lodash';
import { useSelector } from 'react-redux';

import {
  EpicsIcon,
  JiraIcon2,
  SettingIcon2,
  StoriesIcon,
  AzureIcon,
  ExcelIcon2,
  MondayIcon,
  TrelloIcon,
  SearchOpp,
  CheckCircleIcon,
} from '@/assets';
import { MixTitle } from '@/components';
import { StyledDataSearch, StyledReactiveComponent } from '@/components/Styled';
import { useCustomSearch, useEffectOnlyOnce } from '@/hooks';
import i18n from '@/i18n';
import { IOpportunityEntitiesResponse } from '@/services/opportunity-entities';
import {
  getListIssueTypeProjectV1,
  getListJiraProjectV1,
  IJiraProject,
  IJiraType,
  syncIssueFromJira,
} from '@/services/project-entities';
import { SelectWorkspaceView } from '@/store/workspace/selectors';
import { ITheme } from '@/theme';

import TableSync from './TableSync';
import TableSyncES from './TableSyncES';
import { Column } from './type';

interface ICreateSyncMultipleToolsDialog {
  openSyncMultipleTools: boolean;
  setOpenSyncMultipleTools: (value: boolean) => void;
  refreshData: () => void;
}
type Suggestion = {
  source: IOpportunityEntitiesResponse;
  label: JSX.Element;
};

const defaultColumns = [
  Column.CHECKBOX,
  Column.ISSUE,
  Column.HEADLINE,
  Column.STATUS,
  Column.ASSIGNED_USER,
  Column.ACTION,
];

const listHeadFields = {
  [Column.CHECKBOX]: { id: 0, fieldName: '' },
  [Column.ISSUE]: { id: 1, fieldName: 'ISSUE #' },
  [Column.HEADLINE]: { id: 2, fieldName: 'HEADLINE' },
  [Column.STATUS]: { id: 3, fieldName: 'STATUS' },
  [Column.ASSIGNED_USER]: { id: 4, fieldName: 'ASSIGNEE' },
  [Column.ACTION]: { id: 5, fieldName: '' },
};
const DEFAULT_OPTION_ALL = '1';

export const CreateSyncMultipleToolsDialog: React.FC<ICreateSyncMultipleToolsDialog> = ({
  openSyncMultipleTools,
  setOpenSyncMultipleTools,
  refreshData,
}) => {
  const drawerRef = useRef<any>(null);
  const defaultDrawerWidth = 710;
  const [value, setValue] = useState('Sync to Wishlist');
  const [valueIssue, setValueIssue] = useState('One-way sync from Jira');
  // const [listColumns, setListColumns] = useState<Column[]>(defaultColumns);
  const [listDataIssue, setListDataIssue] = useState([]);
  const [listSelectedId, setListSelectedId] = useState<string[]>([]);
  const [toolSelectedId, setToolSelectedId] = useState(1);
  const [listProjectJira, setListProjectJira] = useState<IJiraProject[]>([]);
  const [projectSelected, setProjectSelected] = useState<IJiraProject | undefined>();
  const [listTypeJira, setListTypeJira] = useState<IJiraType[]>([]);
  const [typeJiraSelected, setTypeJiraSelected] = useState<any>([DEFAULT_OPTION_ALL]);
  const [isSyncIssue, setIsSyncIssue] = useState(false);
  const lastProjectSelected = window.localStorage.getItem('project-selected');
  const selectedWorkspace = useSelector(SelectWorkspaceView);
  const workspaceLocal = JSON.parse(localStorage.getItem('workspace-id') ?? '');

  const classes = useStyles({ defaultDrawerWidth });

  const listActionButtons = [
    {
      id: 1,
      icon: <JiraIcon2 />,
      class: `${classes.logoJira}  ${classes.logoTools}`,
      disable: false,
    },
    {
      id: 2,
      icon: <TrelloIcon />,
      class: `${classes.logoTrello} ${classes.logoTools} `,
      disable: true,
    },
    {
      id: 3,
      icon: <MondayIcon />,
      class: `${classes.logoMonday} ${classes.logoTools}`,
      disable: true,
    },
    {
      id: 4,
      content: 'Azure DevOps',
      icon: <AzureIcon />,
      class: `${classes.logoAzure} ${classes.logoTools}`,
      disable: true,
    },
    {
      id: 5,
      content: 'Excel/CSV',
      icon: <ExcelIcon2 />,
      class: `${classes.logoExcel} ${classes.logoTools}`,
      disable: true,
    },
  ];

  const customSearch = useCustomSearch(['jira_issue.summary', 'jira_issue.issue_key'], 'and', [
    {
      term: {
        del_flg: false,
      },
    },
    {
      term: {
        'workspace.id': selectedWorkspace?.id ?? Number(workspaceLocal) ?? 1,
      },
    },
  ]);

  useEffect(() => {
    if (projectSelected) {
      getListTypeJira(projectSelected);
      // getListWorkFlowStatus(projectSelected);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [projectSelected]);

  // useEffect(() => {
  //   if (formik.values?.type_issue) {
  //     getListWorkFlowStatus(projectSelected);
  //     // getListJiraConfigRequired(projectSelected, formik.values.type_issue);
  //   }
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [formik.values?.type_issue, loadingTypeJira]);

  const getListTypeJira = async (project: any) => {
    // setLoadingTypeJira(true);
    try {
      const response = await getListIssueTypeProjectV1(project.project_key);
      if (response.success) {
        // setLoadingTypeJira(false);
        const allType = {
          issue_id: DEFAULT_OPTION_ALL,
          issue_type: 'All',
          icon_url:
            'https://synchro-apf.atlassian.net/rest/api/2/universal_avatar/view/type/issuetype/avatar/10315?size=medium',
        };
        const dataType =
          response.data?.filter((item: any) => item.issue_type !== 'Subtask' && item.issue_type !== 'Sub-task') ?? [];
        const listTypeJiraRes =
          dataType?.filter((item: any) => item.issue_type === 'Epic' || item.issue_type === 'Story') ?? [];
        listTypeJiraRes.push(allType);
        setListTypeJira(listTypeJiraRes);
        setTypeJiraSelected(listTypeJiraRes.map((i: any) => i.issue_id));
        // formik.setFieldValue('type_issue', listTypeJiraRes?.[0]?.issue_type ?? '');
        // setIsShowDescriptionField(false);
        // getListJiraConfigRequired(projectSelected, listTypeJiraRes, listTypeJiraRes?.[0]?.issue_type ?? '');
      } else {
        // setLoadingTypeJira(false);
      }
    } catch {
      // setLoadingTypeJira(false);
    }
  };

  const handleCheckType = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
    const checkedValue = event.target.value;
    const allValuesId = listTypeJira?.map((i) => i.issue_id);

    setTypeJiraSelected((prev: any) => {
      if (checked){
        if (checkedValue !== DEFAULT_OPTION_ALL) {
          const list = [...prev, checkedValue]
          if (list.length === allValuesId.length-1){
            return [...allValuesId]
          }
          return list;
        }
        if (checkedValue === DEFAULT_OPTION_ALL) return [...allValuesId];
      }

      if (!checked){
        if (checkedValue !== DEFAULT_OPTION_ALL) {
          const list = prev.filter((item: any) => item !== checkedValue);
          if (list.length === allValuesId.length-1){
            return list.filter((i: any) => i !== DEFAULT_OPTION_ALL)
          }
          return list
        }
        if (checkedValue === DEFAULT_OPTION_ALL) return [];
      }
      return [];
    });
    // refreshData?.();

    // setTypeJiraSelected((prevValues: any) => {
    //   // if (Number(checkedValue) === Number(DEFAULT_OPTION_ALL)) return [...allValuesId];

    //   if (checked && Number(checkedValue) === Number(DEFAULT_OPTION_ALL)) {
    //     return [...allValuesId];
    //   }
    //   if (
    //     checked &&
    //     Number(checkedValue) !== Number(DEFAULT_OPTION_ALL) &&
    //     prevValues.length === allValuesId.length - 1
    //   ) {
    //     console.log('bbb checkedValue', {
    //       checked,
    //       a: Number(checkedValue) !== Number(DEFAULT_OPTION_ALL),
    //       c: typeJiraSelected.length === allValuesId.length - 1,
    //       typeJiraSelected,
    //       allValuesId,
    //     });
    //     return [...allValuesId];
    //   }

    //   if (checked) return [...prevValues, checkedValue];

    //   if (!checked && Number(checkedValue) === Number(DEFAULT_OPTION_ALL)) {
    //     return [];
    //   }
    //   if (!checked && Number(checkedValue) !== Number(DEFAULT_OPTION_ALL))
    //     return allValuesId.filter(
    //       (i) => Number(i) !== Number(DEFAULT_OPTION_ALL) && Number(i) !== Number(checkedValue),
    //     );
    // return prevValues.filter((i: any) => i !== checkedValue);
    // });

    // const checkConditionType = typeJiraSelected.some((item: any) => item === '10014' || item === 'Story');
    // if (checked) {
    //   if (event.target.value === 'All' || checkConditionType) {
    //     return setTypeJiraSelected(['Story', '10014', 'All']);
    //   }
    //   if (event.target.value === 'Story' || event.target.value === '10014') {
    //     setTypeJiraSelected((prev: any) => {
    //       return [event.target.value];
    //     });
    //   }
    // } else {
    //   if (event.target.value === 'All') {
    //     return setTypeJiraSelected([]);
    //   }
    //   if (event.target.value === 'Story' || event.target.value === '10014') {
    //     return setTypeJiraSelected((prev: any) => [
    //       ...prev.filter((id: any) => id !== event.target.value && id !== 'All'),
    //     ]);
    //   }
    // }
  };

  console.log('xxx list type & pro jira', listProjectJira, listTypeJira);
  // console.log('xxx list jira', listTypeJira);

  const handlePostIssue = async () => {
    const payload = {
      issues: listSelectedId,
    };
    const { success, data } = await syncIssueFromJira(payload, selectedWorkspace?.id);
    if (success) {
      setIsSyncIssue(true);
      setListSelectedId([]);
      setTimeout(() => {
        setIsSyncIssue(false);
      }, 1000);
      console.log('xxx list jira', data);
    }
  };

  useEffect(() => {
    setProjectSelected(lastProjectSelected ? JSON.parse(lastProjectSelected) : undefined);
    // setLastRefreshSelect(Date.now());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lastProjectSelected]);

  const getListProjectJira = async () => {
    // setIsLoadingProjectJira(true);

    try {
      const response = await getListJiraProjectV1();
      if (response.success) {
        // console.log('here', response.data);
        if (isArray(response.data) && response.data?.length > 0) {
          setListProjectJira(response.data);
        } else {
          setListProjectJira([]);
        }
      } else {
        setListProjectJira([]);
      }
    } catch {
      setListProjectJira([]);
    }

    // setIsLoadingProjectJira(false);
  };

  useEffectOnlyOnce(() => {
    getListProjectJira();
  });
  const handleChangeProject = (event: object, valueCheck: any | null) => {
    if (valueCheck) {
      setProjectSelected(valueCheck);
    } else {
      setProjectSelected(undefined);
    }
  };

  const anchorPosition = 'right';

  const handleChange = (event: any) => {
    setValue(event.target.value);
  };
  const handleChangeIssue = (event: any) => {
    setValueIssue(event.target.value);
  };
  // console.log('here', listDataIssue);
  const renderIconType = (type: string) => {
    if (type === 'Epic') {
      return <EpicsIcon className={classes.iconIssue} />;
    }
    if (type === 'Story') {
      return <StoriesIcon />;
    }
    return <></>;
  };

  return (
    <>
      <TableSyncES
        setListDataIssue={setListDataIssue}
        projectSelected={projectSelected}
        typeJiraSelected={typeJiraSelected}
        refreshData={refreshData}
      />

      <Drawer
        ref={drawerRef}
        anchor={anchorPosition}
        open={openSyncMultipleTools}
        onClose={() => {
          setOpenSyncMultipleTools(false);
        }}
        className={classes.drawer}
        classes={{
          paper: classes.paper,
          // paperAnchorDockedLeft: classes.paperAnchorDockedLeft,
        }}
        style={{ zIndex: 1200 }}
      >
        <Box className={classes.formCreate}>
          <Box display="flex" flexDirection="column" height="100%">
            <Box style={{ background: '#F8F8F8' }}>
              <Box className={classes.boxTopTitle}>
                <Typography className={classes.title}>Load/Sync Opportunities</Typography>
                <Box display="flex" flexDirection="flex-end" alignItems="center" justifyContent="flex-end" mt="-3px">
                  <IconButton
                    onClick={() => {
                      setOpenSyncMultipleTools(false);
                    }}
                    className={classes.moreAction}
                  >
                    <CloseOutlined />
                  </IconButton>
                </Box>
              </Box>
              <Box className={classes.boxTopContainer}>
                <Box className={`${classes.styleBox} ${classes.marginTopButton}`}>
                  <Typography className={classes.subTitle}>Tool</Typography>
                  <Box>
                    {listActionButtons.map((item) => {
                      return (
                        <Button
                          key={item.id}
                          className={item.class}
                          color={toolSelectedId === item.id ? 'primary' : 'default'}
                          onClick={() => {
                            setToolSelectedId(item.id);
                          }}
                          variant="outlined"
                          disabled={item.disable}
                        >
                          {item.icon}
                          {item.content && (
                            <Typography
                              style={{
                                fontSize: '10px',
                                color: item.disable ? 'rgba(0, 0, 0, 0.26)' : '#0056D8',
                                fontFamily: 'poppins',
                              }}
                            >
                              {item.content}
                            </Typography>
                          )}
                        </Button>
                      );
                    })}
                  </Box>
                </Box>
                <Box className={classes.styleBox}>
                  <FormControl component="fieldset">
                    <RadioGroup
                      className={classes.groupRadio}
                      aria-label="gender"
                      name="gender1"
                      value={value}
                      onChange={handleChange}
                    >
                      <FormControlLabel
                        disabled={true}
                        value="Two-way sync"
                        control={<Radio color="primary" />}
                        label="Two-way sync"
                      />
                      <FormControlLabel
                        value="One-way sync from Jira"
                        control={<Radio color="primary" />}
                        label="One-way sync from Jira"
                        checked
                      />
                      <FormControlLabel
                        disabled={true}
                        value="One-off import"
                        control={<Radio color="primary" />}
                        label="One-off import"
                      />
                    </RadioGroup>
                  </FormControl>
                </Box>
                <Box className={classes.styleBox}>
                  <Box display="flex" alignItems="flex-end">
                    <Box className={classes.marginRight20px} width={220}>
                      <MixTitle title="Jira Project" />
                      <Autocomplete
                        // key={refreshListProject}
                        disableClearable
                        id="project_jira"
                        options={listProjectJira ?? []}
                        getOptionLabel={(option) => option.project_name ?? ''}
                        className={classes.autocomplete}
                        renderInput={(params) => (
                          <TextField {...params} fullWidth variant="outlined" placeholder="Select Project" />
                        )}
                        onChange={(e: object, valueSelect: any | null) => {
                          if (valueSelect) {
                            handleChangeProject(e, valueSelect);
                          } else {
                            setProjectSelected(undefined);
                          }
                        }}
                        placeholder="Select Project"
                        value={projectSelected}
                      />
                    </Box>
                    <Tooltip title="Search" placement="top-start">
                      <Box className={classes.searchInputField}>
                        <StyledDataSearch
                          render={({ loading, error, data, downshiftProps: { isOpen, getItemProps } }) => {
                            if (!isOpen || !data.length) return;
                            const suggestions = uniqBy(data as Suggestion[], (suggestion) => suggestion.source.id);
                            // console.log('here StyledDataSearch', suggestions);
                            return (
                              <MenuList className={classes.searchList}>
                                {suggestions.map((suggestion) => (
                                  <MenuItem onCl key={suggestion.source.id} {...getItemProps({ item: suggestion })}>
                                    {suggestion.label}
                                  </MenuItem>
                                ))}
                              </MenuList>
                            );
                          }}
                          componentId="SearchOpportunity"
                          dataField={['jira_issue.summary', 'jira_issue.issue_key']}
                          queryFormat="or"
                          placeholder={i18n.t('screens.placeholder.search')}
                          iconPosition="right"
                          showIcon={false}
                          showFilter={false}
                          innerClass={{
                            input: 'searchInput',
                            title: 'titleSearch',
                          }}
                          defaultQuery={() => customSearch?.searchQuery}
                          onChange={customSearch.onChange}
                          value={customSearch.value}
                          onValueChange={customSearch.onValueChange}
                          onValueSelected={customSearch.onValueSelected}
                          className={classes.searchInput}
                          parseSuggestion={(suggestion) => {
                            return {
                              label: (
                                <Grid container>
                                  <Grid item xs={12}>
                                    <Box whiteSpace="normal">{suggestion.source.jira_issue[0].summary}</Box>
                                    {suggestion.source.jira_issue && (
                                      <Box style={{ background: '#DEEBFF' }} className={classes.boxOppType}>
                                        <Typography
                                          component="p"
                                          style={{ color: '#333333' }}
                                          className={classes.oppTypeContent}
                                        >
                                          {suggestion.source.jira_issue[0].issue_key}
                                        </Typography>
                                      </Box>
                                    )}
                                  </Grid>
                                </Grid>
                              ),
                              value: suggestion.source.headline,
                              source: suggestion.source,
                            };
                          }}
                        />
                        <StyledReactiveComponent
                          componentId="Search"
                          filterLabel="Keyword"
                          showFilter={true}
                          render={({ setQuery }) => (
                            <IconButton
                              color="primary"
                              onClick={() => {
                                customSearch.onClickSearch(setQuery);
                              }}
                              onMouseDown={() => {
                                // setShowSearching((s) => !s);
                                // TODO: wait for element DOM is loaded.
                                setTimeout(() => {
                                  (document.querySelector(
                                    `.${classes.searchInput} input`,
                                  ) as HTMLInputElement)?.focus();
                                });
                              }}
                              ref={customSearch.searchBtnRef}
                              className={classes.fillColorActionButton}
                            >
                              {/* <SearchInputIcon /> */}
                              <SearchOpp />
                              {/* <Search /> */}
                            </IconButton>
                          )}
                        />
                      </Box>
                    </Tooltip>
                  </Box>
                </Box>
                <Box className={classes.styleBox}>
                  <Typography className={classes.subTitle}>Issue Types</Typography>
                  <Box display="flex" style={{ gap: '30px', marginLeft: '-2px' }}>
                    {listTypeJira?.map((item) => {
                      return (
                        <Box
                          key={item.issue_id}
                          display="flex"
                          alignItems="center"
                          className={classes.paddingRightCheckBox}
                        >
                          <Checkbox
                            checkedIcon={<CheckBoxOutlined color="primary" />}
                            name="epics"
                            onChange={handleCheckType}
                            value={item.issue_id}
                            checked={typeJiraSelected.includes(item.issue_id)}
                          />
                          {renderIconType(item.issue_type)}

                          <Typography>{item.issue_type}</Typography>
                        </Box>
                      );
                    })}
                  </Box>
                </Box>
                <Box className={classes.styleBox}>
                  <Box display="flex" gridGap={12} ml="auto" justifyContent="flex-end">
                    <Box position="relative" minWidth="160px">
                      <Button
                        className={classes.searchBtn}
                        //   onClick={handleProcess}
                        fullWidth
                        variant="contained"
                      >
                        Search...
                      </Button>
                    </Box>
                  </Box>
                </Box>
              </Box>
            </Box>
            <Box>
              <Box className={classes.boxBottomTitle}>
                <Typography className={classes.title}>Choose Jira Issues to Sync</Typography>
              </Box>
              {isSyncIssue && (
                <Box className={classes.notifySyncSuccess}>
                  <CheckCircleIcon />
                  <Typography className={classes.textNotify}>
                    {`${listSelectedId.length} opportunities synchronised!`}
                  </Typography>
                </Box>
              )}
              <Box className={classes.boxBottomContainer}>
                <Box
                  className={`${classes.paddingBottomBox} ${classes.marginTopButton30px}`}
                  display="flex"
                  alignItems="center"
                >
                  <FormControl component="fieldset">
                    <RadioGroup
                      className={classes.groupRadio}
                      aria-label="gender"
                      name="gender1"
                      value={valueIssue}
                      onChange={handleChangeIssue}
                    >
                      <FormControlLabel
                        value="Sync to Wishlist"
                        control={<Radio color="primary" />}
                        label="Sync to Wishlist"
                      />
                      <FormControlLabel
                        value="Map Jira Statuses"
                        control={<Radio color="primary" />}
                        label="Map Jira Statuses"
                      />
                    </RadioGroup>
                  </FormControl>
                  <IconButton>
                    <SettingIcon2 />
                  </IconButton>
                </Box>
                <Box className={classes.paddingBottomBox}>
                  <TableContainer className={classes.rootTableContainer} id="sync-multiple-tools">
                    <Table className={classes.rootTable}>
                      <TableHead classes={{ root: classes.headTable }}>
                        <TableRow>
                          {defaultColumns.map((column) => {
                            return (
                              <TableCell key={column} align="inherit" style={{ whiteSpace: 'nowrap' }}>
                                {listHeadFields[column].fieldName}
                              </TableCell>
                            );
                          })}
                        </TableRow>
                      </TableHead>

                      <TableBody className={classes.body}>
                        {listDataIssue?.map((record: any) => {
                          return (
                            <TableSync
                              listSelectedId={listSelectedId}
                              setListSelectedId={setListSelectedId}
                              listColumns={defaultColumns}
                              key={record?.id}
                              record={record}
                            />
                          );
                        })}
                      </TableBody>
                    </Table>
                  </TableContainer>
                </Box>
                <Box
                  className={`${classes.paddingBottomBox} ${classes.marginTopButton}`}
                  style={{ paddingBottom: '20px' }}
                >
                  <Box display="flex" gridGap={12} ml="auto" justifyContent="flex-end">
                    <Box position="relative" minWidth="160px">
                      <Button
                        disabled={!listSelectedId.length}
                        className={classes.submitBtn}
                        onClick={handlePostIssue}
                        fullWidth
                        variant="contained"
                      >
                        {`Sync ${listSelectedId.length} New Opportunities`}
                      </Button>
                    </Box>
                  </Box>
                </Box>
              </Box>
            </Box>
          </Box>
        </Box>
      </Drawer>
    </>
  );
};

interface IStyles {
  defaultDrawerWidth: number;
}

const useStyles = makeStyles<ITheme, IStyles>((theme: ITheme) => ({
  formCreate: {
    width: ({ defaultDrawerWidth }) => `${defaultDrawerWidth}px)`,
    flexDirection: 'column',
    height: '100%',
  },
  drawer: {
    width: '0px',
    flexShrink: 0,
    top: '64px !important',
    '& .MuiBackdrop-root': {
      top: '64px',
      left: '56px',
      backgroundColor: 'transparent',
      display: 'none',
    },
    overflow: 'auto',
    '&::-webkit-scrollbar': {
      width: 9,
      height: 9,
    },

    '&::-webkit-scrollbar-track': {
      background: '#ffffff',
      // borderRadius: 12,
    },

    '&::-webkit-scrollbar-thumb': {
      backgroundColor: '#bdbdbd',
      // borderRadius: 12,
      '&:hover': {
        backgroundColor: '#757575',
      },
    },
  },
  paper: {
    backgroundColor: '#ffffff',
    width: ({ defaultDrawerWidth }) => `${defaultDrawerWidth}px`,
    // padding: '0px 15px 0 15px',
    top: '80px',
    marginLeft: '56px',
    borderTop: 'none',
    // boxShadow: '-2px 4px 4px rgba(0,0,0,.15)',
    borderLeft: '2px solid #A4A4A4',
    boxShadow: '4px 4px 4px rgb(0 0 0 / 25%)',
    overflowY: 'auto',
    '&::-webkit-scrollbar': {
      width: '8px',
      height: '8px',
    },
    '&::-webkit-scrollbar-track': {
      background: '#f1f1f1',
      borderRadius: '8px',
    },
    '&::-webkit-scrollbar-thumb': {
      background: '#888',
      borderRadius: '8px',
    },
    '&::-webkit-scrollbar-thumb:hover': {
      background: '#555',
    },
  },
  boxTopTitle: {
    display: 'flex',
    position: 'sticky',
    backgroundColor: '#D9D9D9',
    // marginLeft: '-15px',
    // marginRight: '-15px',
    padding: '12px 20px 12px 20px',
    alignItems: 'center',
    height: '58px',
  },
  boxBottomTitle: {
    display: 'flex',
    position: 'sticky',
    backgroundColor: '#D9D9D9',
    // marginLeft: '-15px',
    // marginRight: '-15px',
    padding: '12px 20px 12px 20px',
    borderTop: '1px solid #707070',
    height: '58px',
  },
  title: {
    fontSize: '16px',
    fontWeight: 600,
    lineHeight: '33px',
    letterSpacing: '-0.015em',
    flex: 1,
    width: '100%',
  },
  subTitle: {
    fontSize: '14px',
    fontWeight: 600,
    lineHeight: '20px',
    color: '#333333',
    marginBottom: '10px',
    display: 'block',
  },
  moreAction: {
    width: '31px',
    height: '31px',
    marginLeft: '2px',
    '& .MuiIconButton-label': {
      '& svg': {
        fontSize: '22px',
      },
    },
  },
  groupRadio: {
    '& .Mui-disabled': {
      color: 'rgba(0, 0, 0, 0.23)',
    },
    flexDirection: 'row',
  },
  dialogActions: {
    padding: '20px 24px 24px 24px',
    display: 'flex',
    justifyContent: 'space-between',
    gap: 24,
    boxShadow: '0 1px 5px rgba(0,0,0,0.06)',
    '& button': {
      height: '38px',
      fontWeight: 500,
      fontSize: '14px',
      lineHeight: '20px',
      padding: '10px 16px',
      minWidth: '110px',
    },
  },
  submitBtn: {
    height: '38px',
    background: '#0056D8',
    color: '#fff',
    '&:hover': {
      background: '#1C48A9',
      color: '#fff',
      boxShadow: 'none',
    },
  },
  searchBtn: {
    height: '38px',
    // padding: '0px 12px',
    // borderRadius: '5px',
    // width: '84px',
    color: '#333333',
    background: '#E1E6F0',
    border: ' 1px solid #E1E6F0',
    '&:hover': {
      border: ' 1px solid #D1D8E5',
      background: '#D1D8E5',
      color: '#0056D8',
      boxShadow: 'none',
    },
  },
  boxBottomContainer: {
    // overflow: 'auto',
    height: '100%',
    '&::-webkit-scrollbar': {
      width: 9,
      height: 9,
    },

    '&::-webkit-scrollbar-track': {
      background: '#ffffff',
      // borderRadius: 12,
    },

    '&::-webkit-scrollbar-thumb': {
      backgroundColor: '#bdbdbd',
      // borderRadius: 12,
      '&:hover': {
        backgroundColor: '#757575',
      },
    },
  },
  rootTableContainer: {
    flex: 1,
    maxHeight: '100%',
    borderRadius: '0px',
    border: '0px solid #DADADA',

    // paddingRight: '6px',
    // overflow: 'auto',
    // maxHeight: (props) => (props.collapse ? 'calc(100vh - 190px)' : 'calc(100vh - 230px)'),
    // '&::-webkit-scrollbar': {
    //   width: 9,
    //   height: 9,
    // },

    // '&::-webkit-scrollbar-track': {
    //   background: '#ffffff',
    //   // borderRadius: 12,
    // },

    // '&::-webkit-scrollbar-thumb': {
    //   backgroundColor: '#bdbdbd',
    //   // borderRadius: 12,
    //   '&:hover': {
    //     backgroundColor: '#757575',
    //   },
    // },
  },
  rootTable: {
    borderSpacing: '0px 10px',
    borderCollapse: 'inherit',
    // minWidth: 732,
    '& .MuiTableHead-root': {
      backgroundColor: '#fff',
    },
    '& .MuiTableCell-root': {
      borderRight: '0px',
      borderBottom: '0px',
    },
    '& th': {
      // padding: '12px',
      fontSize: '12px',
      color: '#707070',
      padding: '0px 12px',
      '&:first-child': {
        // paddingLeft: '40px',
      },
    },
    '& td': {
      color: '#707070',
      fontSize: '14px',
    },
  },
  headTable: {
    // minWidth: 732,
    position: 'sticky',
    top: 0,
    left: 0,
    // backgroundColor: 'white',
    zIndex: 2,
    borderBottom: '1px solid #C4C4C4',
  },
  body: {
    overflow: 'auto',
    '& tr': {
      // backgroundColor: '#F9FBFF',
    },
    '& td': {
      borderTop: '1px solid #C4C4C4',
      borderBottom: '1px solid #C4C4C4 !important',
      '&:first-child': {
        borderRadius: '5px 0 0 5px',
        borderLeft: '1px solid #C4C4C4 !important',
        paddingLeft: '0px',
        paddingRight: '0px',
      },
      '&:last-child': {
        borderRadius: '0 5px 5px 0',
        borderRight: '1px solid #C4C4C4 !important',
        paddingLeft: '0px',
        paddingRight: '0px',
      },
    },
  },
  // screenName: {
  //   border: '1px solid #D9D9D9',
  //   height: '38px',
  //   '& .MuiTypography-root': {
  //     color: '#333333',
  //     fontSize: '14px',
  //     lineHeight: '20px',
  //     fontWeight: 400,
  //   },
  //   '& .MuiButton-endIcon': {
  //     marginRight: '-16px',
  //   },
  //   background: '#fff',
  // },
  // selectedFilterText: {
  //   fontWeight: 400,
  //   marginRight: '4px',
  //   whiteSpace: 'nowrap',
  //   textOverflow: 'ellipsis',
  //   overflow: 'hidden',
  //   // color: (props) => (props.openColumn ? 'rgba(0, 0, 0, 0.26)' : theme.palette.primary.main),
  // },
  boxSelectedFilter: {
    display: 'flex',
    flex: '1 1 0%',
    overflow: 'hidden',
    alignItems: 'center',
    marginLeft: '-12px',
    '& svg': {
      height: '22px ',
      // color: '#ffd351',
    },
  },
  fillColorActionButton: {
    '&:active': {
      backgroundColor: '#EEEEEE',
    },
    '&:hover': {
      '& svg': {
        '& path': {
          color: '#0056D8',
        },
      },
    },
  },
  inputAdornment: {
    height: '38px',
    background: '#fff',
    boxSizing: 'border-box',
    width: '220px',
    paddingLeft: 0,
    '& button': {
      padding: 0,
      marginLeft: '12px',
    },
    '& svg': {
      width: '22px',
      height: '22px',
    },
    '& input::placeholder': {
      fontSize: '14px',
      fontWeight: 500,
      color: '#1e1e1e',
    },
    '& input': {
      fontSize: '14px',
      fontWeight: 500,
      color: '#A4A4A4 !important',
    },
  },
  logoTools: {
    padding: '0',
    height: '40px',
    width: '120px',
  },
  activeTool: {},
  logoJira: {
    '& svg': {
      height: '40px',
      width: '120px',
      transform: 'scale(0.8)',
      '& > g': {
        transform: 'translateY(-10px)',
      },
    },
    '&:active': {
      '& svg': {
        color: '#0056D8',
      },
    },
    '&:disabled': {
      filter: 'grayscale(100%)',
    },
  },
  logoTrello: {
    marginLeft: '7px',
    '& svg': {
      height: '15px',
      width: '120px',
    },
    '&:disabled': {
      filter: 'grayscale(100%)',
    },
  },
  logoMonday: {
    marginLeft: '7px',
    '& svg': {
      height: '26px',
      width: '120px',
    },
    '&:disabled': {
      filter: 'grayscale(100%)',
    },
  },
  logoAzure: {
    marginLeft: '7px',
    '& svg': {
      height: '24px',
      width: '24px',
      marginRight: '5px',
    },
    '&:disabled': {
      filter: 'grayscale(100%)',
    },
  },
  logoExcel: {
    marginLeft: '7px',
    '& svg': {
      height: '32px',
      width: '32px',
    },
    '&:disabled': {
      filter: 'grayscale(100%)',
    },
  },
  styleBox: {
    padding: '0px 36px 20px',
  },
  paddingRightCheckBox: {
    padding: '0px !important',
    display: 'flex',
    alignItems: 'center',
    '& .MuiButtonBase-root': {
      padding: '0px !important',
    },
    '& .MuiTypography-body1': {
      marginLeft: '3px',
      color: '#555555',
    },
  },
  marginLeft3px: {
    marginLeft: '0px !important',
  },
  iconIssue: {
    height: '14px',
    width: '14px',
  },
  paddingBottomBox: {
    padding: '0 36px',
  },
  marginTopButton: {
    marginTop: '20px',
  },
  marginTopButton30px: {
    marginTop: '30px',
  },
  marginRight20px: {
    marginRight: '20px',
  },
  autocomplete: {
    background: '#fff',
    '& input': {
      padding: '0!important',
    },
    '& .MuiInputBase-root': {
      height: '38px',
      '& .MuiChip-root': {
        borderRadius: '4px',
        height: '24px',
      },
    },
    '& .MuiOutlinedInput-root': {
      padding: 0,
    },
    '& .MuiAutocomplete-inputRoot': {
      padding: '0px 12px !important',
    },
    '& .MuiChip-deleteIcon': {
      width: '18px',
      height: '18px',
    },
  },
  searchInputField: {
    borderRadius: '6px',
    position: 'relative',
    background: '#fff',
    '& .searchInput': {
      height: '38px',
    },
    '& button': {
      position: 'absolute',
      left: '4px',
      top: '3px',
      width: '32px',
      height: '32px',
      padding: 0,
      '& svg': {
        fontSize: '20px',
        width: '22px',
        height: '22px',
        color: '#707070',
      },
    },
    '& div div input': {
      fontFamily: 'Poppins',
      paddingLeft: '40px !important',
      width: '220px',
      transition: 'all 0.3s ease',
      height: '38px',
    },
    '& div div input::placeholder': {
      color: '#c3c2c2',
      fontSize: '14px',
      fontFamily: 'Poppins',
    },
  },
  searchList: {
    position: 'absolute',
    top: 40,
    width: '100%',
    border: '1px solid rgba(0,0,0,.1)',
    borderRadius: 4,
    boxShadow: '0px 0px 30px 0px rgb(82 63 105 / 5%)',
    maxHeight: 375,
    overflowY: 'auto',
    zIndex: 3,
    backgroundColor: '#fff',
    padding: 0,
    '& > li': {
      padding: 10,
    },
  },
  boxOppType: {
    background: '#DEEBFF',
    borderRadius: '4px',
    width: 'fit-content',
  },
  oppTypeContent: {
    color: '#333333',
    padding: '2px 10px',
    textTransform: 'uppercase',
    borderRadius: '4px',
    fontSize: '9px',
    fontWeight: 600,
    lineHeight: '16px',
    marginTop: '4px',
  },
  notifySyncSuccess: {
    height: '44px',
    background: '#FFF6D2',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    margin: '28px 0',
  },
  textNotify: {
    color: '#2BAC47',
    fontWeight: 500,
    fontSize: '16px',
    lineHeight: '20px',
    marginLeft: '10px',
  },
}));
export default CreateSyncMultipleToolsDialog;