Roles: prefer namespace over github_user

src/components/legacy-namespace-list/legacy-namespace-item.tsx

@@ -29,7 +29,7 @@ export function LegacyNamespaceListItem({
   } = useContext();
   const { id, avatar_url, name, summary_fields } = namespace;
 
-  const namespace_url = formatPath(Paths.legacyNamespace, {
+  const namespace_url = formatPath(Paths.standaloneNamespace, {
     namespaceid: id,
   });
 

src/components/legacy-role-list/legacy-role-item.tsx

@@ -29,15 +29,14 @@ interface LegacyRoleProps {
 export function LegacyRoleListItem({ role, show_thumbnail }: LegacyRoleProps) {
   const {
     description,
-    github_user,
     modified,
     name,
     summary_fields: { namespace, versions, tags },
   } = role;
   const latest = versions[0];
 
-  const role_url = formatPath(Paths.legacyRole, {
-    username: namespace.name,
+  const role_url = formatPath(Paths.standaloneRole, {
+    namespace: namespace.name,
     name,
   });
   const release_date = latest?.release_date || modified;
@@ -49,7 +48,7 @@ export function LegacyRoleListItem({ role, show_thumbnail }: LegacyRoleProps) {
     cells.push(
       <DataListCell isFilled={false} alignRight={false} key='ns'>
         <Logo
-          alt={t`${github_user} logo`}
+          alt={t`${namespace.name} logo`}
           image={namespace.avatar_url}
           size='70px'
           unlockWidth

src/containers/ansible-role/namespace-detail.tsx

@@ -102,7 +102,7 @@ class NamespaceRoles extends React.Component<
     this.setState({ loading: true });
     LegacyRoleAPI.list({
       ...params,
-      github_user: namespace.name,
+      namespace: namespace.name,
     })
       .then(({ data: { count, results } }) =>
         this.setState({
@@ -237,7 +237,7 @@ class AnsibleRoleNamespaceDetail extends React.Component<
 > {
   static contextType = AppContext;
 
-  // This is the details page for a legacy namespace
+  // This is the details page for a standalone namespace
 
   constructor(props) {
     super(props);
@@ -261,8 +261,7 @@ class AnsibleRoleNamespaceDetail extends React.Component<
   }
 
   componentDidMount() {
-    const namespaceid = this.props.routeParams.namespaceid;
-    LegacyNamespaceAPI.get(namespaceid)
+    LegacyNamespaceAPI.get(this.props.routeParams.namespaceid)
       .then((response) =>
         this.setState({
           loading: false,
@@ -299,7 +298,7 @@ class AnsibleRoleNamespaceDetail extends React.Component<
       );
     }
 
-    const namespace_url = formatPath(Paths.legacyNamespace, {
+    const namespace_url = formatPath(Paths.standaloneNamespace, {
       namespaceid: namespace.id,
     });
 

src/containers/ansible-role/role-detail.tsx

@@ -41,20 +41,20 @@ import { NotFound } from 'src/containers/not-found/not-found';
 import { Paths, formatPath } from 'src/paths';
 import { RouteProps, handleHttpError, withRouter } from 'src/utilities';
 
-interface RoleMeta {
+interface RoleMetaProps {
   addAlert: (alert: AlertType) => void;
-  github_user: string;
   name: string;
+  namespace: string;
   role: LegacyRoleDetailType;
 }
 
-interface RoleMetaReadme {
+interface RoleMetaReadmeState {
   readme_html: string;
 }
 
-class RoleInstall extends React.Component<RoleMeta> {
+class RoleInstall extends React.Component<RoleMetaProps> {
   render() {
-    const installCMD = `ansible-galaxy role install ${this.props.github_user}.${this.props.name}`;
+    const installCMD = `ansible-galaxy role install ${this.props.namespace}.${this.props.name}`;
     return (
       <>
         <h1>
@@ -68,7 +68,7 @@ class RoleInstall extends React.Component<RoleMeta> {
   }
 }
 
-class RoleDocs extends React.Component<RoleMeta, RoleMetaReadme> {
+class RoleDocs extends React.Component<RoleMetaProps, RoleMetaReadmeState> {
   constructor(props) {
     super(props);
     this.state = {
@@ -138,7 +138,7 @@ interface RoleVersionsState {
   loading: boolean;
 }
 
-class RoleVersions extends React.Component<RoleMeta, RoleVersionsState> {
+class RoleVersions extends React.Component<RoleMetaProps, RoleVersionsState> {
   constructor(props) {
     super(props);
     this.state = {
@@ -191,31 +191,33 @@ class RoleVersions extends React.Component<RoleMeta, RoleVersionsState> {
 interface RoleState {
   activeItem: string;
   alerts: AlertType[];
-  github_user: string;
   loading: boolean;
   name: string;
+  namespace: string;
   role: LegacyRoleDetailType;
 }
 
 class AnsibleRoleDetail extends React.Component<RouteProps, RoleState> {
   constructor(props) {
     super(props);
 
-    const { username, name } = props.routeParams;
+    const { namespace, name } = props.routeParams;
     this.state = {
       activeItem: 'install',
       alerts: [],
-      github_user: username,
       loading: true,
       name,
+      namespace,
       role: null,
     };
   }
 
   componentDidMount() {
+    const { name, namespace } = this.state;
+
     LegacyRoleAPI.list({
-      github_user: this.state.github_user,
-      name: this.state.name,
+      name,
+      namespace,
       page_size: 1,
     })
       .then(({ data: { results } }) =>
@@ -241,7 +243,8 @@ class AnsibleRoleDetail extends React.Component<RouteProps, RoleState> {
   }
 
   render() {
-    const { activeItem, alerts, github_user, loading, name, role } = this.state;
+    const { activeItem, alerts, loading, name, role } = this.state;
+
     if (loading) {
       return <LoadingPageWithHeader />;
     }
@@ -261,7 +264,7 @@ class AnsibleRoleDetail extends React.Component<RouteProps, RoleState> {
       '/' +
       encodeURIComponent(role.github_repo);
     const namespace = role.summary_fields.namespace;
-    const namespace_url = formatPath(Paths.legacyNamespace, {
+    const namespace_url = formatPath(Paths.standaloneNamespace, {
       namespaceid: namespace.id,
     });
     let release_date = null;
@@ -281,7 +284,7 @@ class AnsibleRoleDetail extends React.Component<RouteProps, RoleState> {
     const header_cells = [
       <DataListCell isFilled={false} alignRight={false} key='ns'>
         <Logo
-          alt={t`${role.github_user} logo`}
+          alt={t`${namespace.name} logo`}
           fallbackToDefault
           image={role.summary_fields.namespace.avatar_url}
           size='70px'
@@ -339,26 +342,26 @@ class AnsibleRoleDetail extends React.Component<RouteProps, RoleState> {
         return (
           <RoleInstall
             addAlert={addAlert}
-            github_user={github_user}
             name={name}
+            namespace={namespace.name}
             role={role}
           />
         );
       } else if (activeItem === 'documentation') {
         return (
           <RoleDocs
             addAlert={addAlert}
-            github_user={github_user}
             name={name}
+            namespace={namespace.name}
             role={role}
           />
         );
       } else if (activeItem === 'versions') {
         return (
           <RoleVersions
             addAlert={addAlert}
-            github_user={github_user}
             name={name}
+            namespace={namespace.name}
             role={role}
           />
         );
@@ -370,16 +373,18 @@ class AnsibleRoleDetail extends React.Component<RouteProps, RoleState> {
     const breadcrumbs = [
       {
         name: t`Roles`,
-        url: formatPath(Paths.legacyRoles),
+        url: formatPath(Paths.standaloneRoles),
       },
       {
-        name: github_user,
-        url: formatPath(Paths.legacyNamespace, { namespaceid: namespace.id }),
+        name: namespace.name,
+        url: formatPath(Paths.standaloneNamespace, {
+          namespaceid: namespace.id,
+        }),
       },
       {
         name,
-        url: formatPath(Paths.legacyRole, {
-          username: github_user,
+        url: formatPath(Paths.standaloneRole, {
+          namespace: namespace.name,
           name,
         }),
       },

src/containers/not-found/dispatch.tsx

@@ -52,7 +52,7 @@ export const Dispatch = ({ location, navigate }: RouteProps) => {
 
     if (featureFlags.legacy_roles) {
       wait.push(
-        LegacyRoleAPI.list({ github_user: namespace, name })
+        LegacyRoleAPI.list({ name, namespace })
           .then(({ data: { results } }) => results || [])
           .catch(() => [])
           .then((r) => (setRoles(r), r)),
@@ -79,13 +79,13 @@ export const Dispatch = ({ location, navigate }: RouteProps) => {
         const {
           name,
           summary_fields: {
-            namespace: { name: username },
+            namespace: { name: namespace },
           },
         } = roles[0];
 
         navigate(
-          formatPath(Paths.legacyRole, {
-            username,
+          formatPath(Paths.standaloneRole, {
+            namespace,
             name,
           }),
         );
@@ -161,7 +161,7 @@ export const Dispatch = ({ location, navigate }: RouteProps) => {
                   title={t`No matching roles found.`}
                   description={
                     <Link
-                      to={formatPath(Paths.legacyRoles)}
+                      to={formatPath(Paths.standaloneRoles)}
                     >{t`Show all roles`}</Link>
                   }
                 />
@@ -177,7 +177,7 @@ export const Dispatch = ({ location, navigate }: RouteProps) => {
                     ))}
                   </DataList>
                   <Link
-                    to={formatPath(Paths.legacyRoles)}
+                    to={formatPath(Paths.standaloneRoles)}
                   >{t`Show all roles`}</Link>
                 </>
               )}

src/containers/search/multi-search.tsx

@@ -283,12 +283,12 @@ export const MultiSearch = (props: RouteProps) => {
             title={t`Roles`}
             showAllLink={
               <Link
-                to={formatPath(Paths.legacyRoles)}
+                to={formatPath(Paths.standaloneRoles)}
               >{t`Show all roles`}</Link>
             }
             showMoreLink={
               <Link
-                to={formatPath(Paths.legacyRoles, {}, { keywords })}
+                to={formatPath(Paths.standaloneRoles, {}, { keywords })}
               >{t`Show more roles`}</Link>
             }
           >
@@ -306,12 +306,12 @@ export const MultiSearch = (props: RouteProps) => {
             title={t`Role namespaces`}
             showAllLink={
               <Link
-                to={formatPath(Paths.legacyNamespaces)}
+                to={formatPath(Paths.standaloneNamespaces)}
               >{t`Show all role namespaces`}</Link>
             }
             showMoreLink={
               <Link
-                to={formatPath(Paths.legacyNamespaces, {}, { keywords })}
+                to={formatPath(Paths.standaloneNamespaces, {}, { keywords })}
               >{t`Show more role namespaces`}</Link>
             }
           >
@@ -408,7 +408,7 @@ export const MultiSearch = (props: RouteProps) => {
             emptyStateTitle={t`No matching roles found.`}
             showAllLink={
               <Link
-                to={formatPath(Paths.legacyRoles)}
+                to={formatPath(Paths.standaloneRoles)}
               >{t`Show all roles`}</Link>
             }
           />
@@ -421,7 +421,7 @@ export const MultiSearch = (props: RouteProps) => {
             emptyStateTitle={t`No matching role namespaces found.`}
             showAllLink={
               <Link
-                to={formatPath(Paths.legacyNamespaces)}
+                to={formatPath(Paths.standaloneNamespaces)}
               >{t`Show all role namespaces`}</Link>
             }
           />

src/loaders/standalone/menu.tsx

@@ -99,11 +99,11 @@ function standaloneMenu() {
       },
       [
         menuItem(t`Roles`, {
-          url: formatPath(Paths.legacyRoles),
+          url: formatPath(Paths.standaloneRoles),
           alternativeUrls: [formatPath(Paths.compatLegacyRoles)],
         }),
         menuItem(t`Role Namespaces`, {
-          url: formatPath(Paths.legacyNamespaces),
+          url: formatPath(Paths.standaloneNamespaces),
           alternativeUrls: [formatPath(Paths.compatLegacyNamespaces)],
         }),
       ],

src/loaders/standalone/routes.tsx

@@ -212,10 +212,13 @@ export class StandaloneRoutes extends React.Component<IRoutesProps> {
       },
 
       // roles ...
-      { component: AnsibleRoleNamespaceDetail, path: Paths.legacyNamespace },
-      { component: AnsibleRoleNamespaceList, path: Paths.legacyNamespaces },
-      { component: AnsibleRoleDetail, path: Paths.legacyRole },
-      { component: AnsibleRoleList, path: Paths.legacyRoles },
+      {
+        component: AnsibleRoleNamespaceDetail,
+        path: Paths.standaloneNamespace,
+      },
+      { component: AnsibleRoleNamespaceList, path: Paths.standaloneNamespaces },
+      { component: AnsibleRoleDetail, path: Paths.standaloneRole },
+      { component: AnsibleRoleList, path: Paths.standaloneRoles },
       // ... but still support legacy urls
       {
         component: AnsibleRoleNamespaceDetail,

src/paths.ts

@@ -90,10 +90,10 @@ export enum Paths {
   login = '/login',
   logout = '/logout',
   landingPage = '/',
-  legacyRole = '/standalone/roles/:username/:name',
-  legacyRoles = '/standalone/roles/',
-  legacyNamespace = '/standalone/namespaces/:namespaceid',
-  legacyNamespaces = '/standalone/namespaces/',
+  standaloneRole = '/standalone/roles/:namespace/:name',
+  standaloneRoles = '/standalone/roles',
+  standaloneNamespace = '/standalone/namespaces/:namespaceid',
+  standaloneNamespaces = '/standalone/namespaces',
   searchByRepo = '/repo/:repo',
   myCollectionsByRepo = '/repo/:repo/my-namespaces/:namespace',
   collectionByRepo = '/repo/:repo/:namespace/:collection',
@@ -127,10 +127,10 @@ export enum Paths {
   collections = '/collections',
 
   // for compatibility with old beta routes, remove later
-  compatLegacyRole = '/legacy/roles/:username/:name',
-  compatLegacyRoles = '/legacy/roles/',
+  compatLegacyRole = '/legacy/roles/:namespace/:name',
+  compatLegacyRoles = '/legacy/roles',
   compatLegacyNamespace = '/legacy/namespaces/:namespaceid',
-  compatLegacyNamespaces = '/legacy/namespaces/',
+  compatLegacyNamespaces = '/legacy/namespaces',
 }
 
 export const namespaceBreadcrumb = () =>