Edit project frontend integration (#2777)

* Added GQL integration for Edit project from teaming

Signed-off-by: Saranya-jena <saranya@chaosnative.com>

* added translations

Signed-off-by: Saranya-jena <saranya@chaosnative.com>

* removed unused CSS

Signed-off-by: Saranya-jena <saranya@chaosnative.com>

litmus-portal/frontend/public/locales/en/translation.yaml

@@ -476,6 +476,7 @@ settings:
     header: Members
     invitedProject: Projects you were invited to
     noUsers: No users available
+    editProjectLabel: Project ID
     label:
       search: Search...
       role: Role

litmus-portal/frontend/src/graphql/mutations.ts

@@ -54,6 +54,12 @@ export const CREATE_PROJECT = gql`
   }
 `;
 
+export const UPDATE_PROJECT_NAME = gql`
+  mutation updateProjectName($projectID: String!, $projectName: String!) {
+    updateProjectName(projectID: $projectID, projectName: $projectName)
+  }
+`;
+
 export const SEND_INVITE = gql`
   mutation sendInvite($member: MemberInput!) {
     sendInvitation(member: $member) {

litmus-portal/frontend/src/views/Settings/TeamingTab/Team/index.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 import {
   Box,
   FormControl,
@@ -12,11 +12,16 @@ import {
   Typography,
   useTheme,
 } from '@material-ui/core';
-import { Search } from 'litmus-ui';
+import { EditableText, Search } from 'litmus-ui';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Center from '../../../../containers/layouts/Center';
-import { ALL_USERS, GET_PROJECT, LIST_PROJECTS } from '../../../../graphql';
+import {
+  ALL_USERS,
+  GET_PROJECT,
+  LIST_PROJECTS,
+  UPDATE_PROJECT_NAME,
+} from '../../../../graphql';
 import { UserInvite } from '../../../../models/graphql/invite';
 import {
   Member,
@@ -93,7 +98,6 @@ const TeamingTab: React.FC = () => {
   const [allUsers, setAllUsers] = useState<UserInvite[]>([]);
 
   const [activeTab, setActiveTab] = useState<number>(0);
-  const [selectedProjectName, setselectedProjectName] = useState<string>('');
 
   const handleChange = (event: React.ChangeEvent<{}>, actTab: number) => {
     setActiveTab(actTab);
@@ -104,7 +108,6 @@ const TeamingTab: React.FC = () => {
     ProjectDetailVars
   >(GET_PROJECT, {
     variables: { projectID },
-    onCompleted: (data) => setselectedProjectName(data.getProject.name),
     fetchPolicy: 'cache-and-network',
   });
 
@@ -231,6 +234,15 @@ const TeamingTab: React.FC = () => {
     setInvitationCount(projectInvitation);
     setProjectOtherCount(projectOther);
   }, [projects, dataProject, deleteMemberOpen, inviteNewOpen, activeTab]);
+
+  const [updateProjectName] = useMutation(UPDATE_PROJECT_NAME, {
+    refetchQueries: [
+      {
+        query: GET_PROJECT,
+        variables: { projectID },
+      },
+    ],
+  });
   return (
     <div>
       {!loading ? (
@@ -282,12 +294,22 @@ const TeamingTab: React.FC = () => {
             </Center>
             <div>
               <Paper className={classes.myProject} elevation={0}>
-                <div className={classes.project}>
-                  <Typography className={classes.projectName}>
-                    {/* Check for removal of userData */}
-                    {selectedProjectName}
-                  </Typography>
-                </div>
+                <Center>
+                  <div className={classes.project}>
+                    <EditableText
+                      label={t('settings.teamingTab.editProjectLabel')}
+                      defaultValue={dataB ? dataB.getProject.name : ''}
+                      onSave={(value) => {
+                        updateProjectName({
+                          variables: {
+                            projectID,
+                            projectName: value,
+                          },
+                        });
+                      }}
+                    />
+                  </div>
+                </Center>
                 <Toolbar data-cy="toolBarComponent" className={classes.toolbar}>
                   {/* Search user */}
                   <div

litmus-portal/frontend/src/views/Settings/TeamingTab/Team/styles.ts

@@ -229,16 +229,12 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   project: {
     margin: theme.spacing(3.875, 'auto', 2.5, 'auto'),
-    display: 'flex',
-    alignItems: 'center',
   },
   projectName: {
-    margin: theme.spacing(0, 0, 0, 1.56),
     textTransform: 'uppercase',
     fontWeight: 500,
     fontSize: '1rem',
   },
-
   active: {
     textTransform: 'capitalize',
     color: theme.palette.primary.main,