basic frontend

dashboard/src/main/home/Home.tsx

@@ -255,7 +255,6 @@ class Home extends Component<PropsType, StateType> {
     let { match } = this.props;
     let params = match.params as any;
     let { cluster } = params;
-    console.log("cluster is", cluster);
 
     let { user } = this.context;
 

dashboard/src/main/home/integrations/IntegrationCategories.tsx

@@ -20,6 +20,7 @@ const IntegrationCategories: React.FC<Props> = (props) => {
   const [currentIds, setCurrentIds] = useState([]);
   const [currentIntegrationData, setCurrentIntegrationData] = useState([]);
   const [loading, setLoading] = useState(false);
+  const [slackData, setSlackData] = useState([]);
 
   const { currentProject, setCurrentModal } = useContext(Context);
 
@@ -69,7 +70,13 @@ const IntegrationCategories: React.FC<Props> = (props) => {
           .catch(console.log);
         break;
       case "slack":
-        // to be implemented
+        api
+          .getSlackIntegrations("<token>", {}, { id: currentProject.id })
+          .then((res) => {
+            setSlackData(res.data);
+            setLoading(false);
+          })
+          .catch(console.log);
         break;
       default:
         console.log("Unknown integration category.");
@@ -115,8 +122,7 @@ const IntegrationCategories: React.FC<Props> = (props) => {
                   ),
               });
             } else {
-              alert("redirect to install link...");
-              // /api/oauth/projects/{project_id}/slack
+              window.location.href = `/api/oauth/projects/${currentProject.id}/slack`;
             }
           }}
         >
@@ -129,6 +135,17 @@ const IntegrationCategories: React.FC<Props> = (props) => {
 
       {loading ? (
         <Loading />
+      ) : props.category == "slack" ? (
+        <>
+          {slackData.map((inst) => {
+            return (
+              <>
+                <img src={inst.team_icon_url} alt="team icon" height={"15"} />
+                &nbsp; Team ID {inst.team_id}: in channel {inst.channel}
+              </>
+            );
+          })}
+        </>
       ) : (
         <IntegrationList
           currentCategory={props.category}

dashboard/src/shared/api.tsx

@@ -679,6 +679,13 @@ const getRepos = baseApi<{}, { id: number }>("GET", (pathParams) => {
   return `/api/projects/${pathParams.id}/repos`;
 });
 
+const getSlackIntegrations = baseApi<{}, { id: number }>(
+  "GET",
+  (pathParams) => {
+    return `/api/projects/${pathParams.id}/slack_integrations`;
+  }
+);
+
 const getRevisions = baseApi<
   {
     namespace: string;
@@ -1036,6 +1043,7 @@ export default {
   getRegistryIntegrations,
   getReleaseToken,
   getRepoIntegrations,
+  getSlackIntegrations,
   getRepos,
   getRevisions,
   getTemplateInfo,