feat: organization tags UI (GSoC) (#2175)

* add organization tags UI

* corrections

* add tag serial number

* remove unwanted change

* minor changes

public/locales/en/translation.json

@@ -200,6 +200,24 @@
     "organization": "Organization",
     "invalidDetailsMessage": "Please enter valid details."
   },
+  "organizationTags": {
+    "title": "Organization Tags",
+    "createTag": "Create a new tag",
+    "manageTag": "Manage",
+    "editTag": "Edit",
+    "removeTag": "Remove",
+    "tagDetails": "Tag Details",
+    "tagName": "Name",
+    "tagType": "Type",
+    "tagNamePlaceholder": "Write the name of the tag",
+    "tagCreationSuccess": "New tag created successfully",
+    "tagUpdationSuccess": "Tag updated successfully",
+    "tagRemovalSuccess": "Tag deleted successfully",
+    "noTagsFound": "No tags found",
+    "removeUserTag": "Delete Tag",
+    "removeUserTagMessage": "Do you want to delete this tag?",
+    "addChildTag": "Add a Sub Tag"
+  },
   "userListCard": {
     "addAdmin": "Add Admin",
     "addedAsAdmin": "User is added as admin."

public/locales/fr/translation.json

@@ -200,6 +200,24 @@
     "organization": "Organisation",
     "invalidDetailsMessage": "Veuillez saisir des informations valides."
   },
+  "organizationTags": {
+    "title": "Étiquettes d'Organisation",
+    "createTag": "Créer une nouvelle étiquette",
+    "manageTag": "Gérer",
+    "editTag": "Modifier",
+    "removeTag": "Supprimer",
+    "tagDetails": "Détails de l'Étiquette",
+    "tagName": "Nom",
+    "tagType": "Type",
+    "tagNamePlaceholder": "Écrire le nom de l'étiquette",
+    "tagCreationSuccess": "Nouvelle étiquette créée avec succès",
+    "tagUpdationSuccess": "Étiquette mise à jour avec succès",
+    "tagRemovalSuccess": "Étiquette supprimée avec succès",
+    "noTagsFound": "Aucune étiquette trouvée",
+    "removeUserTag": "Supprimer l'Étiquette",
+    "removeUserTagMessage": "Voulez-vous supprimer cette étiquette ?",
+    "addChildTag": "Ajouter une Sous-Étiquette"
+  },
   "userListCard": {
     "addAdmin": "Ajouter un administrateur",
     "addedAsAdmin": "L'utilisateur est ajouté en tant qu'administrateur."

public/locales/hi/translation.json

@@ -200,6 +200,24 @@
     "organization": "संगठन",
     "invalidDetailsMessage": "कृपया वैध विवरण दर्ज करें."
   },
+  "organizationTags": {
+    "title": "संस्थान टैग",
+    "createTag": "नया टैग बनाएँ",
+    "manageTag": "प्रबंधित करें",
+    "editTag": "संपादित करें",
+    "removeTag": "हटाएँ",
+    "tagDetails": "टैग विवरण",
+    "tagName": "नाम",
+    "tagType": "प्रकार",
+    "tagNamePlaceholder": "टैग का नाम लिखें",
+    "tagCreationSuccess": "नई टैग सफलतापूर्वक बनाई गई",
+    "tagUpdationSuccess": "टैग सफलतापूर्वक अपडेट की गई",
+    "tagRemovalSuccess": "टैग सफलतापूर्वक हटाई गई",
+    "noTagsFound": "कोई टैग नहीं मिला",
+    "removeUserTag": "टैग हटाएँ",
+    "removeUserTagMessage": "क्या आप इस टैग को हटाना चाहते हैं?",
+    "addChildTag": "उप-टैग जोड़ें"
+  },
   "userListCard": {
     "addAdmin": "व्यवस्थापक जोड़ें",
     "addedAsAdmin": "उपयोगकर्ता को व्यवस्थापक के रूप में जोड़ा गया है."

public/locales/sp/translation.json

@@ -294,6 +294,24 @@
     "cancel": "Cancelar",
     "invalidDetailsMessage": "Ingrese detalles válidos."
   },
+  "organizationTags": {
+    "title": "Etiquetas de Organización",
+    "createTag": "Crear una nueva etiqueta",
+    "manageTag": "Gestionar",
+    "editTag": "Editar",
+    "removeTag": "Eliminar",
+    "tagDetails": "Detalles de la Etiqueta",
+    "tagName": "Nombre",
+    "tagType": "Tipo",
+    "tagNamePlaceholder": "Escribe el nombre de la etiqueta",
+    "tagCreationSuccess": "Nueva etiqueta creada con éxito",
+    "tagUpdationSuccess": "Etiqueta actualizada con éxito",
+    "tagRemovalSuccess": "Etiqueta eliminada con éxito",
+    "noTagsFound": "No se encontraron etiquetas",
+    "removeUserTag": "Eliminar Etiqueta",
+    "removeUserTagMessage": "¿Desea eliminar esta etiqueta?",
+    "addChildTag": "Agregar una Sub Etiqueta"
+  },
   "userListCard": {
     "joined": "Unido",
     "addAdmin": "Agregar administrador",

public/locales/zh/translation.json

@@ -200,6 +200,24 @@
     "organization": "组织",
     "invalidDetailsMessage": "请输入有效的详细信息。"
   },
+  "organizationTags": {
+    "title": "组织标签",
+    "createTag": "创建新标签",
+    "manageTag": "管理",
+    "editTag": "编辑",
+    "removeTag": "删除",
+    "tagDetails": "标签详情",
+    "tagName": "名称",
+    "tagType": "类型",
+    "tagNamePlaceholder": "输入标签名称",
+    "tagCreationSuccess": "新标签创建成功",
+    "tagUpdationSuccess": "标签更新成功",
+    "tagRemovalSuccess": "标签删除成功",
+    "noTagsFound": "未找到标签",
+    "removeUserTag": "删除标签",
+    "removeUserTagMessage": "您确定要删除此标签吗？",
+    "addChildTag": "添加子标签"
+  },
   "userListCard": {
     "addAdmin": "添加管理员",
     "addedAsAdmin": "用户被添加为管理员。"

src/App.tsx

@@ -20,6 +20,9 @@ import OrganizationEvents from 'screens/OrganizationEvents/OrganizationEvents';
 import OrganizaitionFundCampiagn from 'screens/OrganizationFundCampaign/OrganizationFundCampagins';
 import OrganizationFunds from 'screens/OrganizationFunds/OrganizationFunds';
 import OrganizationPeople from 'screens/OrganizationPeople/OrganizationPeople';
+import OrganizationTags from 'screens/OrganizationTags/OrganizationTags';
+// import OrganizationTagDetails from 'screens/OrgnanizationTagDetails/OrganizationTagDetails';
+// import OrganizationTagChildTags from 'screens/OrganizationTagChildTags/OrganizationTagChildTags';
 import PageNotFound from 'screens/PageNotFound/PageNotFound';
 import Requests from 'screens/Requests/Requests';
 import Users from 'screens/Users/Users';
@@ -145,6 +148,15 @@ function app(): JSX.Element {
             <Route path="/requests/:orgId" element={<Requests />} />
             <Route path="/orgdash/:orgId" element={<OrganizationDashboard />} />
             <Route path="/orgpeople/:orgId" element={<OrganizationPeople />} />
+            <Route path="/orgtags/:orgId" element={<OrganizationTags />} />
+            {/* <Route
+              path="orgtags/:orgId/orgtagdetails/:tagId"
+              element={<OrganizationTagDetails />}
+            />
+            <Route
+              path="/orgtags/:orgId/orgtagChildTags/:tagId"
+              element={<OrganizationTagChildTags />}
+            /> */}
             <Route path="/member/:orgId" element={<MemberDetail />} />
             <Route path="/orgevents/:orgId" element={<OrganizationEvents />} />
             <Route

src/GraphQl/Mutations/TagMutations.ts

@@ -0,0 +1,74 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL mutation to create a user tag.
+ *
+ * @param name - Name of the tag.
+ * @param tagColor - Color of the tag.
+ * @param parentTagId - Id of the parent tag.
+ * @param organizationId - Organization to which the tag belongs.
+ */
+
+export const CREATE_USER_TAG = gql`
+  mutation CreateUserTag(
+    $name: String!
+    $tagColor: String
+    $parentTagId: ID
+    $organizationId: ID!
+  ) {
+    createUserTag(
+      input: {
+        name: $name
+        organizationId: $organizationId
+        parentTagId: $parentTagId
+        tagColor: $tagColor
+      }
+    ) {
+      _id
+    }
+  }
+`;
+
+// /**
+//  * GraphQL mutation to unsssign a user tag from a user.
+//  *
+//  * @param tagId - Id the tag.
+//  * @param userId - Id of the user to be unassigned.
+//  */
+
+// export const UNASSIGN_USER_TAG = gql`
+//   mutation UnassignUserTag($tagId: ID!, $userId: ID!) {
+//     unassignUserTag(input: { tagId: $tagId, userId: $userId }) {
+//       _id
+//     }
+//   }
+// `;
+
+// /**
+//  * GraphQL mutation to update a user tag.
+//  *
+//  * @param tagId - Id the tag.
+//  * @param name - Updated name of the tag.
+//  */
+
+// export const UPDATE_USER_TAG = gql`
+//   mutation UpdateUserTag($tagId: ID!, $name: String!) {
+//     updateUserTag(input: { tagId: $tagId, name: $name }) {
+//       _id
+//     }
+//   }
+// `;
+
+/**
+ * GraphQL mutation to remove a user tag.
+ *
+ * @param id - Id of the tag to be removed .
+ */
+
+export const REMOVE_USER_TAG = gql`
+  mutation RemoveUserTag($id: ID!) {
+    removeUserTag(id: $id) {
+      _id
+    }
+  }
+`;

src/GraphQl/Queries/OrganizationQueries.ts

@@ -71,6 +71,52 @@ export const ORGANIZATION_POST_LIST = gql`
   }
 `;
 
+/**
+ * GraphQL query to retrieve the list of user tags belonging to an organization.
+ *
+ * @param id - ID of the organization.
+ * @param first - Number of tags to retrieve "after" (if provided) a certain tag.
+ * @param after - Id of the last tag on the current page.
+ * @param last - Number of tags to retrieve "before" (if provided) a certain tag.
+ * @param before - Id of the first tag on the current page.
+ * @returns The list of organizations based on the applied filters.
+ */
+
+export const ORGANIZATION_USER_TAGS_LIST = gql`
+  query Organizations(
+    $id: ID!
+    $after: String
+    $before: String
+    $first: PositiveInt
+    $last: PositiveInt
+  ) {
+    organizations(id: $id) {
+      userTags(after: $after, before: $before, first: $first, last: $last) {
+        edges {
+          node {
+            _id
+            name
+            usersAssignedTo(first: $first, last: $last) {
+              totalCount
+            }
+            childTags(first: $first, last: $last) {
+              totalCount
+            }
+          }
+          cursor
+        }
+        pageInfo {
+          startCursor
+          endCursor
+          hasNextPage
+          hasPreviousPage
+        }
+        totalCount
+      }
+    }
+  }
+`;
+
 export const ORGANIZATION_ADVERTISEMENT_LIST = gql`
   query Organizations(
     $id: ID!

src/components/IconComponent/IconComponent.test.tsx

@@ -15,6 +15,14 @@ const screenTestIdMap: Record<string, Record<string, string>> = {
     name: 'People',
     testId: 'Icon-Component-PeopleIcon',
   },
+  Tags: {
+    name: 'Tags',
+    testId: 'Icon-Component-TagsIcon',
+  },
+  Tag: {
+    name: 'Tag',
+    testId: 'Icon-Component-TagIcon',
+  },
   Requests: {
     name: 'Requests',
     testId: 'Icon-Component-RequestsIcon',

src/components/IconComponent/IconComponent.tsx

@@ -14,6 +14,8 @@ import { ReactComponent as FundsIcon } from 'assets/svgs/funds.svg';
 import { ReactComponent as ListEventRegistrantsIcon } from 'assets/svgs/listEventRegistrants.svg';
 import { ReactComponent as OrganizationsIcon } from 'assets/svgs/organizations.svg';
 import { ReactComponent as PeopleIcon } from 'assets/svgs/people.svg';
+import { ReactComponent as TagsIcon } from 'assets/svgs/tags.svg';
+import { ReactComponent as TagIcon } from 'assets/svgs/tag.svg';
 import { ReactComponent as PluginsIcon } from 'assets/svgs/plugins.svg';
 import { ReactComponent as PostsIcon } from 'assets/svgs/posts.svg';
 import { ReactComponent as SettingsIcon } from 'assets/svgs/settings.svg';
@@ -49,6 +51,10 @@ const iconComponent = (props: InterfaceIconComponent): JSX.Element => {
       );
     case 'People':
       return <PeopleIcon {...props} data-testid="Icon-Component-PeopleIcon" />;
+    case 'Tags':
+      return <TagsIcon {...props} data-testid="Icon-Component-TagsIcon" />;
+    case 'Tag':
+      return <TagIcon {...props} data-testid="Icon-Component-TagIcon" />;
     case 'Requests':
       return (
         <RequestsIcon {...props} data-testid="Icon-Component-RequestsIcon" />

src/components/OrganizationScreen/OrganizationScreen.tsx

@@ -128,6 +128,7 @@ export default OrganizationScreen;
 const map: InterfaceMapType = {
   orgdash: 'dashboard',
   orgpeople: 'organizationPeople',
+  orgtags: 'organizationTags',
   requests: 'requests',
   orgads: 'advertisement',
   member: 'memberDetail',