Sample Org Implementation

public/locales/en.json

@@ -85,6 +85,7 @@
     "searchByName": "Search By Name",
     "organizations": "Organizations",
     "createOrganization": "Create Organization",
+    "createSampleOrganization": "Create Sample Organization",
     "description": "Description",
     "location": "Location",
     "isPublic": "Is Public",
@@ -106,7 +107,8 @@
   "orgListCard": {
     "admins": "Admins",
     "members": "Members",
-    "manage": "Manage"
+    "manage": "Manage",
+    "sampleOrganization": "Sample Organization"
   },
   "paginationList": {
     "rowsPerPage": "rows per page",
@@ -386,6 +388,7 @@
   },
   "deleteOrg": {
     "deleteOrganization": "Delete Organization",
+    "deleteSampleOrganization": "Delete Sample Organization",
     "deleteMsg": "Do you want to delete this organization?",
     "no": "No",
     "yes": "Yes",

public/locales/fr.json

@@ -80,6 +80,7 @@
     "searchByName": "Rechercher par nom",
     "organizations": "Organisations",
     "createOrganization": "Créer une organisation",
+    "createSampleOrganization": "Créer une organisation d'exemple",
     "description": "La description",
     "location": "Emplacement",
     "isPublic": "Est publique",
@@ -96,8 +97,10 @@
   "orgListCard": {
     "admins": "Administrateurs",
     "members": "Membres",
-    "manage": "Faire en sorte"
+    "manage": "Faire en sorte",
+    "sampleOrganization": "Organisation d'exemple"
   },
+
   "paginationList": {
     "rowsPerPage": "lignes par page",
     "all": "Tout"
@@ -376,6 +379,7 @@
   },
   "deleteOrg": {
     "deleteOrganization": "Supprimer l'organisation",
+    "deleteSampleOrganization": "Supprimer l'organisation d'exemple",
     "deleteMsg": "Voulez-vous supprimer cette organisation ?",
     "no": "Non",
     "yes": "Oui",

public/locales/hi.json

@@ -80,6 +80,7 @@
     "searchByName": "नाम से खोजें",
     "organizations": "संगठन",
     "createOrganization": "संगठन बनाएं",
+    "createSampleOrganization": " सैंपल संगठन बनाएं",
     "description": "विवरण",
     "location": "स्थान",
     "isPublic": "सार्वजनिक है",
@@ -96,7 +97,8 @@
   "orgListCard": {
     "admins": "व्यवस्थापक",
     "members": "सदस्य",
-    "manage": "प्रबंधित करना"
+    "manage": "प्रबंधित करना",
+    "sampleOrganization": "सैंपल संगठन"
   },
   "paginationList": {
     "rowsPerPage": "प्रति पृष्ठ पंक्तियाँ",
@@ -376,6 +378,7 @@
   },
   "deleteOrg": {
     "deleteOrganization": "संगठन हटाएं",
+    "deleteSampleOrganization": "सैंपल संगठन को हटाएं",
     "deleteMsg": "क्या आप इस संगठन को हटाना चाहते हैं?",
     "no": "नहीं",
     "yes": "हां",

public/locales/sp.json

@@ -80,6 +80,7 @@
     "searchByName": "Buscar por nombre",
     "organizations": "Organizaciones",
     "createOrganization": "Crear organización",
+    "createSampleOrganization": "Crear organización de muestra",
     "description": "Descripción",
     "location": "Ubicación",
     "isPublic": "Es público",
@@ -96,7 +97,8 @@
   "orgListCard": {
     "admins": "Administradores",
     "members": "Miembros",
-    "manage": "Administrar"
+    "manage": "Administrar",
+    "sampleOrganization": "Organización de muestra"
   },
   "paginationList": {
     "rowsPerPage": "filas por página",
@@ -376,6 +378,7 @@
   },
   "deleteOrg": {
     "deleteOrganization": "Eliminar organización",
+    "deleteSampleOrganization": "Eliminar organización de muestra",
     "deleteMsg": "¿Desea eliminar esta organización?",
     "no": "No",
     "yes": "Sí",

public/locales/zh.json

@@ -80,6 +80,7 @@
     "searchByName": "按名稱搜索",
     "organizations": "组织",
     "createOrganization": "創建組織",
+    "createSampleOrganization": "创建示范组织",
     "description": "描述",
     "location": "地點",
     "isPublic": "是否公開",
@@ -96,7 +97,8 @@
   "orgListCard": {
     "admins": "管理員",
     "members": "成員",
-    "manage": "管理"
+    "manage": "管理",
+    "sampleOrganization": "示例组织"
   },
   "paginationList": {
     "rowsPerPage": "每頁行數",
@@ -376,6 +378,7 @@
   },
   "deleteOrg": {
     "deleteOrganization": "删除组织",
+    "deleteSampleOrganization": "删除示范组织",
     "deleteMsg": "您是否要删除此组织？",
     "no": "否",
     "yes": "是",

src/GraphQl/Mutations/mutations.ts

@@ -622,3 +622,15 @@ export const UNLIKE_COMMENT = gql`
     }
   }
 `;
+
+export const CREATE_SAMPLE_ORGANIZATION_MUTATION = gql`
+  mutation {
+    createSampleOrganization
+  }
+`;
+
+export const REMOVE_SAMPLE_ORGANIZATION_MUTATION = gql`
+  mutation {
+    removeSampleOrganization
+  }
+`;

src/GraphQl/Queries/Queries.ts

@@ -714,3 +714,9 @@ export const USER_TASKS_LIST = gql`
     }
   }
 `;
+
+export const IS_SAMPLE_ORGANIZATION_QUERY = gql`
+  query ($isSampleOrganizationId: ID!) {
+    isSampleOrganization(id: $isSampleOrganizationId)
+  }
+`;

src/components/DeleteOrg/DeleteOrg.tsx

@@ -1,9 +1,12 @@
-import { useMutation } from '@apollo/client';
-import { DELETE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
 import React, { useState } from 'react';
 import { Button, Card, Modal } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
+import { useMutation, useQuery } from '@apollo/client';
 import { errorHandler } from 'utils/errorHandler';
+import { toast } from 'react-toastify';
+import { DELETE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
+import { REMOVE_SAMPLE_ORGANIZATION_MUTATION } from 'GraphQl/Mutations/mutations';
+import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
 import styles from './DeleteOrg.module.css';
 
 function deleteOrg(): JSX.Element {
@@ -14,22 +17,39 @@ function deleteOrg(): JSX.Element {
   const currentUrl = window.location.href.split('=')[1];
   const canDelete = localStorage.getItem('UserType') === 'SUPERADMIN';
   const toggleDeleteModal = (): void => setShowDeleteModal(!showDeleteModal);
+
   const [del] = useMutation(DELETE_ORGANIZATION_MUTATION);
+  const [removeSampleOrganization] = useMutation(
+    REMOVE_SAMPLE_ORGANIZATION_MUTATION
+  );
+
+  const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, {
+    variables: {
+      isSampleOrganizationId: currentUrl,
+    },
+  });
 
   const deleteOrg = async (): Promise<void> => {
-    try {
-      const { data } = await del({
-        variables: {
-          id: currentUrl,
-        },
-      });
-      /* istanbul ignore next */
-      if (data) {
+    if (data && data.isSampleOrganization) {
+      removeSampleOrganization()
+        .then(() => {
+          toast.success('Successfully deleted sample Organization');
+        })
+        .catch((error) => {
+          toast.error(error.message);
+        });
+      window.location.replace('/orglist');
+    } else {
+      try {
+        await del({
+          variables: {
+            id: currentUrl,
+          },
+        });
         window.location.replace('/orglist');
+      } catch (error: any) {
+        errorHandler(t, error);
       }
-    } catch (error: any) {
-      /* istanbul ignore next */
-      errorHandler(t, error);
     }
   };
 
@@ -48,7 +68,9 @@ function deleteOrg(): JSX.Element {
               onClick={toggleDeleteModal}
               data-testid="openDeleteModalBtn"
             >
-              {t('deleteOrganization')}
+              {data && data.isSampleOrganization
+                ? t('deleteSampleOrganization')
+                : t('deleteOrganization')}
             </Button>
           </Card.Body>
         </Card>

src/components/OrgListCard/OrgListCard.module.css

@@ -77,3 +77,16 @@
     display: block;
   }
 }
+
+.flaskIcon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 10px 20px 0px 0px;
+}
+
+.manageBtn {
+  display: flex;
+  justify-content: space-around;
+  width: 150px;
+}

src/components/OrgListCard/OrgListCard.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
+import { ReactComponent as FlaskIcon } from 'assets/svgs/flask.svg';
 import Button from 'react-bootstrap/Button';
 import { useTranslation } from 'react-i18next';
 import styles from './OrgListCard.module.css';
 import { useHistory } from 'react-router-dom';
 import type { InterfaceOrgConnectionInfoType } from 'utils/interfaces';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
+import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
+import { useQuery } from '@apollo/client';
 
 export interface InterfaceOrgListCardProps {
   data: InterfaceOrgConnectionInfoType;
@@ -13,6 +16,12 @@ export interface InterfaceOrgListCardProps {
 function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
   const { _id, admins, image, location, members, name } = props.data;
 
+  const { data } = useQuery(IS_SAMPLE_ORGANIZATION_QUERY, {
+    variables: {
+      isSampleOrganizationId: _id,
+    },
+  });
+
   const history = useHistory();
 
   function handleClick(): void {
@@ -46,7 +55,6 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
             )}
           </div>
           <div className={styles.content}>
-            <h5>{name}</h5>
             <h6 className="text-secondary">
               <LocationOnIcon fontSize="inherit" className="fs-5" />
               {location}
@@ -57,9 +65,22 @@ function orgListCard(props: InterfaceOrgListCardProps): JSX.Element {
             <h6>
               {t('members')}: <span>{members.length}</span>
             </h6>
+            <h6>{name} </h6>
           </div>
         </div>
-        <Button onClick={handleClick} data-testid="manageBtn">
+        <Button
+          onClick={handleClick}
+          data-testid="manageBtn"
+          className={styles.manageBtn}
+        >
+          {data && data?.isSampleOrganization && (
+            <FlaskIcon
+              fill="var(--bs-white)"
+              width={20}
+              title={t('sampleOrganization')}
+            />
+          )}
+          {'  '}
           {t('manage')}
         </Button>
       </div>

src/screens/OrgList/OrgList.module.css

@@ -7,6 +7,33 @@
   display: flex;
 }
 
+.flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.sampleHover:hover {
+  border-color: grey;
+  color: grey;
+}
+
+.btnDivider {
+  padding: 20px;
+}
+
+.sampleOrgSection {
+  font-family: Arial, Helvetica, sans-serif;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sampleModalTitle {
+  background-color: green;
+}
+
 .btnsContainer .btnsBlock button {
   margin-left: 1rem;
   display: flex;
@@ -129,12 +156,14 @@
   flex-direction: column;
   margin-left: 1rem;
 }
+
 .titlemodaldialog {
   color: #707070;
   font-size: 20px;
   margin-bottom: 20px;
   padding-bottom: 5px;
 }
+
 form label {
   font-weight: bold;
   padding-bottom: 1px;
@@ -170,13 +199,16 @@ form > input {
   cursor: pointer;
   color: #707070;
 }
+
 .modalbody {
   width: 50px;
 }
+
 .pluginStoreBtnContainer {
   display: flex;
   gap: 1rem;
 }
+
 .greenregbtn {
   margin: 1rem 0 0;
   margin-top: 10px;
@@ -200,6 +232,7 @@ form > input {
   width: 45%;
   height: 18px;
 }
+
 .secondbtn {
   display: flex;
   align-items: center;