From 4eec4464598773e43b1c81ca67873918da499fe7 Mon Sep 17 00:00:00 2001
From: "margi.shah1" <margi.shah@smartsensesolutions.com>
Date: Mon, 9 Sep 2024 10:59:41 +0530
Subject: [PATCH 1/3] fix: remove missing credentials usecases

---
 .../pages/UsecaseParticipation/index.tsx      | 237 +++++++++---------
 1 file changed, 121 insertions(+), 116 deletions(-)

diff --git a/src/components/pages/UsecaseParticipation/index.tsx b/src/components/pages/UsecaseParticipation/index.tsx
index bc8f10b27..d025852b0 100644
--- a/src/components/pages/UsecaseParticipation/index.tsx
+++ b/src/components/pages/UsecaseParticipation/index.tsx
@@ -192,126 +192,131 @@ export default function UsecaseParticipation() {
                   />
                 </div>
               ) : (
-                data?.map((item) => {
-                  return (
-                    <div className="useCase-list" key={uniqueId(item.useCase)}>
-                      <li className="useCase-list-item">
-                        <div className="useCase-detail">
-                          <PixIcon />
-                          <div>
-                            <Typography
-                              variant="body1"
-                              className="useCase-title"
-                            >
-                              {item.useCase}
-                            </Typography>
-                            <Typography variant="body2">
-                              {item.description}
-                            </Typography>
+                data
+                  ?.filter((usecase) => usecase.verifiedCredentials.length)
+                  .map((item) => {
+                    return (
+                      <div
+                        className="useCase-list"
+                        key={uniqueId(item.useCase)}
+                      >
+                        <li className="useCase-list-item">
+                          <div className="useCase-detail">
+                            <PixIcon />
+                            <div>
+                              <Typography
+                                variant="body1"
+                                className="useCase-title"
+                              >
+                                {item.useCase}
+                              </Typography>
+                              <Typography variant="body2">
+                                {item.description}
+                              </Typography>
+                            </div>
                           </div>
-                        </div>
-                      </li>
-                      <ul className="credential-list">
-                        {item.verifiedCredentials.map((credential) => {
-                          return (
-                            <div key={credential.externalDetailData.id}>
-                              <hr className="seperation" />
-                              {credential.ssiDetailData?.length ? (
-                                <div style={{ width: '105%' }}>
-                                  <CustomAccordion
-                                    items={[
-                                      {
-                                        expanded: false,
-                                        id: credential.externalDetailData.id,
-                                        title: '',
-                                        titleElement: renderCredentialData(
-                                          item,
-                                          credential
-                                        ),
-                                        color: 'white',
-                                        children: (
-                                          <>
-                                            {credential.ssiDetailData.map(
-                                              (ssidata: SSIDetailData) => (
-                                                <div
-                                                  className="credential-list-item"
-                                                  style={{
-                                                    width: '82%',
-                                                    textAlign: 'center',
-                                                    margin: '0 0 10px',
-                                                  }}
-                                                  key={ssidata.credentialId}
-                                                >
-                                                  <Typography
-                                                    variant="caption3"
-                                                    className="firstSection font-12"
-                                                  >
-                                                    {
-                                                      credential
-                                                        .externalDetailData
-                                                        .verifiedCredentialExternalTypeId
-                                                    }
-                                                  </Typography>
-                                                  <Typography
-                                                    variant="caption3"
-                                                    className="secondSection font-12"
-                                                  >
-                                                    {
-                                                      credential
-                                                        .externalDetailData
-                                                        .version
-                                                    }
-                                                  </Typography>
-                                                  <Typography
-                                                    variant="caption3"
-                                                    className="thirdSection statustag font-12"
+                        </li>
+                        <ul className="credential-list">
+                          {item.verifiedCredentials.map((credential) => {
+                            return (
+                              <div key={credential.externalDetailData.id}>
+                                <hr className="seperation" />
+                                {credential.ssiDetailData?.length ? (
+                                  <div style={{ width: '105%' }}>
+                                    <CustomAccordion
+                                      items={[
+                                        {
+                                          expanded: false,
+                                          id: credential.externalDetailData.id,
+                                          title: '',
+                                          titleElement: renderCredentialData(
+                                            item,
+                                            credential
+                                          ),
+                                          color: 'white',
+                                          children: (
+                                            <>
+                                              {credential.ssiDetailData.map(
+                                                (ssidata: SSIDetailData) => (
+                                                  <div
+                                                    className="credential-list-item"
+                                                    style={{
+                                                      width: '82%',
+                                                      textAlign: 'center',
+                                                      margin: '0 0 10px',
+                                                    }}
+                                                    key={ssidata.credentialId}
                                                   >
-                                                    <StatusTag
-                                                      color={
-                                                        ssidata.participationStatus ===
-                                                        StatusEnum.PENDING
-                                                          ? 'pending'
-                                                          : 'label'
+                                                    <Typography
+                                                      variant="caption3"
+                                                      className="firstSection font-12"
+                                                    >
+                                                      {
+                                                        credential
+                                                          .externalDetailData
+                                                          .verifiedCredentialExternalTypeId
                                                       }
-                                                      label={
-                                                        ssidata.participationStatus
+                                                    </Typography>
+                                                    <Typography
+                                                      variant="caption3"
+                                                      className="secondSection font-12"
+                                                    >
+                                                      {
+                                                        credential
+                                                          .externalDetailData
+                                                          .version
                                                       }
-                                                      variant="filled"
-                                                      sx={{
-                                                        height: '22px',
-                                                      }}
-                                                      size="small"
-                                                    />
-                                                  </Typography>
-                                                  <Typography
-                                                    variant="caption3"
-                                                    className="forthSection font-12"
-                                                  >
-                                                    {ssidata.expiryDate
-                                                      ? ssidata.expiryDate.split(
-                                                          'T'
-                                                        )[0]
-                                                      : ''}
-                                                  </Typography>
-                                                </div>
-                                              )
-                                            )}
-                                          </>
-                                        ),
-                                      },
-                                    ]}
-                                  />
-                                </div>
-                              ) : (
-                                renderCredentialData(item, credential)
-                              )}
-                            </div>
-                          )
-                        })}
-                      </ul>
-                    </div>
-                  )
-                })
+                                                    </Typography>
+                                                    <Typography
+                                                      variant="caption3"
+                                                      className="thirdSection statustag font-12"
+                                                    >
+                                                      <StatusTag
+                                                        color={
+                                                          ssidata.participationStatus ===
+                                                          StatusEnum.PENDING
+                                                            ? 'pending'
+                                                            : 'label'
+                                                        }
+                                                        label={
+                                                          ssidata.participationStatus
+                                                        }
+                                                        variant="filled"
+                                                        sx={{
+                                                          height: '22px',
+                                                        }}
+                                                        size="small"
+                                                      />
+                                                    </Typography>
+                                                    <Typography
+                                                      variant="caption3"
+                                                      className="forthSection font-12"
+                                                    >
+                                                      {ssidata.expiryDate
+                                                        ? ssidata.expiryDate.split(
+                                                            'T'
+                                                          )[0]
+                                                        : ''}
+                                                    </Typography>
+                                                  </div>
+                                                )
+                                              )}
+                                            </>
+                                          ),
+                                        },
+                                      ]}
+                                    />
+                                  </div>
+                                ) : (
+                                  renderCredentialData(item, credential)
+                                )}
+                              </div>
+                            )
+                          })}
+                        </ul>
+                      </div>
+                    )
+                  })
               )}
             </ul>
           </div>

From 452c1cc4ae1726c5f73907addcb01ac45b2a3610 Mon Sep 17 00:00:00 2001
From: "margi.shah1" <margi.shah@smartsensesolutions.com>
Date: Mon, 9 Sep 2024 11:17:11 +0530
Subject: [PATCH 2/3] fix: use constant for filtered data

---
 .../pages/UsecaseParticipation/index.tsx      | 239 +++++++++---------
 1 file changed, 118 insertions(+), 121 deletions(-)

diff --git a/src/components/pages/UsecaseParticipation/index.tsx b/src/components/pages/UsecaseParticipation/index.tsx
index d025852b0..e348fefc3 100644
--- a/src/components/pages/UsecaseParticipation/index.tsx
+++ b/src/components/pages/UsecaseParticipation/index.tsx
@@ -53,6 +53,8 @@ export default function UsecaseParticipation() {
   const dispatch = useDispatch()
 
   const { data, refetch, isLoading } = useFetchUsecaseQuery()
+  const useCaseList =
+    data?.filter((usecase) => usecase.verifiedCredentials.length) ?? []
 
   useEffect(() => {
     refetch()
@@ -192,131 +194,126 @@ export default function UsecaseParticipation() {
                   />
                 </div>
               ) : (
-                data
-                  ?.filter((usecase) => usecase.verifiedCredentials.length)
-                  .map((item) => {
-                    return (
-                      <div
-                        className="useCase-list"
-                        key={uniqueId(item.useCase)}
-                      >
-                        <li className="useCase-list-item">
-                          <div className="useCase-detail">
-                            <PixIcon />
-                            <div>
-                              <Typography
-                                variant="body1"
-                                className="useCase-title"
-                              >
-                                {item.useCase}
-                              </Typography>
-                              <Typography variant="body2">
-                                {item.description}
-                              </Typography>
-                            </div>
+                useCaseList.map((item) => {
+                  return (
+                    <div className="useCase-list" key={uniqueId(item.useCase)}>
+                      <li className="useCase-list-item">
+                        <div className="useCase-detail">
+                          <PixIcon />
+                          <div>
+                            <Typography
+                              variant="body1"
+                              className="useCase-title"
+                            >
+                              {item.useCase}
+                            </Typography>
+                            <Typography variant="body2">
+                              {item.description}
+                            </Typography>
                           </div>
-                        </li>
-                        <ul className="credential-list">
-                          {item.verifiedCredentials.map((credential) => {
-                            return (
-                              <div key={credential.externalDetailData.id}>
-                                <hr className="seperation" />
-                                {credential.ssiDetailData?.length ? (
-                                  <div style={{ width: '105%' }}>
-                                    <CustomAccordion
-                                      items={[
-                                        {
-                                          expanded: false,
-                                          id: credential.externalDetailData.id,
-                                          title: '',
-                                          titleElement: renderCredentialData(
-                                            item,
-                                            credential
-                                          ),
-                                          color: 'white',
-                                          children: (
-                                            <>
-                                              {credential.ssiDetailData.map(
-                                                (ssidata: SSIDetailData) => (
-                                                  <div
-                                                    className="credential-list-item"
-                                                    style={{
-                                                      width: '82%',
-                                                      textAlign: 'center',
-                                                      margin: '0 0 10px',
-                                                    }}
-                                                    key={ssidata.credentialId}
+                        </div>
+                      </li>
+                      <ul className="credential-list">
+                        {item.verifiedCredentials.map((credential) => {
+                          return (
+                            <div key={credential.externalDetailData.id}>
+                              <hr className="seperation" />
+                              {credential.ssiDetailData?.length ? (
+                                <div style={{ width: '105%' }}>
+                                  <CustomAccordion
+                                    items={[
+                                      {
+                                        expanded: false,
+                                        id: credential.externalDetailData.id,
+                                        title: '',
+                                        titleElement: renderCredentialData(
+                                          item,
+                                          credential
+                                        ),
+                                        color: 'white',
+                                        children: (
+                                          <>
+                                            {credential.ssiDetailData.map(
+                                              (ssidata: SSIDetailData) => (
+                                                <div
+                                                  className="credential-list-item"
+                                                  style={{
+                                                    width: '82%',
+                                                    textAlign: 'center',
+                                                    margin: '0 0 10px',
+                                                  }}
+                                                  key={ssidata.credentialId}
+                                                >
+                                                  <Typography
+                                                    variant="caption3"
+                                                    className="firstSection font-12"
+                                                  >
+                                                    {
+                                                      credential
+                                                        .externalDetailData
+                                                        .verifiedCredentialExternalTypeId
+                                                    }
+                                                  </Typography>
+                                                  <Typography
+                                                    variant="caption3"
+                                                    className="secondSection font-12"
+                                                  >
+                                                    {
+                                                      credential
+                                                        .externalDetailData
+                                                        .version
+                                                    }
+                                                  </Typography>
+                                                  <Typography
+                                                    variant="caption3"
+                                                    className="thirdSection statustag font-12"
                                                   >
-                                                    <Typography
-                                                      variant="caption3"
-                                                      className="firstSection font-12"
-                                                    >
-                                                      {
-                                                        credential
-                                                          .externalDetailData
-                                                          .verifiedCredentialExternalTypeId
+                                                    <StatusTag
+                                                      color={
+                                                        ssidata.participationStatus ===
+                                                        StatusEnum.PENDING
+                                                          ? 'pending'
+                                                          : 'label'
                                                       }
-                                                    </Typography>
-                                                    <Typography
-                                                      variant="caption3"
-                                                      className="secondSection font-12"
-                                                    >
-                                                      {
-                                                        credential
-                                                          .externalDetailData
-                                                          .version
+                                                      label={
+                                                        ssidata.participationStatus
                                                       }
-                                                    </Typography>
-                                                    <Typography
-                                                      variant="caption3"
-                                                      className="thirdSection statustag font-12"
-                                                    >
-                                                      <StatusTag
-                                                        color={
-                                                          ssidata.participationStatus ===
-                                                          StatusEnum.PENDING
-                                                            ? 'pending'
-                                                            : 'label'
-                                                        }
-                                                        label={
-                                                          ssidata.participationStatus
-                                                        }
-                                                        variant="filled"
-                                                        sx={{
-                                                          height: '22px',
-                                                        }}
-                                                        size="small"
-                                                      />
-                                                    </Typography>
-                                                    <Typography
-                                                      variant="caption3"
-                                                      className="forthSection font-12"
-                                                    >
-                                                      {ssidata.expiryDate
-                                                        ? ssidata.expiryDate.split(
-                                                            'T'
-                                                          )[0]
-                                                        : ''}
-                                                    </Typography>
-                                                  </div>
-                                                )
-                                              )}
-                                            </>
-                                          ),
-                                        },
-                                      ]}
-                                    />
-                                  </div>
-                                ) : (
-                                  renderCredentialData(item, credential)
-                                )}
-                              </div>
-                            )
-                          })}
-                        </ul>
-                      </div>
-                    )
-                  })
+                                                      variant="filled"
+                                                      sx={{
+                                                        height: '22px',
+                                                      }}
+                                                      size="small"
+                                                    />
+                                                  </Typography>
+                                                  <Typography
+                                                    variant="caption3"
+                                                    className="forthSection font-12"
+                                                  >
+                                                    {ssidata.expiryDate
+                                                      ? ssidata.expiryDate.split(
+                                                          'T'
+                                                        )[0]
+                                                      : ''}
+                                                  </Typography>
+                                                </div>
+                                              )
+                                            )}
+                                          </>
+                                        ),
+                                      },
+                                    ]}
+                                  />
+                                </div>
+                              ) : (
+                                renderCredentialData(item, credential)
+                              )}
+                            </div>
+                          )
+                        })}
+                      </ul>
+                    </div>
+                  )
+                })
               )}
             </ul>
           </div>

From c6be9973b9789f5089fb74d99a362e36e92956e8 Mon Sep 17 00:00:00 2001
From: "margi.shah1" <margi.shah@smartsensesolutions.com>
Date: Fri, 13 Sep 2024 15:39:32 +0530
Subject: [PATCH 3/3] chore: update changelog.md file

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d0d27c2bc..1a329cf79 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -43,6 +43,8 @@
   - Display technicalUserManagement button based on role validation [#1073](https://github.com/eclipse-tractusx/portal-frontend/pull/1073)
 - **OSP Consent form**
   - Display invited company name in OSP consent form (Previously hard coded with 'BMW') [#1083](https://github.com/eclipse-tractusx/portal-frontend/pull/1083)
+- **Use Case participation**
+  - Removes use cases without verified credentials from the "Use Case Participation" list [#1088](https://github.com/eclipse-tractusx/portal-frontend/pull/1088)
 
 ## 2.2.0-RC2