From 2900b6670db19a497ff63d0210f931bb9857babd Mon Sep 17 00:00:00 2001
From: Sain <sausai01@protiviti.com>
Date: Tue, 22 Nov 2022 21:47:22 +0800
Subject: [PATCH] added tooltip and fix same ctid for component template issue

---
 src/App.tsx                               |   6 +-
 src/components/cardWithLeftIcon/index.tsx | 647 ++++++++++++----------
 src/components/dropWrapper/index.tsx      |  12 +-
 src/components/infoTooltip/index.tsx      |   4 +-
 src/components/leftPanel/index.tsx        |  57 +-
 src/utils/object.ts                       |  24 +
 6 files changed, 428 insertions(+), 322 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0f25d49..db0ed6c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -280,7 +280,11 @@ const App = () => {
           width={520}
           visible={isSelectOrganizationsVisble}
           onOk={selectOrgOkHandler}
-          closable={false}
+          onCancel={() => {
+            process.env.NODE_ENV !== 'production'
+              ? (window.location.href = sanboxSetting.api.url)
+              : (window.location.href = productionSetting.api.url);
+          }}
           footer={[
             <>
               <Button
diff --git a/src/components/cardWithLeftIcon/index.tsx b/src/components/cardWithLeftIcon/index.tsx
index 3ffa07d..10d1efc 100644
--- a/src/components/cardWithLeftIcon/index.tsx
+++ b/src/components/cardWithLeftIcon/index.tsx
@@ -1,5 +1,7 @@
+import { faCircle, faQuestion } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Card, Col, Row } from 'antd';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { productionSetting, sanboxSetting } from '../../apiConfig/setting';
 
@@ -24,6 +26,9 @@ export interface Props {
   IconName?: any;
   isComponentTab?: boolean;
   setLeftpanelSelectedElem?: (a: HTMLElement) => void;
+  isShowToolTip?: boolean;
+  setIsShowToolTip?: (val: any) => void;
+  getTooltipType?: (val: any) => void;
 }
 
 const CardWithLeftIcon: React.FC<Props> = (props: Props) => {
@@ -32,6 +37,9 @@ const CardWithLeftIcon: React.FC<Props> = (props: Props) => {
     data,
     isDraggableCardVisibleMethod,
     setLeftpanelSelectedElem,
+    setIsShowToolTip,
+    isShowToolTip,
+    getTooltipType,
   } = props;
   const {
     Name,
@@ -42,6 +50,8 @@ const CardWithLeftIcon: React.FC<Props> = (props: Props) => {
     disabledItem,
     Type,
   } = props.data;
+
+  const [showToolTip, setShowToolTip] = useState(isShowToolTip);
   const onDragStart = (e: any) => {
     const target = e.target;
     !!setLeftpanelSelectedElem && setLeftpanelSelectedElem(e.target);
@@ -76,308 +86,347 @@ const CardWithLeftIcon: React.FC<Props> = (props: Props) => {
     // e.target.style.top = `${e.pageY - 75}px`;
   };
 
+  useEffect(() => {
+    setIsShowToolTip && setIsShowToolTip(showToolTip);
+    getTooltipType && getTooltipType(data?.Type);
+  }, [showToolTip, data]);
+
   return (
-    <Card
-      size="small"
-      className={styles.cardwrapper + ' ' + disabledItem}
-      style={inlineStyles}
-      draggable={true}
-      onDragStart={onDragStart}
-      onDragOver={onDragOver}
-      onDragEnd={onDragEnd}
-      id={id?.toString()}
-    >
-      <Row>
-        <Col span="5">
-          <span className={styles.iconwrapper + ' customicon'}>
-            {isComponentTab ? (
-              <>
-                {data?.Type?.toLowerCase().includes(
-                  'AssessmentComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/AssessmentComponent.png`}
-                    alt="AssessmentComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'BasicComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/BasicComponent.png`}
-                    alt="BasicComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'CocurricularComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/CocurricularComponent.png`}
-                    alt="CocurricularComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'CompetencyComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/CompetencyComponent.png`}
-                    alt="CompetencyComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'CourseComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/CourseComponent.png`}
-                    alt="CourseComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'ExtracurricularComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/ExtracurricularComponent.png`}
-                    alt="ExtracurricularComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'JobComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/JobComponent.png`}
-                    alt="JobComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'WorkExperienceComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/WorkExperienceComponent.png`}
-                    alt="WorkExperienceComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'CredentialComponent'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/CredentialComponent.png`}
-                    alt="CredentialComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'ComponentCondition'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/ComponentCondition.png`}
-                    alt="ComponentCondition"
-                    className="componentIcon"
-                  />
-                )}
-                {data?.Type?.toLowerCase().includes(
-                  'selection'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/SelectionCondition.png`}
-                    alt="SelectionCondition"
-                    className="componentIcon"
-                  />
-                )}
-              </>
-            ) : (
-              <>
-                {Type?.toLowerCase().includes('credential'.toLowerCase()) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/CredentialComponent.png`}
-                    alt="CredentialComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {Type?.toLowerCase().includes('course'.toLowerCase()) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/CourseComponent.png`}
-                    alt="courseComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {Type?.toLowerCase().includes('Basic'.toLowerCase()) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/BasicComponent.png`}
-                    alt="BasicComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {Type?.toLowerCase().includes(
-                  'competency'.toLocaleLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/CompetencyComponent.png`}
-                    alt="CompetencyComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {Type?.toLowerCase().includes('assessment'.toLowerCase()) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/AssessmentComponent.png`}
-                    alt="AssessmentComponent"
-                    className="componentIcon"
-                  />
-                )}
+    <>
+      <Card
+        size="small"
+        className={styles.cardwrapper + ' ' + disabledItem}
+        style={inlineStyles}
+        draggable={true}
+        onDragStart={onDragStart}
+        onDragOver={onDragOver}
+        onDragEnd={onDragEnd}
+        id={id?.toString()}
+      >
+        <Row>
+          <Col span="5">
+            <span className={styles.iconwrapper + ' customicon'}>
+              {isComponentTab ? (
+                <>
+                  {data?.Type?.toLowerCase().includes(
+                    'AssessmentComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/AssessmentComponent.png`}
+                      alt="AssessmentComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'BasicComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/BasicComponent.png`}
+                      alt="BasicComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'CocurricularComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/CocurricularComponent.png`}
+                      alt="CocurricularComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'CompetencyComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/CompetencyComponent.png`}
+                      alt="CompetencyComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'CourseComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/CourseComponent.png`}
+                      alt="CourseComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'ExtracurricularComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/ExtracurricularComponent.png`}
+                      alt="ExtracurricularComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'JobComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/JobComponent.png`}
+                      alt="JobComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'WorkExperienceComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/WorkExperienceComponent.png`}
+                      alt="WorkExperienceComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'CredentialComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/CredentialComponent.png`}
+                      alt="CredentialComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'ComponentCondition'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/ComponentCondition.png`}
+                      alt="ComponentCondition"
+                      className="componentIcon"
+                    />
+                  )}
+                  {data?.Type?.toLowerCase().includes(
+                    'selection'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/SelectionCondition.png`}
+                      alt="SelectionCondition"
+                      className="componentIcon"
+                    />
+                  )}
+                </>
+              ) : (
+                <>
+                  {Type?.toLowerCase().includes('credential'.toLowerCase()) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/CredentialComponent.png`}
+                      alt="CredentialComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes('course'.toLowerCase()) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/CourseComponent.png`}
+                      alt="courseComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes('Basic'.toLowerCase()) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/BasicComponent.png`}
+                      alt="BasicComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes(
+                    'competency'.toLocaleLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/CompetencyComponent.png`}
+                      alt="CompetencyComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes('assessment'.toLowerCase()) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/AssessmentComponent.png`}
+                      alt="AssessmentComponent"
+                      className="componentIcon"
+                    />
+                  )}
 
-                {Type?.toLowerCase().includes('Cocurricular'.toLowerCase()) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/CocurricularComponent.png`}
-                    alt="CocurricularComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {Type?.toLowerCase().includes(
-                  'Extracurricular'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/ExtracurricularComponent.png`}
-                    alt="ExtracurricularComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {Type?.toLowerCase().includes('selection'.toLowerCase()) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/SelectionComponent.png`}
-                    alt="SelectionComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {Type?.toLowerCase().includes(
-                  'WorkExperience'.toLowerCase()
-                ) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/WorkExperienceComponent.png`}
-                    alt="WorkExperienceComponent"
-                    className="componentIcon"
-                  />
-                )}
-                {Type?.toLowerCase().includes('JobComponent'.toLowerCase()) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/JobComponent.png`}
-                    alt="JobComponent"
-                    className="componentIcon"
+                  {Type?.toLowerCase().includes(
+                    'Cocurricular'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/CocurricularComponent.png`}
+                      alt="CocurricularComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes(
+                    'Extracurricular'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/ExtracurricularComponent.png`}
+                      alt="ExtracurricularComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes('selection'.toLowerCase()) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/SelectionComponent.png`}
+                      alt="SelectionComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes(
+                    'WorkExperience'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/WorkExperienceComponent.png`}
+                      alt="WorkExperienceComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes(
+                    'JobComponent'.toLowerCase()
+                  ) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/JobComponent.png`}
+                      alt="JobComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                  {Type?.toLowerCase().includes('Addressing'.toLowerCase()) && (
+                    <img
+                      src={`${
+                        process.env.NODE_ENV !== 'production'
+                          ? sanboxSetting.api.url
+                          : productionSetting.api.url
+                      }Images/PathwayBuilder/AddressingComponent.png`}
+                      alt="AddressingConflictComponent"
+                      className="componentIcon"
+                    />
+                  )}
+                </>
+              )}
+            </span>
+          </Col>
+          <Col span={17}>
+            <>
+              <p>{data?.Type?.split(':')[1]}</p>
+              <h5>{Name?.slice(0, 30)}</h5>
+            </>
+          </Col>
+          {isComponentTab && (
+            <Col span={2}>
+              <span
+                className={styles.iconSpacing}
+                style={{ cursor: 'pointer' }}
+                onClick={() => {
+                  setShowToolTip(!showToolTip);
+                  console.log('data----cons', data);
+                }}
+              >
+                <span
+                  className="fa-layers fa-fw fa-lg"
+                  style={{ marginTop: '10px' }}
+                >
+                  <FontAwesomeIcon
+                    icon={faCircle}
+                    className={styles.iconPrimary}
                   />
-                )}
-                {Type?.toLowerCase().includes('Addressing'.toLowerCase()) && (
-                  <img
-                    src={`${
-                      process.env.NODE_ENV !== 'production'
-                        ? sanboxSetting.api.url
-                        : productionSetting.api.url
-                    }Images/PathwayBuilder/AddressingComponent.png`}
-                    alt="AddressingConflictComponent"
-                    className="componentIcon"
+                  <FontAwesomeIcon
+                    style={{ marginLeft: '4px' }}
+                    icon={faQuestion}
+                    transform="shrink-6"
+                    className={styles.iconSecondary}
                   />
-                )}
-              </>
-            )}
-          </span>
-        </Col>
-        <Col span="19">
-          <>
-            <p>{data?.Type?.split(':')[1]}</p>
-            <h5>{Name?.slice(0, 30)}</h5>
-          </>
-        </Col>
-      </Row>
-    </Card>
+                </span>
+              </span>
+            </Col>
+          )}
+        </Row>
+      </Card>
+    </>
   );
 };
 
diff --git a/src/components/dropWrapper/index.tsx b/src/components/dropWrapper/index.tsx
index ba9bb13..6908ffa 100644
--- a/src/components/dropWrapper/index.tsx
+++ b/src/components/dropWrapper/index.tsx
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import React, { useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 
 interface Props {
   onDrop: (
@@ -78,7 +79,16 @@ const DropWrapper: React.FC<Props> = ({
           }
         }, 1);
 
-    const data = JSON.parse(e.dataTransfer.getData('card_id'));
+    let data = JSON.parse(e.dataTransfer.getData('card_id'));
+
+    if (data?.isComponentTab === true) {
+      const CTID = `ce-${uuidv4()}`;
+      data = {
+        ...data,
+        CTID,
+        RowId: uuidv4(),
+      };
+    }
     e.stopPropagation();
 
     columnNumberEsixt
diff --git a/src/components/infoTooltip/index.tsx b/src/components/infoTooltip/index.tsx
index 627651f..c601bb7 100644
--- a/src/components/infoTooltip/index.tsx
+++ b/src/components/infoTooltip/index.tsx
@@ -8,7 +8,7 @@ import styles from './index.module.scss';
 interface Props {
   title: string;
   content: string;
-  onClose: () => void;
+  onClose: (val: any) => void;
   isDestination?: boolean;
   direction?: 'left' | 'right';
 }
@@ -36,7 +36,7 @@ const InfoTooltip: React.FC<Props> = ({
         <FontAwesomeIcon
           icon={faXmark}
           style={{ height: '16px' }}
-          onClick={onClose}
+          onClick={() => onClose(false)}
         />
       </div>
       <div className={styles.tooltipContent}>
diff --git a/src/components/leftPanel/index.tsx b/src/components/leftPanel/index.tsx
index fb57fec..a700b3f 100644
--- a/src/components/leftPanel/index.tsx
+++ b/src/components/leftPanel/index.tsx
@@ -3,17 +3,17 @@ import _ from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { v4 as uuidv4 } from 'uuid';
-
 import AddComponentToPathway from '../../screens/addComponentToPathway';
 
 import {
   saveDataForPathwayRequest,
   updateMappedDataRequest,
 } from '../../states/actions';
+import { getTooltipContent } from '../../utils/object';
 
 import CardWithLeftIcon from '../cardWithLeftIcon';
 import SearchBox from '../formFields/searchBox';
+import InfoTooltip from '../infoTooltip';
 import LeftPanelDropWrapper from '../leftPanelDropWrapper';
 import Tab, { TabPane } from '../tab';
 
@@ -36,6 +36,8 @@ const LeftPanel: React.FC<any> = ({
   const propsChildrenData = [];
 
   const [componentTabCards, setComponentTabCards] = useState<any>([]);
+  const [showToolTip, setShowToolTip] = useState(false);
+  const [tooltipType, setTooltipType] = useState('');
   const [isDraggableCardVisible, setDraggableCardVisible] = useState(false);
   const [showAddComponentToPathway, setShowAddComponentToPathway] =
     useState(false);
@@ -103,9 +105,7 @@ const LeftPanel: React.FC<any> = ({
   }, [selectedTabCardData, droppedCard, result.mappedData.PathwayComponents]);
 
   const createCard = (card: any) => {
-    const CTID = `ce-${uuidv4()}`;
     const newCard = {
-      CTID,
       Created: '',
       Description: card?.Description,
       HasChild: [],
@@ -115,9 +115,7 @@ const LeftPanel: React.FC<any> = ({
       Name: card?.Name,
       OccupationType: [],
       PrecededBy: [],
-      ProxyFor: `https://sandbox.credentialengineregistry.org/resources/${CTID}`,
       ProxyForLabel: card?.Name,
-      RowId: uuidv4(),
       Type: card?.URI,
     };
     return newCard;
@@ -285,19 +283,40 @@ const LeftPanel: React.FC<any> = ({
         <>
           <div className={Styles.cardwrapper}>
             {componentTabCards.map((card: any, index: any) => (
-              <CardWithLeftIcon
-                isComponentTab={true}
-                draggable={true}
-                key={index}
-                data={card}
-                name={card.Name}
-                description={card.Description}
-                uri={card?.URI}
-                CTID={card?.CTID}
-                id={card.Id}
-                type={card?.URI}
-                setLeftpanelSelectedElem={setLeftpanelSelectedElem}
-              />
+              <>
+                <CardWithLeftIcon
+                  isComponentTab={true}
+                  draggable={true}
+                  key={index}
+                  data={card}
+                  name={card.Name}
+                  description={card.Description}
+                  uri={card?.URI}
+                  CTID={card?.CTID}
+                  id={card.Id}
+                  type={card?.URI}
+                  setLeftpanelSelectedElem={setLeftpanelSelectedElem}
+                  isShowToolTip={showToolTip}
+                  setIsShowToolTip={(val: any) => setShowToolTip(val)}
+                  getTooltipType={(val: any) => setTooltipType(val)}
+                />
+                {showToolTip && tooltipType === card?.Type && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      right: -80,
+                      marginTop: '-100px',
+                    }}
+                  >
+                    <InfoTooltip
+                      content={getTooltipContent(card?.Type)}
+                      title=""
+                      onClose={(val: any) => setShowToolTip(!!val)}
+                      direction="right"
+                    />
+                  </div>
+                )}
+              </>
             ))}
           </div>
         </>
diff --git a/src/utils/object.ts b/src/utils/object.ts
index 56beded..eb523d8 100644
--- a/src/utils/object.ts
+++ b/src/utils/object.ts
@@ -75,3 +75,27 @@ export const getErrorMessage = (error: any): string => {
     else return error?.message;
   }
 };
+
+export const getTooltipContent = (type: any) => {
+  if (type?.includes('ComponentCondition')) {
+    return 'Resource that describes what must be done to complete a PathwayComponent, or part thereof, as determined by the issuer of the Pathway.';
+  } else if (type?.includes('AssessmentComponent')) {
+    return 'Resource that identifies a direct, indirect, formative, and summative evaluation or estimation of the nature, ability, or quality of a resource, performance, or outcome of an action.';
+  } else if (type?.includes('BasicComponent')) {
+    return 'Resource that identifies a resource not otherwise covered by the enumerated PathwayComponent subclasses.';
+  } else if (type?.includes('CocurricularComponent')) {
+    return 'Resource that identifies an activity, program, or informal learning experience such as a civic or service activity that supplements and complements the curriculum.';
+  } else if (type?.includes('CompetencyComponent')) {
+    return 'Resource that identifies a measurable or observable knowledge, skill, or ability necessary to successful performance of a person in a given context.';
+  } else if (type?.includes('CourseComponent')) {
+    return 'Resource that identifies a structured sequence of one or more learning activities that aims to develop a prescribed set of knowledge, skill, or ability of learners.';
+  } else if (type?.includes('CredentialComponent')) {
+    return 'Resource that identifies another resource that describes qualification, achievement, personal or organizational quality, or aspect of an identity typically used to indicate suitability.';
+  } else if (type?.includes('ExtracurricularComponent')) {
+    return 'Resource that identifies an activity, program, or informal learning experience that may be offered or provided by a school, college, or other organization that is not connected to a curriculum.';
+  } else if (type?.includes('JobComponent')) {
+    return 'Resource that identifies a work position, employment, or occupation.';
+  } else if (type?.includes('WorkExperienceComponent')) {
+    return 'Resource describing an activity or training through which a person gains job experience.';
+  } else return 'N/A';
+};