Merge pull request #431 from credebl/fix-forbidden-resource-error

fix: forbidden resource error

src/commonComponents/EcosystemProfileCard.tsx

@@ -126,12 +126,15 @@ const EcosystemProfileCard = () => {
 
  </div>
  ) : !ecosystemDetails && loading ? (
- <CustomSpinner />
+ <div className='flex justify-center'>
+ <CustomSpinner />
+ </div>
  ) :
  <EmptyListMessage
  message={'No Ecosystem'}
- description={'Get started by creating a new Ecosystem'}
+ description={'You are not a part of any Ecosystem'}
  buttonContent={''}
+ noExtraHeight={true}
  svgComponent={<svg className='pr-2 mr-1' xmlns="http://www.w3.org/2000/svg" width="24" height="15" fill="none" viewBox="0 0 24 24">
  <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
  </svg>} />

src/components/Ecosystem/Dashboard.tsx

@@ -1,6 +1,6 @@
 import type { IEcosystem } from './interfaces';
 import { apiStatusCodes, storageKeys } from '../../config/CommonConstant';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Features } from '../../utils/enums/features';
 import type { AxiosResponse } from 'axios';
 import BreadCrumbs from '../BreadCrumbs';
@@ -22,16 +22,15 @@ import { Button, Dropdown } from 'flowbite-react';
 import EditPopupModal from '../EditEcosystemOrgModal';
 import {
  getFromLocalStorage,
- removeFromLocalStorage,
- setToLocalStorage,
+ removeFromLocalStorage
 } from '../../api/Auth';
 import { getUserEcosystemInvitations } from '../../api/invitations';
 import { pathRoutes } from '../../config/pathRoutes';
 import type { EcosystemDashboard } from '../organization/interfaces';
 import { dateConversion } from '../../utils/DateConversion';
 import DateTooltip from '../Tooltip';
 import DashboardCard from '../../commonComponents/DashboardCard';
-import React from 'react';
+import { Roles } from '../../utils/enums/roles';
 
 interface IRoleTablet {
  role: string;
@@ -135,7 +134,7 @@ const Dashboard = () => {
  ecosystemData?.ecosystemOrgs.length > 0 &&
  ecosystemData?.ecosystemOrgs[0];
  setEcosystemDetails({
- autoEndorsement:ecosystemData?.autoEndorsement,
+ autoEndorsement: ecosystemData?.autoEndorsement,
  id: ecosystemData?.id,
  logoUrl: ecosystemData?.logoUrl,
  name: ecosystemData?.name,
@@ -191,7 +190,10 @@ const Dashboard = () => {
  };
 
  const getDashboardData = async () => {
- await checkOrgId();
+ const role = await getFromLocalStorage(storageKeys.ORG_ROLES)
+ if (role === Roles.OWNER) {
+ await checkOrgId();
+ }
  await fetchEcosystemDetails();
  await fetchEcosystemDashboard();
  };
@@ -288,14 +290,12 @@ const Dashboard = () => {
  {ecosystemDetails ? (
  <div>
  <div
- className={`mt-4 flex-wrap items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 ${
- isEcosystemLead ? 'w-full block' : 'flex'
- }`}
+ className={`mt-4 flex-wrap items-center justify-between p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:border-gray-700 sm:p-6 dark:bg-gray-800 ${isEcosystemLead ? 'w-full block' : 'flex'
+ }`}
  >
  <div
- className={`flex flex-wrap ${
- !isEcosystemLead ? 'w-full items-start' : 'items-center'
- }`}
+ className={`flex flex-wrap ${!isEcosystemLead ? 'w-full items-start' : 'items-center'
+ }`}
  >
  <div className="mr-4">
  {ecosystemDetails?.logoUrl ? (
@@ -351,15 +351,15 @@ const Dashboard = () => {
  <RoleTablet role={ecosystemDetails?.role || ''} />
  </div>
  )}
- <div className="flex text-md font-semibold ">
-  <span className="text-[#3D3D3D] dark:text-white min-w-[10rem]">
-  Endorsement Flow
-  </span>{' '}
-  <span className="dark:text-white">:</span>
-  <span className="text-[#5E5972] dark:text-white ml-2">
-  {ecosystemDetails.autoEndorsement ? ' Sign and Submit' : ' Sign'}
-  </span>
-  </div>
+  <div className="flex text-md font-semibold ">
+ <span className="text-[#3D3D3D] dark:text-white min-w-[10rem]">
+ Endorsement Flow
+ </span>{' '}
+ <span className="dark:text-white">:</span>
+ <span className="text-[#5E5972] dark:text-white ml-2">
+ {ecosystemDetails.autoEndorsement ? ' Sign and Submit' : ' Sign'}
+ </span>
+ </div>
  </div>
  ) : (
  <CustomSpinner />
@@ -371,7 +371,7 @@ const Dashboard = () => {
  <RoleTablet role={ecosystemDetails?.role || ''} />
  </div>
  )}
- 
+
  {isEcosystemLead && (
  <div className="inline-flex items-center ml-auto">
  <Button
@@ -498,11 +498,10 @@ const Dashboard = () => {
  <EmptyListMessage
  feature={!orgId ? Features.CRETAE_ORG : ''}
  message={'No Ecosystem found'}
- description={`Get started by creating ${
- !orgId
+ description={`Get started by creating ${!orgId
  ? 'a new Organization to set up your Ecosystem'
  : 'an Ecosystem'
- }`}
+  }`}
  buttonContent={`${!orgId ? '' : 'Create Ecosystem'}`}
  svgComponent={
  <svg

src/components/Ecosystem/Endorsement/EndorsementCard.tsx

@@ -14,6 +14,11 @@ interface IProps {
  onClickCallback?: (data: any) => void;
 }
 
+interface IAttributeData {
+ data: string[],
+ sliced: boolean
+}
+
 const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTransitionDisabled, allAttributes }: IProps) => {
  const [isEcosystemLead, setIsEcosystemLead] = useState(false);
  const isSchema = data?.type === EndorsementType.schema
@@ -26,30 +31,47 @@ const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTrans
  checkEcosystemData();
  }, [])
 
- const getAttributes = () => {
+ const isSliced = (list: string[]): boolean => {
+ return Boolean(list && list?.length > 3)
+ }
+
+ const getAttributes = (): IAttributeData | null => {
  try {
  switch (true) {
  case isSchema:
  if (requestData?.attr_names && requestData?.attr_names.length > 0) {
  if (allAttributes) {
- return requestData?.attr_names
+ return {
+ data: requestData?.attr_names,
+ sliced: isSliced(requestData?.attr_names)
+ }
+ }
+ return {
+ data: requestData?.attr_names?.slice(0, 3),
+ sliced: isSliced(requestData?.attr_names)
  }
- return requestData?.attr_names?.slice(0, 3)
  }
- return []
+ return null
  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: data?.requestBody?.schemaDetails?.attributes,
+ sliced: isSliced(data?.requestBody?.schemaDetails?.attributes)
+ }
+ }
+ return {
+ data: data?.requestBody?.schemaDetails?.attributes?.slice(0, 3),
+ sliced: isSliced(data?.requestBody?.schemaDetails?.attributes)
  }
- return data?.requestBody?.schemaDetails?.attributes?.slice(0, 3)
  }
- return []
+ return null
  default:
- return []
+ return null
  }
  } catch (err) {
  console.log("Attribute Error::", err)
+ return null
  }
  }
 
@@ -58,19 +80,19 @@ const EndorsementCard = ({ fromEndorsementList, data, onClickCallback, cardTrans
  const requestPayload = data?.requestPayload && JSON.parse(data?.requestPayload)
 
  const requestData = isSchema ? requestPayload?.operation?.data : requestPayload?.operation
- const attributesData = getAttributes()
+ const attributesData: IAttributeData | null = getAttributes()
 
  return (
  <Card onClick={() => {
  if (enableAction && onClickCallback) {
  onClickCallback(data)
  }
  }}
-id="schema-cards"
-className={`${cardTransitionDisabled ? "" : "transform transition duration-500 hover:scale-105 hover:bg-gray-50 min-[w-320px]: cursor-default"} ${enableAction && "lg:cursor-pointer cursor-default" }${ cardTransitionDisabled ? "cursor-default" : "lg:cursor-not-allowed cursor-default"} ${cardTransitionDisabled && "shadow-none"} m-3 h-full`}
+ id="schema-cards"
+ className={`${cardTransitionDisabled ? "" : "transform transition duration-500 hover:scale-105 hover:bg-gray-50 min-[w-320px]: cursor-default"} ${enableAction && "lg:cursor-pointer cursor-default"}${cardTransitionDisabled ? "cursor-default" : "lg:cursor-not-allowed cursor-default"} ${cardTransitionDisabled && "shadow-none"} m-3 h-full`}
  >
  <div className="flex justify-between items-start">
- <div className='min-w-[6rem] max-w-100/13rem'>
+  <div className='min-w-[6rem] max-w-100/13rem'>
  <h5 className="text-xl font-bold leading-[1.1] text-gray-900 dark:text-white break-words truncate line-clamp-2 max-h-[43px] whitespace-normal" style={{ display: "-webkit-box" }}>
  {isSchema ? requestData?.name : requestData?.tag}
  </h5>
@@ -131,7 +153,7 @@ className={`${cardTransitionDisabled ? "" : "transform transition duration-500 h
  </p>
  }
  </div>
- {attributesData && attributesData.length > 0 &&
+ {attributesData?.data && attributesData?.data?.length > 0 &&
  <div className="flow-root mt-auto">
  <ul className="divide-y divide-gray-200 dark:divide-gray-700">
  <li className="">
@@ -141,7 +163,7 @@ className={`${cardTransitionDisabled ? "" : "transform transition duration-500 h
  </div>
  <div className="flex flex-wrap items-start overflow-hidden overflow-ellipsis">
 
- {attributesData.map((element: string | { attributeName: string }) => {
+ {attributesData?.data?.map((element: string | { attributeName: string }) => {
  const attribute = typeof element === "string" ? element : element?.attributeName
  return (
  <div key={`schema-card-attributes${attribute}`}>
@@ -154,7 +176,7 @@ className={`${cardTransitionDisabled ? "" : "transform transition duration-500 h
  </div>
  )
  })}
- {!allAttributes && attributesData.length === 3 && <span>...</span>}
+ {!allAttributes && attributesData.sliced && <span>...</span>}
  </div>
  </div>
  </li>

src/components/Ecosystem/Endorsement/index.tsx

@@ -274,8 +274,7 @@ const EndorsementList = () => {
  )}
  {schemaList && schemaList.length > 0 ? (
  <div
- className="Flex-wrap"
- style={{ display: 'flex', flexDirection: 'column' }}
+ className="flex flex-col flex-wrap"
  >
  <div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
  {schemaList.map((item: IEndorsementList) => (

src/components/EmptyListComponent/index.tsx

@@ -1,17 +1,18 @@
 import type { ReactElement } from "react";
 import RoleViewButton from "../RoleViewButton";
 
-export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick, feature }
+export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick, feature, noExtraHeight }
  : {
  message: string,
  description: string,
  buttonContent?: string,
  svgComponent?: ReactElement,
  feature?: string
  onClick?: () => void,
+ noExtraHeight?: true
  }) => {
  return (
- <div className='flex mt-20 mb-16 justify-start items-center flex-col'>
+ <div className={`flex ${noExtraHeight ? "" : "mt-20 mb-16"} justify-start items-center flex-col`}>
  <p className='text-2xl font-bold mb-4 text-gray-900 dark:text-white'>{message}</p>
  <p className='text-lg mb-4 text-gray-900 dark:text-white'>{description}</p>
  {

src/components/User/UserDashBoard.tsx

@@ -17,6 +17,7 @@ import { pathRoutes } from '../../config/pathRoutes';
 import { getFromLocalStorage, setToLocalStorage } from '../../api/Auth';
 import { dateConversion } from '../../utils/DateConversion';
 import DateTooltip from '../Tooltip';
+import { Roles } from '../../utils/enums/roles';
 
 const initialPageState = {
  pageNumber: 1,
@@ -145,11 +146,19 @@ const UserDashBoard = () => {
  await getAllEcosystemInvitations();
  }
  };
- useEffect(() => {
- getAllInvitations();
+
+ const getAllResponses = async () => {
+ const role = await getFromLocalStorage(storageKeys.ORG_ROLES)
+ if (role === Roles.OWNER) {
+ checkOrgId();
+ }
  getAllOrganizations();
+ getAllInvitations();
  getUserRecentActivity();
- checkOrgId();
+ }
+
+ useEffect(() => {
+ getAllResponses()
  }, []);
 
  const goToOrgDashboard = async (orgId: number, roles: string[]) => {
@@ -197,7 +206,7 @@ const UserDashBoard = () => {
  org.roles = roles;
  return (
  <button
- className='block'
+  className='block'
  key={org?.id}
  onClick={() => goToOrgDashboard(org?.id, org?.roles)}
  >