using org names in urls

uselagoon · Nov 17, 2023 · 30d66cf · 30d66cf
1 parent 9a76e76
commit 30d66cf
Show file tree

Hide file tree

Showing 29 changed files with 312 additions and 231 deletions.
diff --git a/src/components/Breadcrumbs/Organizations/User.js b/src/components/Breadcrumbs/Organizations/User.js
@@ -1,25 +1,19 @@
 import React from 'react';
+
 import Breadcrumb from 'components/Breadcrumbs/Breadcrumb';
 
 const getLinkData = (userSlug, organizationSlug, organizationName) => ({
-    urlObject: {
-      pathname: '/organizations/user',
-      query: { userSlug, organizationSlug: organizationSlug, organizationName: organizationName },
-    },
-    asPath: `/organizations/${organizationSlug}/users/${userSlug}`,
-  });
+  urlObject: {
+    pathname: '/organizations/user',
+    query: { userSlug, organizationSlug, organizationName },
+  },
+  asPath: `/organizations/${organizationName}/users/${userSlug}`,
+});
 
 const UserBreadcrumb = ({ userSlug, organizationSlug, organizationName, loading }) => {
   const linkData = getLinkData(userSlug, organizationSlug, organizationName);
 
-  return (
-    <Breadcrumb
-      header="User"
-      title={userSlug}
-      loading={loading}
-      {... linkData}
-    />
-  );
+  return <Breadcrumb header="User" title={userSlug} loading={loading} {...linkData} />;
 };
 
 export default UserBreadcrumb;
diff --git a/src/components/Organizations/GroupMembers/index.js b/src/components/Organizations/GroupMembers/index.js
@@ -34,7 +34,7 @@ import { StyledGroupMembers } from './Styles';
 export const getLinkData = (userSlug, organizationSlug, organizationName) => ({
   urlObject: {
     pathname: '/organizations/user',
-    query: { userSlug, organizationSlug: organizationSlug, organizationName: organizationName },
+    query: { userSlug, organizationSlug, organizationName },
   },
   asPath: `/organizations/${organizationSlug}/users/${userSlug}`,
 });
@@ -138,7 +138,7 @@ const GroupMembers = ({
       width: '30%',
       key: 'email',
       render: ({ user }) => {
-        const linkData = getLinkData(user.email, organizationId, organizationName);
+        const linkData = getLinkData(user.email, organizationName, organizationId);
         return (
           <div className="email">
             <Link href={linkData.urlObject} as={linkData.asPath}>
@@ -160,7 +160,7 @@ const GroupMembers = ({
       width: '15%',
       key: 'actions',
       render: ({ user, role }) => {
-        const linkData = getLinkData(user.email, organizationId, organizationName);
+        const linkData = getLinkData(user.email, organizationName, organizationId);
         return (
           <TableActions>
             <Tooltip overlayClassName="orgTooltip" placement="bottom" title="Edit role">
@@ -233,8 +233,8 @@ const GroupMembers = ({
           <ProjectGroupLink
             className="link"
             projectGroupSlug={project.name}
-            organizationSlug={organizationId}
-            organizationName={organizationName}
+            organizationSlug={organizationName}
+            organizationId={organizationId}
             key={id}
           >
             {name}
@@ -260,8 +260,8 @@ const GroupMembers = ({
                 <ProjectGroupLink
                   className="link"
                   projectGroupSlug={project.name}
-                  organizationSlug={organizationId}
-                  organizationName={organizationName}
+                  organizationSlug={organizationName}
+                  organizationId={organizationId}
                   key={project.id}
                 >
                   <EyeOutlined className="view" />

diff --git a/src/components/Organizations/Groups/index.js b/src/components/Organizations/Groups/index.js
@@ -65,8 +65,8 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
         return (
           <OrgGroupsLink
             groupSlug={i.name}
-            organizationSlug={organizationId}
-            organizationName={organizationName}
+            organizationSlug={organizationName}
+            organizationId={organizationId}
             key={i.id}
           >
             <span>
@@ -121,8 +121,8 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
                 <OrgGroupsLink
                   className="link"
                   groupSlug={i.name}
-                  organizationSlug={organizationId}
-                  organizationName={organizationName}
+                  organizationSlug={organizationName}
+                  organizationId={organizationId}
                   key={i.id}
                 >
                   <EditOutlined className="edit" />

diff --git a/src/components/Organizations/NavTabs/index.js b/src/components/Organizations/NavTabs/index.js
@@ -1,6 +1,13 @@
 import React from 'react';
 
-import { BellOutlined, GlobalOutlined, ReadOutlined, SettingOutlined, GroupOutlined, TeamOutlined } from '@ant-design/icons';
+import {
+  BellOutlined,
+  GlobalOutlined,
+  GroupOutlined,
+  ReadOutlined,
+  SettingOutlined,
+  TeamOutlined,
+} from '@ant-design/icons';
 import OrgGroupsLink from 'components/link/Organizations/Groups';
 import OrgManageLink from 'components/link/Organizations/Manage';
 import OrgNotificationsLink from 'components/link/Organizations/Notifications';
@@ -10,46 +17,48 @@ import OrgUsersLink from 'components/link/Organizations/Users';
 
 import { StyledNavigation } from './StyledNavTabs';
 
-const OrgNavTabs = ({ activeTab, organization }) => (
-  <StyledNavigation>
-    <li className={`overview ${activeTab == 'overview' ? 'active' : ''} linkContainer`}>
-      <OrganizationLink organizationName={organization.name} organizationSlug={organization.id} className="navLink">
-        <ReadOutlined className="icon" />
-        <span className="destination">Organization Overview</span>
-      </OrganizationLink>
-    </li>
-    <li className={`groups ${activeTab == 'groups' ? 'active' : ''} linkContainer`}>
-      <OrgGroupsLink organizationSlug={organization.id} organizationName={organization.name} className="navLink">
-        <GroupOutlined className="icon" />
-        <span className="destination">Groups</span>
-      </OrgGroupsLink>
-    </li>
-    <li className={`users ${activeTab == 'users' ? 'active' : ''} linkContainer`}>
-      <OrgUsersLink organizationSlug={organization.id} organizationName={organization.name} className="navLink">
-        <TeamOutlined className="icon" />
-        <span className="destination">Users</span>
-      </OrgUsersLink>
-    </li>
-    <li className={`projects ${activeTab == 'projects' ? 'active' : ''} linkContainer`}>
-      <OrgProjectsLink organizationSlug={organization.id} organizationName={organization.name} className="navLink">
-        <GlobalOutlined className="icon" />
-        <span className="destination">Projects</span>
-      </OrgProjectsLink>
-    </li>
-    <li className={`notifications ${activeTab == 'notifications' ? 'active' : ''} linkContainer`}>
-      <OrgNotificationsLink organizationSlug={organization.id} organizationName={organization.name} className="navLink">
-        <BellOutlined className="icon" />
-        <span className="destination">Notifications</span>
-      </OrgNotificationsLink>
-    </li>
+const OrgNavTabs = ({ activeTab, organization }) => {
+  return (
+    <StyledNavigation>
+      <li className={`overview ${activeTab == 'overview' ? 'active' : ''} linkContainer`}>
+        <OrganizationLink organizationSlug={organization.name} organizationId={organization.id} className="navLink">
+          <ReadOutlined className="icon" />
+          <span className="destination">Organization Overview</span>
+        </OrganizationLink>
+      </li>
+      <li className={`groups ${activeTab == 'groups' ? 'active' : ''} linkContainer`}>
+        <OrgGroupsLink organizationSlug={organization.name} organizationId={organization.id} className="navLink">
+          <GroupOutlined className="icon" />
+          <span className="destination">Groups</span>
+        </OrgGroupsLink>
+      </li>
+      <li className={`users ${activeTab == 'users' ? 'active' : ''} linkContainer`}>
+        <OrgUsersLink organizationSlug={organization.name} organizationId={organization.id} className="navLink">
+          <TeamOutlined className="icon" />
+          <span className="destination">Users</span>
+        </OrgUsersLink>
+      </li>
+      <li className={`projects ${activeTab == 'projects' ? 'active' : ''} linkContainer`}>
+        <OrgProjectsLink organizationSlug={organization.name} organizationId={organization.id} className="navLink">
+          <GlobalOutlined className="icon" />
+          <span className="destination">Projects</span>
+        </OrgProjectsLink>
+      </li>
+      <li className={`notifications ${activeTab == 'notifications' ? 'active' : ''} linkContainer`}>
+        <OrgNotificationsLink organizationSlug={organization.name} organizationId={organization.id} className="navLink">
+          <BellOutlined className="icon" />
+          <span className="destination">Notifications</span>
+        </OrgNotificationsLink>
+      </li>
 
-    <li className={`manage ${activeTab == 'manage' ? 'active' : ''} linkContainer`}>
-      <OrgManageLink organizationSlug={organization.id} organizationName={organization.name} className="navLink">
-        <SettingOutlined className="icon" />
-        <span className="destination">Manage</span>
-      </OrgManageLink>
-    </li>
-  </StyledNavigation>
-);
+      <li className={`manage ${activeTab == 'manage' ? 'active' : ''} linkContainer`}>
+        <OrgManageLink organizationSlug={organization.name} organizationId={organization.id} className="navLink">
+          <SettingOutlined className="icon" />
+          <span className="destination">Manage</span>
+        </OrgManageLink>
+      </li>
+    </StyledNavigation>
+  );
+};
 
 export default OrgNavTabs;
diff --git a/src/components/Organizations/Organization/index.js b/src/components/Organizations/Organization/index.js
@@ -60,9 +60,9 @@ const Organization = ({ organization, refetch }) => {
     const link = {
       urlObject: {
         pathname: `/organizations/${pluralName}`,
-        query: { organizationSlug: organization.id },
+        query: { organizationSlug: organization.id, organizationName: organization.name },
       },
-      asPath: `/organizations/${organization.id}/${pluralName}`,
+      asPath: `/organizations/${organization.name}/${pluralName}`,
     };
 
     return (
@@ -124,7 +124,7 @@ const Organization = ({ organization, refetch }) => {
                 <Mutation mutation={UPDATE_ORGANIZATION_FRIENDLY_NAME} onError={e => console.error(e)}>
                   {(updateOrgFriendlyName, { error, data, called }) => {
                     if (error) {
-                      return <div className='error'>{error.message}</div>;
+                      return <div className="error">{error.message}</div>;
                     }
                     if (data) {
                       refetch().then(() => {
@@ -274,7 +274,7 @@ const Organization = ({ organization, refetch }) => {
                   </div>
                 </div>
               ))}
-              <OrgManageLink organizationSlug={organization.id} organizationName={organization.name}>
+              <OrgManageLink organizationSlug={organization.name} organizationId={organization.id}>
                 <ManageBtn>
                   <EyeOutlined className="icon" /> Manage
                 </ManageBtn>

diff --git a/src/components/Organizations/Organizations/index.tsx b/src/components/Organizations/Organizations/index.tsx
@@ -55,7 +55,7 @@ const Organizations = ({ organizations = [] }: { organizations: IOrganization[]
         </Box>
       )}
       {filteredOrganizations.map(organization => (
-        <OrganizationLink organizationSlug={organization.id} organizationName={organization.name} key={organization.id}>
+        <OrganizationLink organizationSlug={organization.name} organizationId={organization.id} key={organization.id}>
           <Box className="box">
             <Organization>
               <h4>

diff --git a/src/components/Organizations/ProjectGroupMembers/index.js b/src/components/Organizations/ProjectGroupMembers/index.js
@@ -22,7 +22,7 @@ const REMOVE_GROUP_FROM_PROJECT = gql`
 /**
  * The primary list of members.
  */
-const ProjectGroupMembers = ({ groups = [], organizationId, organizationName, projectName, orgGroups, refresh }) => {
+const ProjectGroupMembers = ({ groups = [], organizationId, organizationSlug, projectName, orgGroups, refresh }) => {
   const [searchInput, setSearchInput] = useState('');
 
   const [showDefaults, setShowDefaults] = useState(false);
@@ -70,11 +70,7 @@ const ProjectGroupMembers = ({ groups = [], organizationId, organizationName, pr
         {filteredMembers.map(group => (
           <div className="data-row" key={group.id}>
             <div className="name">
-              <OrgGroupsLink
-                groupSlug={group.name}
-                organizationSlug={organizationId}
-                organizationName={organizationName}
-              >
+              <OrgGroupsLink groupSlug={group.name} organizationId={organizationId} organizationSlug={organizationSlug}>
                 {group.name}
               </OrgGroupsLink>
             </div>
@@ -92,8 +88,8 @@ const ProjectGroupMembers = ({ groups = [], organizationId, organizationName, pr
                   <>
                     <OrgGroupsLink
                       groupSlug={group.name}
-                      organizationSlug={organizationId}
-                      organizationName={organizationName}
+                      organizationSlug={organizationSlug}
+                      organizationId={organizationId}
                     >
                       <EyeOutlined />
                     </OrgGroupsLink>

diff --git a/src/components/Organizations/ProjectNotifications/index.js b/src/components/Organizations/ProjectNotifications/index.js
@@ -28,7 +28,7 @@ const REMOVE_NOTIFICATION_FROM_PROJECT = gql`
 /**
  * The primary list of members.
  */
-const ProjectNotifications = ({ notifications = [], organizationId, projectName, organization, refresh }) => {
+const ProjectNotifications = ({ notifications = [], organizationSlug ,organizationId, projectName, organization, refresh }) => {
   const [searchInput, setSearchInput] = useState('');
 
   const filteredMembers = notifications.filter(key => {
@@ -72,7 +72,7 @@ const ProjectNotifications = ({ notifications = [], organizationId, projectName,
                     <TableActions>
                       <Tooltip overlayClassName="orgTooltip" title="Edit" placement="bottom">
                         <>
-                          <OrgNotificationsLink organizationSlug={organizationId} className="link">
+                          <OrgNotificationsLink organizationSlug={organizationSlug} className="link">
                             <EditOutlined className="edit" />
                           </OrgNotificationsLink>
                         </>

diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
@@ -40,8 +40,8 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
           <>
             <ProjectGroupLink
               projectGroupSlug={project.name}
-              organizationSlug={organizationId}
-              organizationName={organizationName}
+              organizationSlug={organizationName}
+              organizationId={organizationId}
               key={project.id}
             >
               {project.name}
@@ -80,8 +80,8 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
                 <ProjectGroupLink
                   className="link"
                   projectGroupSlug={project.name}
-                  organizationSlug={organizationId}
-                  organizationName={organizationName}
+                  organizationSlug={organizationName}
+                  organizationId={organizationId}
                   key={project.id}
                 >
                   <EditOutlined className="edit" />

diff --git a/src/components/Organizations/User/index.tsx b/src/components/Organizations/User/index.tsx
@@ -53,9 +53,9 @@ type User = {
 export const getLinkData = (userSlug: string, organizationSlug: string, organizationName: string) => ({
   urlObject: {
     pathname: '/organizations/users',
-    query: { user: userSlug, organizationSlug: organizationSlug, organizationName: organizationName },
+    query: { user: userSlug, organizationSlug, organizationName },
   },
-  asPath: `/organizations/${organizationSlug}/users/${userSlug}`,
+  asPath: `/organizations/${organizationName}/users/${userSlug}`,
 });
 
 const DELETE_USER_FROM_GROUP = gql`
@@ -111,9 +111,9 @@ const User: FC<UserProps> = ({ user, organizationName, organizationId, refetch }
   const groupLinkData = (groupSlug: string, organizationSlug: string, organizationName: string) => ({
     urlObject: {
       pathname: '/organizations/group',
-      query: { groupName: groupSlug, organizationSlug: organizationSlug, organizationName: organizationName },
+      query: { groupName: groupSlug, organizationSlug, organizationName },
     },
-    asPath: `/organizations/${organizationSlug}/groups/${groupSlug}`,
+    asPath: `/organizations/${organizationName}/groups/${groupSlug}`,
   });
 
   const UserColumns = [
@@ -282,7 +282,7 @@ const User: FC<UserProps> = ({ user, organizationName, organizationId, refetch }
                 >
                   {(removeUserFromGroup, { called, error, data }) => {
                     if (error) {
-                      return <div className='error'>{error.message}</div>;
+                      return <div className="error">{error.message}</div>;
                     }
                     if (data) {
                       refetch();

diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js
@@ -19,10 +19,11 @@ import { StyledUsers } from './Styles';
 export const getLinkData = (userSlug, organizationSlug, organizationName) => ({
   urlObject: {
     pathname: '/organizations/user',
-    query: { userSlug, organizationSlug: organizationSlug, organizationName: organizationName },
+    query: { userSlug, organizationSlug, organizationName },
   },
-  asPath: `/organizations/${organizationSlug}/users/${userSlug}`,
+  asPath: `/organizations/${organizationName}/users/${userSlug}`,
 });
+
 const DELETE_USER = gql`
   mutation removeUserFromOrganizationGroups($organization: Int!, $email: String!) {
     removeUserFromOrganizationGroups(input: { user: { email: $email }, organization: $organization }) {
@@ -152,7 +153,7 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
                     <Mutation mutation={DELETE_USER}>
                       {(removeUserFromOrganizationGroups, { called, error, data }) => {
                         if (error) {
-                          return <div className='error'>{error.message}</div>;
+                          return <div className="error">{error.message}</div>;
                         }
                         if (data) {
                           refetch().then(() => {