UI:Adds rating

This patch adds: - User can rate a particular resource - User can see their previous rating - User can update their rating - To rate a resource user needs to be authenticated to Hub Signed-off-by: Shiv Verma <[email protected]>
tektoncd · Dec 23, 2020 · 77cb573 · 77cb573
1 parent 2dc7b11
commit 77cb573
Show file tree

Hide file tree

Showing 20 changed files with 527 additions and 391 deletions.
diff --git a/ui/src/components/Cards/Cards.css b/ui/src/components/Cards/Cards.css
@@ -7,7 +7,7 @@
 }
 
 .hub-rating {
-  margin-top: 0.32em;
+  margin-top: 0.1em;
 }
 
 .hub-resource-name {
@@ -44,6 +44,10 @@
   vertical-align: -0.125em;
 }
 
+.hub-rating-icon svg {
+  color: #484848;
+}
+
 .hub-card-link {
   text-decoration: none;
 }

diff --git a/ui/src/components/Cards/__snapshots__/Cards.test.tsx.snap b/ui/src/components/Cards/__snapshots__/Cards.test.tsx.snap
@@ -13,7 +13,9 @@ exports[`Cards should render the resources on cards 1`] = `
             <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
           </span>
           <CardActions>
-            <Icon id=\\"star\\" size=\\"sm\\" label=\\"4\\" />
+            <span className=\\"hub-rating-icon\\">
+              <Icon id=\\"star\\" size=\\"sm\\" label=\\"4\\" />
+            </span>
             <TextContent className=\\"hub-rating\\">
               4
             </TextContent>
@@ -57,7 +59,9 @@ exports[`Cards should render the resources on cards 1`] = `
             <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
           </span>
           <CardActions>
-            <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
+            <span className=\\"hub-rating-icon\\">
+              <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
+            </span>
             <TextContent className=\\"hub-rating\\">
               5
             </TextContent>
@@ -100,7 +104,9 @@ exports[`Cards should render the resources on cards 1`] = `
             <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
           </span>
           <CardActions>
-            <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
+            <span className=\\"hub-rating-icon\\">
+              <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
+            </span>
             <TextContent className=\\"hub-rating\\">
               5
             </TextContent>
@@ -143,7 +149,9 @@ exports[`Cards should render the resources on cards 1`] = `
             <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
           </span>
           <CardActions>
-            <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
+            <span className=\\"hub-rating-icon\\">
+              <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
+            </span>
             <TextContent className=\\"hub-rating\\">
               5
             </TextContent>
@@ -189,7 +197,9 @@ exports[`Cards should render the resources on cards 1`] = `
             <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
           </span>
           <CardActions>
-            <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
+            <span className=\\"hub-rating-icon\\">
+              <Icon id=\\"star\\" size=\\"sm\\" label=\\"5\\" />
+            </span>
             <TextContent className=\\"hub-rating\\">
               5
             </TextContent>
@@ -233,7 +243,9 @@ exports[`Cards should render the resources on cards 1`] = `
             <Icon id=\\"user\\" size=\\"sm\\" label=\\"tekton\\" />
           </span>
           <CardActions>
-            <Icon id=\\"star\\" size=\\"sm\\" label=\\"4.5\\" />
+            <span className=\\"hub-rating-icon\\">
+              <Icon id=\\"star\\" size=\\"sm\\" label=\\"4.5\\" />
+            </span>
             <TextContent className=\\"hub-rating\\">
               4.5
             </TextContent>
@@ -276,7 +288,9 @@ exports[`Cards should render the resources on cards 1`] = `
             <Icon id=\\"cat\\" size=\\"sm\\" label=\\"tekton-hub\\" />
           </span>
           <CardActions>
-            <Icon id=\\"star\\" size=\\"sm\\" label=\\"4.5\\" />
+            <span className=\\"hub-rating-icon\\">
+              <Icon id=\\"star\\" size=\\"sm\\" label=\\"4.5\\" />
+            </span>
             <TextContent className=\\"hub-rating\\">
               4.5
             </TextContent>

diff --git a/ui/src/components/Cards/index.tsx b/ui/src/components/Cards/index.tsx
@@ -48,7 +48,9 @@ const Cards: React.FC<Props> = (resources) => {
                 </span>
 
                 <CardActions>
-                  <Icon id={Icons.Star} size={IconSize.sm} label={String(resource.rating)} />
+                  <span className="hub-rating-icon">
+                    <Icon id={Icons.Star} size={IconSize.sm} label={String(resource.rating)} />
+                  </span>
                   <TextContent className="hub-rating">{resource.rating}</TextContent>
                 </CardActions>
               </CardHeader>

diff --git a/ui/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/ui/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Icon Component should render icon for Official Catalog 1`] = `"<CatIcon
 
 exports[`Icon Component should render icon for Pipeline Kind 1`] = `"<DomainIcon size=\\"md\\" className=\\"hub-icon\\" label=\\"Pipeline\\" color=\\"currentColor\\" noVerticalAlign={false} />"`;
 
-exports[`Icon Component should render icon for Rating 1`] = `"<StarIcon size=\\"sm\\" className=\\"hub-icon\\" label=\\"Rating\\" color=\\"currentColor\\" noVerticalAlign={false} />"`;
+exports[`Icon Component should render icon for Rating 1`] = `"<StarIcon size=\\"sm\\" label=\\"Rating\\" color=\\"currentColor\\" noVerticalAlign={false} />"`;
 
 exports[`Icon Component should render icon for Task Kind 1`] = `"<BuildIcon size=\\"sm\\" className=\\"hub-icon\\" label=\\"Task\\" color=\\"currentColor\\" noVerticalAlign={false} />"`;
 

diff --git a/ui/src/components/Icon/index.tsx b/ui/src/components/Icon/index.tsx
@@ -34,7 +34,7 @@ const Icon: React.FC<Props> = (props: Props) => {
     case Icons.Domain:
       return <DomainIcon size={size} className="hub-icon" label={label} />;
     case Icons.Star:
-      return <StarIcon size={size} className="hub-icon" label={label} />;
+      return <StarIcon size={size} label={label} />;
     case Icons.Github:
       return <GithubIcon size={size} className="hub-icon" label={label} />;
   }

diff --git a/ui/src/containers/Authentication/index.tsx b/ui/src/containers/Authentication/index.tsx
@@ -44,7 +44,7 @@ const Authentication: React.FC = observer(() => {
           />
         </CardBody>
       </Card>
-      {user.err ? (
+      {user.authErr ? (
         <AlertGroup isToast>
           <Alert
             isLiveRegion

diff --git a/ui/src/containers/BasicDetails/BasicDetails.css b/ui/src/containers/BasicDetails/BasicDetails.css
@@ -89,3 +89,7 @@
   position: relative;
   left: 3em;
 }
+
+.hub-details-average-rating svg {
+  color: #484848;
+}
diff --git a/ui/src/containers/BasicDetails/BasicDetails.test.tsx b/ui/src/containers/BasicDetails/BasicDetails.test.tsx
@@ -13,6 +13,11 @@ const { Provider, root } = createProviderAndStore(api);
 
 jest.mock('react-router-dom', () => {
   return {
+    useHistory: () => {
+      return {
+        history: ''
+      };
+    },
     useParams: () => {
       return {
         name: 'buildah'