All files / publisher/pages/Builds RepoNotConnected.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Dispatch, SetStateAction } from "react";
import { useRecoilValue } from "recoil";
import { Strip } from "@canonical/react-components";
 
import RepoSelector from "./RepoSelector";
 
import { githubDataState } from "../../state/atoms";
 
import type { GithubData } from "../../types/";
 
function RepoNotConnected({
  setAutoTriggerBuild,
}: {
  setAutoTriggerBuild: Dispatch<SetStateAction<boolean>>;
}): React.JSX.Element {
  const githubData = useRecoilValue<GithubData | null>(githubDataState);
 
  return (
    <>
      {githubData !== null && githubData.github_user && (
        <div className="snapcraft-p-sticky js-sticky-bar">
          <div className="u-fixed-width">
            <ul className="p-inline-list u-no-margin--bottom">
              <li className="p-inline-list__item u-no-margin--right">
                Your GitHub account is connected.
              </li>
              <li className="p-inline-list__item">
                <a
                  href={`https://github.com/${githubData.github_user.login}`}
                  className="p-link--soft u-float-right"
                >
                  <img
                    src={githubData.github_user.avatarUrl}
                    alt={`@${githubData.github_user.login}`}
                    className="p-build__avatar"
                  />{" "}
                  {githubData.github_user.name}
                </a>
              </li>
            </ul>
          </div>
        </div>
      )}
      <div className="u-fixed-width">
        <hr className="u-no-margin--bottom" />
      </div>
      {githubData !== null && (
        <RepoSelector
          githubData={githubData}
          setAutoTriggerBuild={setAutoTriggerBuild}
        />
      )}
      <div className="u-fixed-width">
        <hr className="u-no-margin--bottom" />
      </div>
      <Strip shallow>
        <div className="u-fixed-width">
          <h4>If you can't find a repository …</h4>
          <p>
            Want to <strong>use a private repo</strong>? We're working hard on
            making these buildable.
          </p>
          <p>
            <strong>Don't have admin permission</strong>? Ask a repo admin to
            add it instead, and it will show up in your repo list too.
          </p>
          <p>
            <strong>Missing an organization</strong>?
          </p>
          <a
            className="p-button"
            href="https://github.com/settings/applications"
          >
            Review organization access
          </a>
        </div>
      </Strip>
    </>
  );
}
 
export default RepoNotConnected;