|
|
@@ -1,9 +1,16 @@
|
|
|
import React, { useContext, useEffect, useState } from "react";
|
|
|
import styled from "styled-components";
|
|
|
-import close from "../../../assets/close.png";
|
|
|
+
|
|
|
+import close from "assets/close.png";
|
|
|
+import github from "assets/github.png";
|
|
|
+
|
|
|
import { Context } from "../../../shared/Context";
|
|
|
import api from "../../../shared/api";
|
|
|
import Loading from "../../../components/Loading";
|
|
|
+import Heading from "components/values-form/Heading";
|
|
|
+import Helper from "components/values-form/Helper";
|
|
|
+
|
|
|
+import TabSelector from "components/TabSelector";
|
|
|
|
|
|
interface GithubAppAccessData {
|
|
|
has_access: boolean;
|
|
|
@@ -11,6 +18,8 @@ interface GithubAppAccessData {
|
|
|
accounts?: string[];
|
|
|
}
|
|
|
|
|
|
+const tabOptions = [{ label: "Integrations", value: "integrations" }];
|
|
|
+
|
|
|
const AccountSettingsModal = () => {
|
|
|
const { setCurrentModal } = useContext(Context);
|
|
|
const [accessLoading, setAccessLoading] = useState(true);
|
|
|
@@ -18,6 +27,7 @@ const AccountSettingsModal = () => {
|
|
|
const [accessData, setAccessData] = useState<GithubAppAccessData>({
|
|
|
has_access: false,
|
|
|
});
|
|
|
+ const [currentTab, setCurrentTab] = useState("integrations");
|
|
|
|
|
|
useEffect(() => {
|
|
|
api
|
|
|
@@ -41,9 +51,21 @@ const AccountSettingsModal = () => {
|
|
|
>
|
|
|
<CloseButtonImg src={close} />
|
|
|
</CloseButton>
|
|
|
- <ModalTitle>Account Settings</ModalTitle>
|
|
|
- <Subtitle>Github Integration</Subtitle>
|
|
|
- <br />
|
|
|
+ <ModalTitle>
|
|
|
+ Account Settings
|
|
|
+ </ModalTitle>
|
|
|
+
|
|
|
+ <TabSelector
|
|
|
+ options={tabOptions}
|
|
|
+ currentTab={currentTab}
|
|
|
+ setCurrentTab={(value: string) =>
|
|
|
+ setCurrentTab(value)
|
|
|
+ }
|
|
|
+ />
|
|
|
+
|
|
|
+ <Heading>
|
|
|
+ <GitIcon src={github} /> Github
|
|
|
+ </Heading>
|
|
|
{accessError ? (
|
|
|
<Placeholder>An error has occured.</Placeholder>
|
|
|
) : accessLoading ? (
|
|
|
@@ -56,42 +78,49 @@ const AccountSettingsModal = () => {
|
|
|
{/* Will be styled (and show what account is connected) later */}
|
|
|
{accessData.has_access ? (
|
|
|
<Placeholder>
|
|
|
- Authorized as <b>{accessData.username}</b> <br />
|
|
|
- {!accessData.accounts || accessData.accounts.length == 0 ? (
|
|
|
- <>
|
|
|
- It doesn't seem like the Porter application is installed in
|
|
|
- any repositories you have access to.
|
|
|
- <A href={"/api/integrations/github-app/install"}>
|
|
|
- Install the application in more repositories
|
|
|
- </A>
|
|
|
- </>
|
|
|
+ <User>
|
|
|
+ You are currently authorized as <B>{accessData.username || "jusrhee"}</B> and have access to the following repos:
|
|
|
+ </User>
|
|
|
+ {!accessData.accounts || accessData.accounts?.length == 0 ? (
|
|
|
+ <ListWrapper>
|
|
|
+ <Helper>
|
|
|
+ No connected repositories found.
|
|
|
+ <A href={"/api/integrations/github-app/install"}>
|
|
|
+ Install Porter in your repositories
|
|
|
+ </A>
|
|
|
+ </Helper>
|
|
|
+ </ListWrapper>
|
|
|
) : (
|
|
|
<>
|
|
|
- Additionally, porter has access to repos with the application
|
|
|
- installed in them in the following organizations and accounts:{" "}
|
|
|
- {accessData.accounts.map((name, i) => {
|
|
|
- return (
|
|
|
- <React.Fragment key={i}>
|
|
|
- <b>{name}</b>
|
|
|
- {i == accessData.accounts.length - 1 ? "" : ", "}
|
|
|
- </React.Fragment>
|
|
|
- );
|
|
|
- })}{" "}
|
|
|
+ <List>
|
|
|
+ {accessData.accounts.map((name, i) => {
|
|
|
+ return (
|
|
|
+ <React.Fragment key={i}>
|
|
|
+ <Row isLastItem={i === 1}>
|
|
|
+ <i className="material-icons">bookmark</i>
|
|
|
+ {name}
|
|
|
+ </Row>
|
|
|
+ </React.Fragment>
|
|
|
+ );
|
|
|
+ })}
|
|
|
+ </List>
|
|
|
<br />
|
|
|
Don't see the right repos?{" "}
|
|
|
<A href={"/api/integrations/github-app/install"}>
|
|
|
- Install the application in more repositories
|
|
|
+ Install Porter in more repositories
|
|
|
</A>
|
|
|
</>
|
|
|
)}
|
|
|
</Placeholder>
|
|
|
) : (
|
|
|
- <>
|
|
|
- No github integration detected. You can
|
|
|
- <A href={"/api/integrations/github-app/authorize"}>
|
|
|
- connect your GitHub account
|
|
|
- </A>
|
|
|
- </>
|
|
|
+ <ListWrapper>
|
|
|
+ <Helper>
|
|
|
+ No github integration detected. You can
|
|
|
+ <A href={"/api/integrations/github-app/authorize"}>
|
|
|
+ connect your GitHub account
|
|
|
+ </A>
|
|
|
+ </Helper>
|
|
|
+ </ListWrapper>
|
|
|
)}
|
|
|
</>
|
|
|
)}
|
|
|
@@ -101,11 +130,65 @@ const AccountSettingsModal = () => {
|
|
|
|
|
|
export default AccountSettingsModal;
|
|
|
|
|
|
+const B = styled.b`
|
|
|
+ color: #ffffff;
|
|
|
+`;
|
|
|
+
|
|
|
+const User = styled.div`
|
|
|
+ margin-top: 14px;
|
|
|
+ font-size: 13px;
|
|
|
+`;
|
|
|
+
|
|
|
+const ListWrapper = styled.div`
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ background: #ffffff11;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 40px;
|
|
|
+`;
|
|
|
+
|
|
|
+const List = styled.div`
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff11;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-top: 20px;
|
|
|
+ border: 1px solid #ffffff44;
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-y: auto;
|
|
|
+`;
|
|
|
+
|
|
|
+const Row = styled.div<{ isLastItem?: boolean }>`
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ color: #ffffff55;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: ${props => props.isLastItem ? "" : "1px solid #ffffff44"};
|
|
|
+ > i {
|
|
|
+ font-size: 17px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 12px;
|
|
|
+ color: #ffffff44;
|
|
|
+ }
|
|
|
+`;
|
|
|
+
|
|
|
+const GitIcon = styled.img`
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-right: 10px;
|
|
|
+ filter: brightness(120%);
|
|
|
+ margin-left: 1px;
|
|
|
+`;
|
|
|
+
|
|
|
const ModalTitle = styled.div`
|
|
|
margin: 0px 0px 13px;
|
|
|
display: flex;
|
|
|
flex: 1;
|
|
|
- font-family: "Assistant";
|
|
|
+ font-family: Work Sans, sans-serif;
|
|
|
font-size: 18px;
|
|
|
color: #ffffff;
|
|
|
user-select: none;
|
|
|
@@ -114,6 +197,20 @@ const ModalTitle = styled.div`
|
|
|
position: relative;
|
|
|
white-space: nowrap;
|
|
|
text-overflow: ellipsis;
|
|
|
+
|
|
|
+ > i {
|
|
|
+ background: none;
|
|
|
+ border-radius: 3px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 18px;
|
|
|
+ margin-top: 1px;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 1px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #ffffffaa;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
`;
|
|
|
|
|
|
const Subtitle = styled.div`
|
jusrhee