| 1 | "use client"; |
| 2 | |
| 3 | import { useQuery } from |
| 4 | import { Fragment } |
| 5 | |
| 6 | import { Card, CardContent |
| 7 | import { |
| 8 | Item, |
| 9 | ItemContent, |
| 10 | ItemDescription, |
| 11 | ItemGroup, |
| 12 | ItemSeparator, |
| 13 | ItemTitle, |
| 14 | } from "@/components/ui/item"; |
| 15 | import { Skeleton } |
| 16 | import { apiClient, unwrap |
| 17 | import { useAuthenticate } |
| 18 | import { authClient } |
| 19 | import { cn, formatBytes |
| 20 | |
| 21 | type Limit |
| 22 | title: string |
| 23 | usedBytes: number |
| 24 | quotaBytes: number |
| 25 | counts: string |
| 26 | over: string |
| 27 | }; |
| 28 | |
| 29 | /** What an account stores against each of its quotas, what each one covers, and what is refused once it is full. */ |
| 30 | export function StorageSettings(props |
| 31 | /** An organization's slug; the signed-in user's own account when left out. */ |
| 32 | owner?: string |
| 33 | }) { |
| 34 | const { data: |
| 35 | const owner = |
| 36 | |
| 37 | const { data, |
| 38 | queryKey: ["storage", |
| 39 | enabled: Boolean(owner |
| 40 | queryFn: async () |
| 41 | const data = |
| 42 | apiClient.GET("/api/storage/{owner} |
| 43 | params: { path: { |
| 44 | }), |
| 45 | ); |
| 46 | return data; |
| 47 | }, |
| 48 | }); |
| 49 | |
| 50 | const limits: |
| 51 | ? [ |
| 52 | { |
| 53 | title: "Repositories", |
| 54 | usedBytes: data.usedBytes |
| 55 | quotaBytes: data.quotaBytes |
| 56 | counts: |
| 57 | "Pushed git data and the heads of pull requests merged into the account's repositories. Git LFS objects, release assets, attachments and forks count separately.", |
| 58 | over: "Pushes that add data are refused, and pull requests stop merging into the account's repositories. Pushes that only delete branches or tags still work.", |
| 59 | }, |
| 60 | { |
| 61 | title: "Git LFS", |
| 62 | usedBytes: data.lfs |
| 63 | quotaBytes: data.lfs |
| 64 | counts: |
| 65 | "Git LFS objects uploaded to repositories that are not forks.", |
| 66 | over: "New LFS uploads are refused, so a push carrying new LFS files fails. Objects already stored can still be downloaded.", |
| 67 | }, |
| 68 | // A person also pays for the files they attach to issues and comments, wherever they post them; an organization never uploads any. |
| 69 | props.owner |
| 70 | ? { |
| 71 | title: "Release assets", |
| 72 | usedBytes: data.asset |
| 73 | quotaBytes: data.asset |
| 74 | counts: |
| 75 | "Files attached to releases in repositories that are not forks.", |
| 76 | over: "New release asset uploads are refused. Releases themselves, and assets already uploaded, are unaffected.", |
| 77 | } |
| 78 | : { |
| 79 | title: "Release assets and attachments", |
| 80 | usedBytes: data.asset |
| 81 | quotaBytes: data.asset |
| 82 | counts: |
| 83 | "Files attached to releases in your repositories that are not forks, and files you attached to issues, pull requests and comments in any repository.", |
| 84 | over: "New release asset uploads and attachments are refused. Releases, comments and files already uploaded are unaffected.", |
| 85 | }, |
| 86 | { |
| 87 | title: "Forks", |
| 88 | usedBytes: data.fork |
| 89 | quotaBytes: data.fork |
| 90 | counts: |
| 91 | "Everything the account's forks hold, Git LFS objects and release assets included. A new fork counts the full size of the repository it copies.", |
| 92 | over: "New forks are refused, as are pushes, LFS uploads and release asset uploads that add data to forks.", |
| 93 | }, |
| 94 | ] |
| 95 | : []; |
| 96 | |
| 97 | return ( |
| 98 | <div> |
| 99 | <h2 className="mb-3 text-sm font-semibold |
| 100 | |
| 101 | <Card className=" |
| 102 | <CardContent className=" |
| 103 | <ItemGroup className=" |
| 104 | {error ? ( |
| 105 | <Item> |
| 106 | <ItemContent> |
| 107 | <ItemDescription>{error. |
| 108 | </ItemContent> |
| 109 | </Item> |
| 110 | ) : isPending ? |
| 111 | <LimitSkeleton /> |
| 112 | ) : ( |
| 113 | <> |
| 114 | {limits.map(( |
| 115 | <Fragment key={ |
| 116 | {index > 0 |
| 117 | <LimitRow limit={ |
| 118 | </Fragment> |
| 119 | ))} |
| 120 | <ItemSeparator className=" |
| 121 | <Item> |
| 122 | <ItemContent> |
| 123 | <div className="flex items-baseline justify-between gap-4 |
| 124 | <ItemTitle>Release asset size</ItemTitle |
| 125 | <span className="text-sm tabular-nums |
| 126 | {formatBytes(data.maxAssetBytes |
| 127 | </span> |
| 128 | </div> |
| 129 | <ItemDescription className=" |
| 130 | The largest single file a release can carry. A bigger file |
| 131 | is refused, whatever room the account has left. |
| 132 | </ItemDescription> |
| 133 | </ItemContent> |
| 134 | </Item> |
| 135 | </> |
| 136 | )} |
| 137 | </ItemGroup> |
| 138 | </CardContent> |
| 139 | </Card> |
| 140 | |
| 141 | <p className="mt-2 text-xs text-muted-foreground |
| 142 | Usage includes uploads still in progress. Deleting repositories or |
| 143 | release assets frees space, as does removing an attachment from every |
| 144 | comment that shows it, a day later; deleting branches does not, since |
| 145 | pushed data stays in the repository's history. |
| 146 | </p> |
| 147 | </div> |
| 148 | ); |
| 149 | } |
| 150 | |
| 151 | function LimitRow({ limit |
| 152 | const { usedBytes, |
| 153 | const percent = |
| 154 | quotaBytes === null |
| 155 | ? null |
| 156 | : quotaBytes === 0 |
| 157 | ? 100 |
| 158 | : (usedBytes / |
| 159 | const full = |
| 160 | |
| 161 | return ( |
| 162 | <Item> |
| 163 | <ItemContent className=" |
| 164 | <div className="flex items-baseline justify-between gap-4 |
| 165 | <ItemTitle>{limit. |
| 166 | <span |
| 167 | className={cn(" |
| 168 | > |
| 169 | {formatBytes(usedBytes)} |
| 170 | {quotaBytes === null |
| 171 | ? " · Unlimited" |
| 172 | : ` of ${formatBytes( |
| 173 | </span> |
| 174 | </div> |
| 175 | |
| 176 | {percent !== null |
| 177 | <div |
| 178 | role="progressbar" |
| 179 | aria-label={`${limit |
| 180 | aria-valuemin={0} |
| 181 | aria-valuemax={100} |
| 182 | aria-valuenow={Math.min |
| 183 | className="h-2 overflow-hidden rounded-full bg-muted" |
| 184 | > |
| 185 | <div |
| 186 | className={cn( |
| 187 | "h-full rounded-full bg-primary", |
| 188 | percent >= 90 && |
| 189 | full && "bg-destructive" |
| 190 | )} |
| 191 | style={{ width: |
| 192 | /> |
| 193 | </div> |
| 194 | )} |
| 195 | |
| 196 | <ItemDescription className=" |
| 197 | {limit.counts} |
| 198 | </ItemDescription> |
| 199 | {quotaBytes !== null |
| 200 | <ItemDescription |
| 201 | className={cn(" |
| 202 | > |
| 203 | {full ? "Full: |
| 204 | {limit.over} |
| 205 | </ItemDescription> |
| 206 | )} |
| 207 | </ItemContent> |
| 208 | </Item> |
| 209 | ); |
| 210 | } |
| 211 | |
| 212 | function LimitSkeleton() { |
| 213 | return ( |
| 214 | <Item> |
| 215 | <ItemContent className=" |
| 216 | <Skeleton className=" |
| 217 | <Skeleton className=" |
| 218 | <Skeleton className=" |
| 219 | </ItemContent> |
| 220 | </Item> |
| 221 | ); |
| 222 | } |