Merge pull request #8 from StackExchange/PS-264-hardcoded-ui

Hub now presents plugin information + Added tooltips in the HUB's UI

Author: EstoesMoises

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

app-config.yaml

@@ -12,7 +12,7 @@ stackoverflow:
   baseUrl: ${STACK_OVERFLOW_INSTANCE_URL}
   # Required only for Enteprise Tier.
 
-  teamName: ${STACK_OVERFLOW_TEAM_NAME}
+  # teamName: ${STACK_OVERFLOW_TEAM_NAME}
   # Required only for Basic and Business Tiers. 
 
   apiAccessToken: ${STACK_OVERFLOW_API_ACCESS_TOKEN}

plugins/stack-overflow-teams/src/components/StackOverflow/index.ts

@@ -3,3 +3,4 @@ export { StackOverflowTags } from './StackOverflowTags'
 export { StackOverflowUsers } from './StackOverflowUsers'
 export { StackOverflowSearchResultListItem } from './StackOverflowSearchResultListItem'
 export { StackOverflowPostQuestionModal } from './StackOverflowPostQuestionModal'
+export { StackOverflowMe } from './StackOverflowMe'

plugins/stack-overflow-teams/src/pages/StackOverflowHub.tsx

@@ -1,41 +1,51 @@
 import React from 'react';
-import { Typography, Grid, Box, Paper } from '@material-ui/core';
+import packageJson from '../../package.json'
+import { Typography, Grid, Box, Paper, Tooltip } from '@material-ui/core';
+import Help from '@material-ui/icons/Help';
+import QuestionAnswer from '@material-ui/icons/QuestionAnswer';
+import Person from '@material-ui/icons/Person';
+import LocalOffer from '@material-ui/icons/LocalOffer';
+import People from '@material-ui/icons/People';
 import {
   Header,
   Page,
   Content,
   ContentHeader,
   HeaderLabel,
-  SupportButton,
 } from '@backstage/core-components';
 import {
   StackOverflowQuestions,
   StackOverflowTags,
   StackOverflowUsers,
+  StackOverflowMe
 } from '../components/StackOverflow';
-import { StackOverflowMe } from '../components/StackOverflow/StackOverflowMe';
 
 export const StackOverflowHub = () => (
   <Page themeId="plugin">
-    <Header title="Welcome to Stack Overflow Teams!" subtitle="Your knowledge hub.">
-      <HeaderLabel label="Owner" value="Team X" />
-      <HeaderLabel label="Lifecycle" value="Alpha" />
+    <Header title="Welcome to Stack Overflow Teams!" subtitle="Your team's collective knowledge at your fingertips.">
+      <HeaderLabel label="Owner" value="Stack Overflow" />
+      <HeaderLabel label="Plugin Version" value={`v${packageJson.version}`} />
     </Header>
     <Content>
-      <ContentHeader title="Stack Overflow for Teams">
-        <SupportButton>
-          View a leaderboard of your Stack Overflow instance with top users,
-          trending tags, and unanswered questions.
-        </SupportButton>
-      </ContentHeader>
+      <ContentHeader title="Stack Overflow for Teams"/>
       <Grid container spacing={3}>
         {/* Main Questions Section */}
         <Grid item xs={12} md={8}>
           <Paper elevation={3}>
             <Box p={3}>
-              <Typography variant="h5" gutterBottom>
-                Stack Overflow Questions
-              </Typography>
+              <Box display="flex" justifyContent="space-between" alignItems="center">
+                <Box display="flex" alignItems="center">
+                  <QuestionAnswer style={{ marginRight: 8 }} />
+                  <Typography variant="h5" gutterBottom>
+                    Questions
+                  </Typography>
+                </Box>
+                <Tooltip title="Browse and search through your team's questions.">
+                  
+                    <Help />
+                  
+                </Tooltip>
+              </Box>
               <Box mt={1}>
                   <StackOverflowQuestions />
               </Box>
@@ -50,14 +60,42 @@ export const StackOverflowHub = () => (
             <Grid item xs={12}>
               <Paper elevation={3}>
                 <Box p={3}>
-                  <StackOverflowMe />
+                  <Box display="flex" justifyContent="space-between" alignItems="flex-start" mb={2}>
+                    <Box flex={1}>
+                      <Box display="flex" alignItems="center" mb={2}>
+                        <Person style={{ marginRight: 8 }} />
+                        <Typography variant="h6">
+                          My Profile
+                        </Typography>
+                      </Box>
+                      <StackOverflowMe />
+                    </Box>
+                    <Tooltip title="Information from your Stack Overflow for Teams profile.">
+                      
+                        <Help />
+                      
+                    </Tooltip>
+                  </Box>
                 </Box>
               </Paper>
             </Grid>
             {/* Tags Section */}
             <Grid item xs={12}>
               <Paper elevation={3}>
                 <Box p={2}>
+                  <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
+                    <Box display="flex" alignItems="center">
+                      <LocalOffer style={{ marginRight: 8 }} />
+                      <Typography variant="h6">
+                        Tags
+                      </Typography>
+                    </Box>
+                    <Tooltip title="Popular tags used in your team to categorize and organize questions">
+                      
+                        <Help />
+                      
+                    </Tooltip>
+                  </Box>
                   <Box mt={1}>
                     <StackOverflowTags />
                   </Box>
@@ -71,7 +109,19 @@ export const StackOverflowHub = () => (
         <Grid item xs={12}>
           <Paper elevation={3}>
             <Box p={3}>
-        
+              <Box display="flex" justifyContent="space-between" alignItems="center" mb={2}>
+                <Box display="flex" alignItems="center">
+                  <People style={{ marginRight: 8 }} />
+                  <Typography variant="h5">
+                    Team Members
+                  </Typography>
+                </Box>
+                <Tooltip title="Team members, their role, reputation scores.">
+                  
+                    <Help />
+                  
+                </Tooltip>
+              </Box>
               <Box mt={2}>
                 <StackOverflowUsers />
               </Box>
@@ -81,4 +131,4 @@ export const StackOverflowHub = () => (
       </Grid>
     </Content>
   </Page>
-);
+);