diff --git a/src/common/global.css b/src/common/global.css index 6c4133689..8d2bbff13 100644 --- a/src/common/global.css +++ b/src/common/global.css @@ -15,4 +15,8 @@ input[type="radio"] { ul[role="tablist"] li[role="presentation"] button[aria-selected="true"] { @apply text-primary-700 border-primary-700; +} + +#schema-cards div[data-testid="flowbite-card"] div { + @apply justify-start; } \ No newline at end of file diff --git a/src/commonComponents/CredentialDefinitionCard.tsx b/src/commonComponents/CredentialDefinitionCard.tsx index 99167c76b..abcab12b8 100644 --- a/src/commonComponents/CredentialDefinitionCard.tsx +++ b/src/commonComponents/CredentialDefinitionCard.tsx @@ -23,10 +23,10 @@ const CredDeffCard = (props: IProps) => { } return ( - -
-
{/* This will take up 2/3 of the available width on larger screens */} -
+ +
+
{/* This will take up 2/3 of the available width on larger screens */} +
{props.credDeffName}
@@ -36,14 +36,13 @@ const CredDeffCard = (props: IProps) => { || props.userRoles.includes(Roles.ADMIN) || props.userRoles.includes(Roles.ISSUER) ) - &&
+ &&
-
+

ID : {props.credentialDefinitionId}

Schema ID:{props.schemaId}

-
+
Revocable: <> void; } -const SchemaCard = (props: {className?:string, schemaName: string, version: string, schemaId: string, issuerDid: string, attributes: [], created: string, onClickCallback: (schemaId: string, attributes: string[], issuerDid:string, created:string) => void; }) => { +const SchemaCard = (props: IProps) => { return ( { props.onClickCallback(props.schemaId, props.attributes, props.issuerDid, props.created) - }} className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer h-full w-full overflow-auto'> -
-
-
+ }} + id="schema-cards" + className='transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer h-full w-full overflow-hidden'> +
+
+
{props.schemaName}

@@ -28,7 +30,7 @@ const SchemaCard = (props: {className?:string, schemaName: string, version: stri

- + Created: {dateConversion(props.created)}

@@ -41,33 +43,33 @@ const SchemaCard = (props: {className?:string, schemaName: string, version: stri Issuer DID: {props.issuerDid}

- Ledger: {props.issuerDid.split(":")[2]} + Ledger: {props.issuerDid.split(":")[2]}

    -
  • +
  • Attributes:
    - {props.attributes && props.attributes.length > 0 && ( - <> - {props?.attributes?.slice(0, 3).map((element, index) => ( -
    - - {element?.attributeName} - -
    - ))} - {props?.attributes?.length > 3 && ...} - - )} + {props.attributes && props.attributes.length > 0 && ( + <> + {props?.attributes?.slice(0, 3).map((element, index) => ( +
    + + {element?.attributeName} + +
    + ))} + {props?.attributes?.length > 3 && ...} + + )}
    diff --git a/src/components/Ecosystem/Dashboard.tsx b/src/components/Ecosystem/Dashboard.tsx index aa5c68d49..5f71f665c 100644 --- a/src/components/Ecosystem/Dashboard.tsx +++ b/src/components/Ecosystem/Dashboard.tsx @@ -14,16 +14,16 @@ import { EmptyListMessage } from '../EmptyListComponent'; import CreateEcosystemOrgModal from '../CreateEcosystemOrgModal'; import { AlertComponent } from '../AlertComponent'; import { - ICheckEcosystem, - checkEcosystem, - getEcosystemId, + ICheckEcosystem, + checkEcosystem, + getEcosystemId, } from '../../config/ecosystem'; import { Button, Dropdown } from 'flowbite-react'; import EditPopupModal from '../EditEcosystemOrgModal'; import { - getFromLocalStorage, - removeFromLocalStorage, - setToLocalStorage, + getFromLocalStorage, + removeFromLocalStorage, + setToLocalStorage, } from '../../api/Auth'; import { getUserEcosystemInvitations } from '../../api/invitations'; import { pathRoutes } from '../../config/pathRoutes'; @@ -33,491 +33,489 @@ import DateTooltip from '../Tooltip'; import DashboardCard from '../../commonComponents/DashboardCard'; interface IRoleTablet { - role: string; + role: string; } const initialPageState = { - pageNumber: 1, - pageSize: 10, - total: 0, + pageNumber: 1, + pageSize: 10, + total: 0, }; export const RoleTablet = ({ role }: IRoleTablet) => ( -
    - {role} -
    +
    + {role} +
    ); const Dashboard = () => { - const [ecosystemDetails, setEcosystemDetails] = useState(); - const [success, setSuccess] = useState(null); - const [failure, setFailure] = useState(null); - const [message, setMessage] = useState(null); - const [loading, setLoading] = useState(true); - const [editOpenModal, setEditOpenModal] = useState(false); - const [dropdownOpen, setDropdownOpen] = useState(true); - const [error, setError] = useState(null); - const [openModal, setOpenModal] = useState(false); - const [viewButton, setViewButton] = useState(false); - const [currentPage, setCurrentPage] = useState(initialPageState); - const [isEcosystemLead, setIsEcosystemLead] = useState(false); - const [ecosystemDashboard, setEcosystemDashboard] = - useState(null); - const [ecosystemDetailsNotFound, setEcosystemDetailsNotFound] = - useState(false); - const [orgId, setOrgId] = useState(''); - const [isOrgModal, setIsOrgModal] = useState(false); - - const createEcosystemModel = () => { - setOpenModal(true); - }; - - const EditEcosystemOrgModal = () => { - setEditOpenModal(true); - }; - - const handleEditModalClose = () => { - setEditOpenModal(false); - setDropdownOpen(false); - fetchEcosystemDetails(); - }; - - const getAllEcosystemInvitations = async () => { - setLoading(true); - const response = await getUserEcosystemInvitations( - currentPage.pageNumber, - currentPage.pageSize, - '', - ); - const { data } = response as AxiosResponse; - - if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { - const totalPages = data?.data?.totalPages; - - const invitationPendingList = data?.data?.invitations.filter( - (invitation: { status: string }) => { - return invitation.status === 'pending'; - }, - ); - - if (invitationPendingList.length > 0) { - setMessage(`You have received invitation to join ecosystem `); - setViewButton(true); - } - setCurrentPage({ - ...currentPage, - total: totalPages, - }); - } else { - setError(response as string); - } - setLoading(false); - }; - - const fetchEcosystemDetails = async () => { - setLoading(true); - const id = await getFromLocalStorage(storageKeys.ORG_ID); - setOrgId(id); - if (id) { - const response = await getEcosystem(id); - const { data } = response as AxiosResponse; - - if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { - const ecosystemData = data?.data[0]; - if (ecosystemData) { - await setToLocalStorage(storageKeys.ECOSYSTEM_ID, ecosystemData?.id); - const ecosystemOrg = - ecosystemData?.ecosystemOrgs && - ecosystemData?.ecosystemOrgs.length > 0 && - ecosystemData?.ecosystemOrgs[0]; - setEcosystemDetails({ - logoUrl: ecosystemData?.logoUrl, - name: ecosystemData?.name, - description: ecosystemData?.description, - joinedDate: - ecosystemOrg && ecosystemOrg?.createDateTime - ? ecosystemOrg?.createDateTime - : '', - role: - ecosystemOrg && ecosystemOrg?.ecosystemRole?.name - ? ecosystemOrg?.ecosystemRole?.name - : '', - }); - } else { - await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID); - } - } else { - await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID); - setEcosystemDetailsNotFound(true); - } - } - setLoading(false); - }; - - const fetchEcosystemDashboard = async () => { - setLoading(true); - - const orgId = await getFromLocalStorage(storageKeys.ORG_ID); - const ecosystemId = await getEcosystemId(); - const data: ICheckEcosystem = await checkEcosystem(); - - if (ecosystemId && orgId && data.isEcosystemLead) { - const response = await getEcosystemDashboard(ecosystemId, orgId); - - const { data } = response as AxiosResponse; - - if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { - setEcosystemDashboard(data?.data); - } else { - setFailure(response as string); - setFailure(response as string); - setLoading(false); - } - } - setLoading(false); - }; - - const checkOrgId = async () => { - const orgId = await getFromLocalStorage(storageKeys.ORG_ID); - if (orgId) { - await getAllEcosystemInvitations(); - } - }; - - const getDashboardData = async () => { - await checkOrgId(); - await fetchEcosystemDetails(); - await fetchEcosystemDashboard(); - }; - - const navigateToInvitation = () => { - window.location.href = pathRoutes.ecosystem.sentinvitation; - }; - - useEffect(() => { - getDashboardData(); - - const checkEcosystemData = async () => { - const data: ICheckEcosystem = await checkEcosystem(); - setIsEcosystemLead(data.isEcosystemLead); - }; - checkEcosystemData(); - }, []); - - useEffect(() => { - setDropdownOpen(!editOpenModal); - }, [editOpenModal]); - - return ( -
    -
    - -
    - - {error ? ( - <> - {' '} - {(success || failure) && ( - { - setSuccess(null); - setFailure(null); - }} - /> - )} - - ) : ( - <> -
    - { - { - setMessage(null); - setError(null); - }} - /> - } -
    - - {(success || failure) && ( - { - setSuccess(null); - setFailure(null); - }} - /> - )} - - )} - - {ecosystemDetailsNotFound && ( - { - setEcosystemDetailsNotFound(false); - setFailure(null); - }} - /> - )} - - {ecosystemDetails ? ( -
    -
    -
    -
    - {ecosystemDetails?.logoUrl ? ( - - ) : ( - - )} -
    - {ecosystemDetails ? ( -
    -

    - {ecosystemDetails?.name} -

    - -

    - {ecosystemDetails?.description} -

    - {!isEcosystemLead ? ( -
    -
    - - Ecosystem Owner - - :{' '} - - NA - -
    -
    - - Ecosystem Lead - {' '} - : - - NA - -
    -
    - - Joined since - {' '} - : - - - {dateConversion(ecosystemDetails.joinedDate || '')} - - -
    -
    - ) : ( -
    - Role: {' '} - -
    - )} -
    - ) : ( - - )} - - {!isEcosystemLead && ( -
    - Role: {' '} - -
    - )} - - {isEcosystemLead && ( -
    - - {dropdownOpen ? ( - ( - - )} - dismissOnClick={true} - > - { - EditEcosystemOrgModal(); - }} - > -
    Edit Ecosystem
    -     - {/* + const [ecosystemDetails, setEcosystemDetails] = useState(); + const [success, setSuccess] = useState(null); + const [failure, setFailure] = useState(null); + const [message, setMessage] = useState(null); + const [loading, setLoading] = useState(true); + const [editOpenModal, setEditOpenModal] = useState(false); + const [dropdownOpen, setDropdownOpen] = useState(true); + const [leadOrg, setLeadOrg] = useState("") + const [error, setError] = useState(null); + const [openModal, setOpenModal] = useState(false); + const [viewButton, setViewButton] = useState(false); + const [currentPage, setCurrentPage] = useState(initialPageState); + const [isEcosystemLead, setIsEcosystemLead] = useState(false); + const [ecosystemDashboard, setEcosystemDashboard] = + useState(null); + const [ecosystemDetailsNotFound, setEcosystemDetailsNotFound] = + useState(false); + const [orgId, setOrgId] = useState(''); + const [isOrgModal, setIsOrgModal] = useState(false); + + const createEcosystemModel = () => { + setOpenModal(true); + }; + + const EditEcosystemOrgModal = () => { + setEditOpenModal(true); + }; + + const handleEditModalClose = () => { + setEditOpenModal(false); + setDropdownOpen(false); + fetchEcosystemDetails(); + }; + + const getAllEcosystemInvitations = async () => { + setLoading(true); + const response = await getUserEcosystemInvitations( + currentPage.pageNumber, + currentPage.pageSize, + '', + ); + const { data } = response as AxiosResponse; + + if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { + const totalPages = data?.data?.totalPages; + + const invitationPendingList = data?.data?.invitations.filter( + (invitation: { status: string }) => { + return invitation.status === 'pending'; + }, + ); + + if (invitationPendingList.length > 0) { + setMessage(`You have received invitation to join ecosystem `); + setViewButton(true); + } + setCurrentPage({ + ...currentPage, + total: totalPages, + }); + } else { + setError(response as string); + } + setLoading(false); + }; + + const fetchEcosystemDetails = async () => { + setLoading(true); + const id = await getFromLocalStorage(storageKeys.ORG_ID); + setOrgId(id); + if (id) { + const response = await getEcosystem(id); + const { data } = response as AxiosResponse; + + if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { + const ecosystemData = data?.data[0]; + if (ecosystemData) { + await setToLocalStorage(storageKeys.ECOSYSTEM_ID, ecosystemData?.id); + const ecosystemOrg = + ecosystemData?.ecosystemOrgs && + ecosystemData?.ecosystemOrgs.length > 0 && + ecosystemData?.ecosystemOrgs[0]; + setEcosystemDetails({ + logoUrl: ecosystemData?.logoUrl, + name: ecosystemData?.name, + description: ecosystemData?.description, + joinedDate: + ecosystemOrg && ecosystemOrg?.createDateTime + ? ecosystemOrg?.createDateTime + : '', + role: + ecosystemOrg && ecosystemOrg?.ecosystemRole?.name + ? ecosystemOrg?.ecosystemRole?.name + : '', + }); + } else { + await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID); + } + } else { + await removeFromLocalStorage(storageKeys.ECOSYSTEM_ID); + setEcosystemDetailsNotFound(true); + } + } + setLoading(false); + }; + + const fetchEcosystemDashboard = async () => { + setLoading(true); + + const orgId = await getFromLocalStorage(storageKeys.ORG_ID); + const ecosystemId = await getEcosystemId(); + + if (ecosystemId && orgId) { + const response = await getEcosystemDashboard(ecosystemId, orgId); + + const { data } = response as AxiosResponse; + + if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) { + setEcosystemDashboard(data?.data); + setLeadOrg(data?.data?.ecosystemLead?.orgName || "") + } else { + setFailure(response as string); + setFailure(response as string); + setLoading(false); + } + } + setLoading(false); + }; + + const checkOrgId = async () => { + const orgId = await getFromLocalStorage(storageKeys.ORG_ID); + if (orgId) { + await getAllEcosystemInvitations(); + } + }; + + const getDashboardData = async () => { + await checkOrgId(); + await fetchEcosystemDetails(); + await fetchEcosystemDashboard(); + }; + + const navigateToInvitation = () => { + window.location.href = pathRoutes.ecosystem.sentinvitation; + }; + + useEffect(() => { + getDashboardData(); + + const checkEcosystemData = async () => { + const data: ICheckEcosystem = await checkEcosystem(); + setIsEcosystemLead(data.isEcosystemLead); + }; + checkEcosystemData(); + }, []); + + useEffect(() => { + setDropdownOpen(!editOpenModal); + }, [editOpenModal]); + + return ( +
    +
    + +
    + + {error ? ( + <> + {' '} + {(success || failure) && ( + { + setSuccess(null); + setFailure(null); + }} + /> + )} + + ) : ( + <> +
    + { + { + setMessage(null); + setError(null); + }} + /> + } +
    + + {(success || failure) && ( + { + setSuccess(null); + setFailure(null); + }} + /> + )} + + )} + + {ecosystemDetailsNotFound && ( + { + setEcosystemDetailsNotFound(false); + setFailure(null); + }} + /> + )} + + {ecosystemDetails ? ( +
    +
    +
    +
    + {ecosystemDetails?.logoUrl ? ( + + ) : ( + + )} +
    + {ecosystemDetails ? ( +
    +

    + {ecosystemDetails?.name} +

    + +

    + {ecosystemDetails?.description} +

    + {!isEcosystemLead ? ( +
    +
    + + Ecosystem Owner + + :{' '} + + {leadOrg} + +
    +
    + + Ecosystem Lead + {' '} + : + + {leadOrg} + +
    +
    + + Joined since + {' '} + : + + + {dateConversion(ecosystemDetails.joinedDate || '')} + + +
    +
    + ) : ( +
    + Role: {' '} + +
    + )} +
    + ) : ( + + )} + + {!isEcosystemLead && ( +
    + Role: {' '} + +
    + )} + + {isEcosystemLead && ( +
    + + {dropdownOpen ? ( + ( + + )} + dismissOnClick={true} + > + { + EditEcosystemOrgModal(); + }} + > +
    Edit Ecosystem
    +     + {/*
    Enable/Disable Ecosystem
     */} - {/* + {/*
    Manual Registration
     */} -     - ) : ( - - )} -
    - )} -
    -
    - - {isEcosystemLead && ( - <> -
    -
    - - -
    -
    -
    - -
    - { - setSuccess(value); - }} - isOrganization={false} - onEditSuccess={handleEditModalClose} - entityData={ecosystemDetails} - /> - - )} -
    - ) : ( -
    - {!ecosystemDetails && loading ? ( -
    - -
    - ) : ( -
    -
    - { - setSuccess(value); - if (isOrgModal && value) { - setTimeout(() => { - window.location.reload(); - }, 2000); - } else { - getDashboardData(); - } - }} - isorgModal={isOrgModal} - /> - - - - } - onClick={() => { - setIsOrgModal(Boolean(!orgId)); - createEcosystemModel(); - }} - /> -
    -
    - )} -
    - )} -
    - ); +     + ) : ( + + )} +
    + )} +
    +
    + + {isEcosystemLead && ( + <> +
    +
    + + +
    +
    +
    + +
    + { + setSuccess(value); + }} + isOrganization={false} + onEditSuccess={handleEditModalClose} + entityData={ecosystemDetails} + /> + + )} +
    + ) : ( +
    + {!ecosystemDetails && loading ? ( +
    + +
    + ) : ( +
    +
    + { + setSuccess(value); + if (isOrgModal && value) { + setTimeout(() => { + window.location.reload(); + }, 2000); + } else { + getDashboardData(); + } + }} + isorgModal={isOrgModal} + /> + + + + } + onClick={() => { + setIsOrgModal(Boolean(!orgId)); + createEcosystemModel(); + }} + /> +
    +
    + )} +
    + )} +
    + ); }; export default Dashboard; diff --git a/src/components/Ecosystem/Endorsement/EndorsementCard.tsx b/src/components/Ecosystem/Endorsement/EndorsementCard.tsx index e9bc23eb8..0773b3a9f 100644 --- a/src/components/Ecosystem/Endorsement/EndorsementCard.tsx +++ b/src/components/Ecosystem/Endorsement/EndorsementCard.tsx @@ -27,25 +27,29 @@ const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTrans }, []) const getAttributes = () => { - switch (true) { - case isSchema: - if (requestData?.attr_names && requestData?.attr_names.length > 0) { - if (allAttributes) { - return requestData?.attr_names + try { + switch (true) { + case isSchema: + if (requestData?.attr_names && requestData?.attr_names.length > 0) { + if (allAttributes) { + return requestData?.attr_names + } + return requestData?.attr_names?.slice(0, 3) } - return requestData?.attr_names?.slice(0, 3) - } - return [] - case !isSchema && allAttributes: - if (data?.requestBody?.schemaDetails?.version && data?.requestBody?.schemaDetails?.version.length > 0) { - if (allAttributes) { - return data?.requestBody?.schemaDetails?.version + return [] + case !isSchema: + if (data?.requestBody && data?.requestBody?.schemaDetails && data?.requestBody?.schemaDetails?.attributes && data?.requestBody?.schemaDetails?.attributes.length > 0) { + if (allAttributes) { + return data?.requestBody?.schemaDetails?.attributes + } + return data?.requestBody?.schemaDetails?.attributes?.slice(0, 3) } - return data?.requestBody?.schemaDetails?.version?.slice(0, 3) - } - return [] - default: - return [] + return [] + default: + return [] + } + } catch (err) { + console.log("Attribute Error::", err) } } @@ -62,10 +66,11 @@ const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTrans onClickCallback(data) } }} - className={`${cardTransitionDisabled ? "" : "transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer"} ${enableAction ? "cursor-pointer" : cardTransitionDisabled ? "cursor-default" : "cursor-not-allowed"} ${cardTransitionDisabled && "shadow-none"} m-3 h-full`} + id="schema-cards" + className={`${cardTransitionDisabled ? "" : "transform transition duration-500 hover:scale-105 hover:bg-gray-50 cursor-pointer"} ${enableAction ? "cursor-pointer" : cardTransitionDisabled ? "cursor-default" : "cursor-not-allowed"} ${cardTransitionDisabled && "shadow-none"} m-3 h-full m-0 sm:m-3`} >
    -
    -
    +
    +
    {isSchema ? requestData?.name : requestData?.tag}
    { @@ -99,14 +104,14 @@ const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTrans {isSchema ? "Schema" : "Credential Definition"}
    - < div className="min-w-0 flex-1" > + < div className="min-w-0 flex-none" > {!isSchema && <>

    - Schema Name: {data?.requestBody?.schemaDetails?.name || "NA"} + Schema Name: {data?.requestBody?.schemaDetails?.name || "-"}

    - Schema Version: {data?.requestBody?.schemaDetails?.version || "NA"} + Schema Version: {data?.requestBody?.schemaDetails?.version || "-"}

    } @@ -114,7 +119,10 @@ const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTrans Author DID: {data?.authorDid}

    - Ledger: {data?.authorDid.split(":")[2]} + Endorser DID: {data?.endorserDid} +

    +

    + Ledger: {data?.authorDid ? data?.authorDid?.split(":")[2] : "-"}

    {isEcosystemLead &&

    @@ -122,33 +130,31 @@ const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTrans

    }
    - - { - isSchema && -
    + {attributesData && attributesData.length > 0 && +
      -
    • +
    • Attributes:
      - {attributesData && attributesData.length > 0 && ( - <> - {attributesData.map((element: string, index: number) => ( -
      - - {element} - -
      - ))} - {!allAttributes && attributesData.length === 3 && ...} - - )} + {attributesData.map((element: string | { attributeName: string }) => { + const attribute = typeof element === "string" ? element : element?.attributeName + return ( +
      + + {attribute} + +
      + ) + })} + {!allAttributes && attributesData.length > 3 && ...} +
      • diff --git a/src/components/Ecosystem/Endorsement/index.tsx b/src/components/Ecosystem/Endorsement/index.tsx index a815c23e0..0ad712257 100644 --- a/src/components/Ecosystem/Endorsement/index.tsx +++ b/src/components/Ecosystem/Endorsement/index.tsx @@ -223,7 +223,7 @@ const EndorsementList = () => {