├── .editorconfig ├── .env.example ├── .github └── workflows │ ├── deploy.yml │ ├── lint.yml │ └── test.yml ├── .gitignore ├── .stylelintrc.json ├── LICENSE ├── Makefile ├── README.md ├── cypress.config.ts ├── jest.config.js ├── package-lock.json ├── package.json ├── public └── index.html ├── src ├── App.tsx ├── Router.tsx ├── assets │ ├── styles │ │ └── index.scss │ └── svgs │ │ ├── add.svg │ │ ├── check.svg │ │ ├── error.svg │ │ ├── git-pull-request.svg │ │ ├── issue-opened.svg │ │ ├── lock.svg │ │ ├── repo-forked.svg │ │ ├── star.svg │ │ ├── unlock.svg │ │ └── watchers.svg ├── devdash_config.ts ├── domain │ ├── DomainEvents.ts │ ├── FormEvent.ts │ ├── GitHubAccessTokenRepository.ts │ ├── GitHubRepository.ts │ ├── GitHubRepositoryPullRequest.ts │ ├── GitHubRepositoryPullRequestRepository.ts │ ├── GitHubRepositoryRepository.ts │ ├── RepositoryAlreadyExistsError.ts │ ├── RepositoryWidget.ts │ └── RepositoryWidgetRepository.ts ├── github_api_responses.ts ├── index.tsx ├── infrastructure │ ├── GitHubApiGitHubRepositoryPullRequestRepository.ts │ ├── GitHubApiGitHubRepositoryRepository.ts │ ├── GitHubApiResponse.ts │ ├── InMemoryGitHubRepositoryRepository.ts │ ├── LocalStorageGithubAccessTokenRepository.ts │ └── LocalStorageWidgetRepository.ts ├── react-app-env.d.ts └── sections │ ├── config │ ├── Config.module.scss │ ├── Config.tsx │ ├── ConfigFactory.tsx │ ├── GithubAccessTokenSearcher.ts │ └── useSaveConfig.ts │ ├── dashboard │ ├── Dashboard.module.scss │ ├── Dashboard.tsx │ ├── DashboardFactory.tsx │ ├── gitHubRepositoryWidget │ │ ├── GitHubRepositoryWidget.tsx │ │ └── useGitHubRepositories.ts │ └── repositoryWidget │ │ ├── AddRepositoryWidgetForm.module.scss │ │ ├── AddRepositoryWidgetForm.tsx │ │ ├── RepositoryWidget.module.scss │ │ ├── RepositoryWidgetContextProvider.tsx │ │ ├── RepositoryWidgetsSkeleton.tsx │ │ └── useAddRepositoryWidget.ts │ ├── gitHubRepositoryDetail │ ├── GitHubRepositoryDetail.module.scss │ ├── GitHubRepositoryDetail.tsx │ ├── GithubRepositoryDetailFactory.tsx │ ├── PullRequests.tsx │ ├── useGitHubRepositoryPullRequests.ts │ └── useGithubRepository.ts │ ├── layout │ ├── ErrorBoundary.tsx │ ├── Layout.module.scss │ ├── Layout.tsx │ ├── Loader.module.scss │ ├── Loader.tsx │ ├── TopBarProgressByLocation.tsx │ ├── brand.svg │ └── useInViewport.ts │ └── router │ └── RouterMiddleware.tsx ├── tests ├── GitHubRepositoryMother.ts ├── RepositoryWidgetMother.ts ├── e2e │ ├── support │ │ ├── commands.ts │ │ └── e2e.ts │ ├── tests │ │ └── RespositoryWidgetForm.spec.ts │ └── tsconfig.json ├── renderWithRouter.tsx ├── sections │ └── dashboard │ │ ├── AddRepositoryWidgetForm.test.tsx │ │ └── Dashboard.test.tsx ├── setupTests.ts └── svg.mock.js └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | max_line_length = 100 5 | indent_style = tab -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN=ghp_XXXYYYZZZ111222333XXXYYYZZZ1112 -------------------------------------------------------------------------------- /.github/workflows/deploy.yml: -------------------------------------------------------------------------------- 1 | name: "Deploy DevDash_ on GitHub Pages" 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | permissions: 9 | contents: read 10 | pages: write 11 | id-token: write 12 | 13 | jobs: 14 | build: 15 | runs-on: ubuntu-latest 16 | steps: 17 | - name: Checkout 18 | uses: actions/checkout@v3 19 | 20 | - uses: actions/setup-node@v3 21 | with: 22 | node-version: 16 23 | cache: 'npm' 24 | 25 | - name: Setup Pages 26 | id: pages 27 | uses: actions/configure-pages@v2 28 | 29 | - name: Install Dependencies 30 | run: npm install 31 | 32 | - name: Build 33 | run: npm run build 34 | 35 | - name: Upload artifact 36 | uses: actions/upload-pages-artifact@v1 37 | with: 38 | path: ./build 39 | 40 | deploy: 41 | environment: 42 | name: github-pages 43 | url: ${{ steps.deployment.outputs.page_url }} 44 | runs-on: ubuntu-latest 45 | needs: build 46 | steps: 47 | - name: Deploy to GitHub Pages 48 | id: deployment 49 | uses: actions/deploy-pages@v1 -------------------------------------------------------------------------------- /.github/workflows/lint.yml: -------------------------------------------------------------------------------- 1 | name: lint 2 | 3 | on: push 4 | 5 | jobs: 6 | lint: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/checkout@v3 11 | 12 | - uses: actions/setup-node@v3 13 | with: 14 | node-version: 16 15 | cache: 'npm' 16 | 17 | - name: Install Dependencies 18 | run: npm install 19 | 20 | - name: Lint 21 | run: npm run lint 22 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: test 2 | 3 | on: push 4 | 5 | jobs: 6 | unit: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/checkout@v3 11 | 12 | - uses: actions/setup-node@v3 13 | with: 14 | node-version: 16 15 | cache: 'npm' 16 | 17 | - name: Install Dependencies 18 | run: npm install 19 | 20 | - name: Test 21 | run: npx jest --config=jest.config.js 22 | e2e: 23 | runs-on: ubuntu-latest 24 | 25 | steps: 26 | - uses: actions/checkout@v3 27 | 28 | - uses: actions/setup-node@v3 29 | with: 30 | node-version: 16 31 | cache: 'npm' 32 | 33 | - name: Install Dependencies 34 | run: npm install 35 | 36 | - name: Cypress run 37 | uses: cypress-io/github-action@v4 38 | with: 39 | build: npm run build 40 | start: npm run start 41 | wait-on: "http://localhost:3000" 42 | env: 43 | REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN: ${{ secrets.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependency directories 2 | node_modules/ 3 | 4 | # Optional npm cache directory 5 | .npm 6 | 7 | # dotenv environment variables file 8 | .env 9 | 10 | # Build output 11 | build 12 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "overrides": [ 3 | { 4 | "files": ["**/*.scss"], 5 | "customSyntax": "postcss-scss" 6 | } 7 | ], 8 | "extends": ["stylelint-config-standard-scss", "stylelint-config-rational-order"], 9 | "rules": { 10 | "scss/dollar-variable-pattern": null, 11 | "scss/dollar-variable-empty-line-before": null, 12 | "selector-id-pattern": null, 13 | "selector-class-pattern": null 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU AFFERO GENERAL PUBLIC LICENSE 2 | Version 3, 19 November 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU Affero General Public License is a free, copyleft license for 11 | software and other kinds of works, specifically designed to ensure 12 | cooperation with the community in the case of network server software. 13 | 14 | The licenses for most software and other practical works are designed 15 | to take away your freedom to share and change the works. By contrast, 16 | our General Public Licenses are intended to guarantee your freedom to 17 | share and change all versions of a program--to make sure it remains free 18 | software for all its users. 19 | 20 | When we speak of free software, we are referring to freedom, not 21 | price. Our General Public Licenses are designed to make sure that you 22 | have the freedom to distribute copies of free software (and charge for 23 | them if you wish), that you receive source code or can get it if you 24 | want it, that you can change the software or use pieces of it in new 25 | free programs, and that you know you can do these things. 26 | 27 | Developers that use our General Public Licenses protect your rights 28 | with two steps: (1) assert copyright on the software, and (2) offer 29 | you this License which gives you legal permission to copy, distribute 30 | and/or modify the software. 31 | 32 | A secondary benefit of defending all users' freedom is that 33 | improvements made in alternate versions of the program, if they 34 | receive widespread use, become available for other developers to 35 | incorporate. Many developers of free software are heartened and 36 | encouraged by the resulting cooperation. However, in the case of 37 | software used on network servers, this result may fail to come about. 38 | The GNU General Public License permits making a modified version and 39 | letting the public access it on a server without ever releasing its 40 | source code to the public. 41 | 42 | The GNU Affero General Public License is designed specifically to 43 | ensure that, in such cases, the modified source code becomes available 44 | to the community. It requires the operator of a network server to 45 | provide the source code of the modified version running there to the 46 | users of that server. Therefore, public use of a modified version, on 47 | a publicly accessible server, gives the public access to the source 48 | code of the modified version. 49 | 50 | An older license, called the Affero General Public License and 51 | published by Affero, was designed to accomplish similar goals. This is 52 | a different license, not a version of the Affero GPL, but Affero has 53 | released a new version of the Affero GPL which permits relicensing under 54 | this license. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | TERMS AND CONDITIONS 60 | 61 | 0. Definitions. 62 | 63 | "This License" refers to version 3 of the GNU Affero General Public License. 64 | 65 | "Copyright" also means copyright-like laws that apply to other kinds of 66 | works, such as semiconductor masks. 67 | 68 | "The Program" refers to any copyrightable work licensed under this 69 | License. Each licensee is addressed as "you". "Licensees" and 70 | "recipients" may be individuals or organizations. 71 | 72 | To "modify" a work means to copy from or adapt all or part of the work 73 | in a fashion requiring copyright permission, other than the making of an 74 | exact copy. The resulting work is called a "modified version" of the 75 | earlier work or a work "based on" the earlier work. 76 | 77 | A "covered work" means either the unmodified Program or a work based 78 | on the Program. 79 | 80 | To "propagate" a work means to do anything with it that, without 81 | permission, would make you directly or secondarily liable for 82 | infringement under applicable copyright law, except executing it on a 83 | computer or modifying a private copy. Propagation includes copying, 84 | distribution (with or without modification), making available to the 85 | public, and in some countries other activities as well. 86 | 87 | To "convey" a work means any kind of propagation that enables other 88 | parties to make or receive copies. Mere interaction with a user through 89 | a computer network, with no transfer of a copy, is not conveying. 90 | 91 | An interactive user interface displays "Appropriate Legal Notices" 92 | to the extent that it includes a convenient and prominently visible 93 | feature that (1) displays an appropriate copyright notice, and (2) 94 | tells the user that there is no warranty for the work (except to the 95 | extent that warranties are provided), that licensees may convey the 96 | work under this License, and how to view a copy of this License. If 97 | the interface presents a list of user commands or options, such as a 98 | menu, a prominent item in the list meets this criterion. 99 | 100 | 1. Source Code. 101 | 102 | The "source code" for a work means the preferred form of the work 103 | for making modifications to it. "Object code" means any non-source 104 | form of a work. 105 | 106 | A "Standard Interface" means an interface that either is an official 107 | standard defined by a recognized standards body, or, in the case of 108 | interfaces specified for a particular programming language, one that 109 | is widely used among developers working in that language. 110 | 111 | The "System Libraries" of an executable work include anything, other 112 | than the work as a whole, that (a) is included in the normal form of 113 | packaging a Major Component, but which is not part of that Major 114 | Component, and (b) serves only to enable use of the work with that 115 | Major Component, or to implement a Standard Interface for which an 116 | implementation is available to the public in source code form. A 117 | "Major Component", in this context, means a major essential component 118 | (kernel, window system, and so on) of the specific operating system 119 | (if any) on which the executable work runs, or a compiler used to 120 | produce the work, or an object code interpreter used to run it. 121 | 122 | The "Corresponding Source" for a work in object code form means all 123 | the source code needed to generate, install, and (for an executable 124 | work) run the object code and to modify the work, including scripts to 125 | control those activities. However, it does not include the work's 126 | System Libraries, or general-purpose tools or generally available free 127 | programs which are used unmodified in performing those activities but 128 | which are not part of the work. For example, Corresponding Source 129 | includes interface definition files associated with source files for 130 | the work, and the source code for shared libraries and dynamically 131 | linked subprograms that the work is specifically designed to require, 132 | such as by intimate data communication or control flow between those 133 | subprograms and other parts of the work. 134 | 135 | The Corresponding Source need not include anything that users 136 | can regenerate automatically from other parts of the Corresponding 137 | Source. 138 | 139 | The Corresponding Source for a work in source code form is that 140 | same work. 141 | 142 | 2. Basic Permissions. 143 | 144 | All rights granted under this License are granted for the term of 145 | copyright on the Program, and are irrevocable provided the stated 146 | conditions are met. This License explicitly affirms your unlimited 147 | permission to run the unmodified Program. The output from running a 148 | covered work is covered by this License only if the output, given its 149 | content, constitutes a covered work. This License acknowledges your 150 | rights of fair use or other equivalent, as provided by copyright law. 151 | 152 | You may make, run and propagate covered works that you do not 153 | convey, without conditions so long as your license otherwise remains 154 | in force. You may convey covered works to others for the sole purpose 155 | of having them make modifications exclusively for you, or provide you 156 | with facilities for running those works, provided that you comply with 157 | the terms of this License in conveying all material for which you do 158 | not control copyright. Those thus making or running the covered works 159 | for you must do so exclusively on your behalf, under your direction 160 | and control, on terms that prohibit them from making any copies of 161 | your copyrighted material outside their relationship with you. 162 | 163 | Conveying under any other circumstances is permitted solely under 164 | the conditions stated below. Sublicensing is not allowed; section 10 165 | makes it unnecessary. 166 | 167 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 168 | 169 | No covered work shall be deemed part of an effective technological 170 | measure under any applicable law fulfilling obligations under article 171 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 172 | similar laws prohibiting or restricting circumvention of such 173 | measures. 174 | 175 | When you convey a covered work, you waive any legal power to forbid 176 | circumvention of technological measures to the extent such circumvention 177 | is effected by exercising rights under this License with respect to 178 | the covered work, and you disclaim any intention to limit operation or 179 | modification of the work as a means of enforcing, against the work's 180 | users, your or third parties' legal rights to forbid circumvention of 181 | technological measures. 182 | 183 | 4. Conveying Verbatim Copies. 184 | 185 | You may convey verbatim copies of the Program's source code as you 186 | receive it, in any medium, provided that you conspicuously and 187 | appropriately publish on each copy an appropriate copyright notice; 188 | keep intact all notices stating that this License and any 189 | non-permissive terms added in accord with section 7 apply to the code; 190 | keep intact all notices of the absence of any warranty; and give all 191 | recipients a copy of this License along with the Program. 192 | 193 | You may charge any price or no price for each copy that you convey, 194 | and you may offer support or warranty protection for a fee. 195 | 196 | 5. Conveying Modified Source Versions. 197 | 198 | You may convey a work based on the Program, or the modifications to 199 | produce it from the Program, in the form of source code under the 200 | terms of section 4, provided that you also meet all of these conditions: 201 | 202 | a) The work must carry prominent notices stating that you modified 203 | it, and giving a relevant date. 204 | 205 | b) The work must carry prominent notices stating that it is 206 | released under this License and any conditions added under section 207 | 7. This requirement modifies the requirement in section 4 to 208 | "keep intact all notices". 209 | 210 | c) You must license the entire work, as a whole, under this 211 | License to anyone who comes into possession of a copy. This 212 | License will therefore apply, along with any applicable section 7 213 | additional terms, to the whole of the work, and all its parts, 214 | regardless of how they are packaged. This License gives no 215 | permission to license the work in any other way, but it does not 216 | invalidate such permission if you have separately received it. 217 | 218 | d) If the work has interactive user interfaces, each must display 219 | Appropriate Legal Notices; however, if the Program has interactive 220 | interfaces that do not display Appropriate Legal Notices, your 221 | work need not make them do so. 222 | 223 | A compilation of a covered work with other separate and independent 224 | works, which are not by their nature extensions of the covered work, 225 | and which are not combined with it such as to form a larger program, 226 | in or on a volume of a storage or distribution medium, is called an 227 | "aggregate" if the compilation and its resulting copyright are not 228 | used to limit the access or legal rights of the compilation's users 229 | beyond what the individual works permit. Inclusion of a covered work 230 | in an aggregate does not cause this License to apply to the other 231 | parts of the aggregate. 232 | 233 | 6. Conveying Non-Source Forms. 234 | 235 | You may convey a covered work in object code form under the terms 236 | of sections 4 and 5, provided that you also convey the 237 | machine-readable Corresponding Source under the terms of this License, 238 | in one of these ways: 239 | 240 | a) Convey the object code in, or embodied in, a physical product 241 | (including a physical distribution medium), accompanied by the 242 | Corresponding Source fixed on a durable physical medium 243 | customarily used for software interchange. 244 | 245 | b) Convey the object code in, or embodied in, a physical product 246 | (including a physical distribution medium), accompanied by a 247 | written offer, valid for at least three years and valid for as 248 | long as you offer spare parts or customer support for that product 249 | model, to give anyone who possesses the object code either (1) a 250 | copy of the Corresponding Source for all the software in the 251 | product that is covered by this License, on a durable physical 252 | medium customarily used for software interchange, for a price no 253 | more than your reasonable cost of physically performing this 254 | conveying of source, or (2) access to copy the 255 | Corresponding Source from a network server at no charge. 256 | 257 | c) Convey individual copies of the object code with a copy of the 258 | written offer to provide the Corresponding Source. This 259 | alternative is allowed only occasionally and noncommercially, and 260 | only if you received the object code with such an offer, in accord 261 | with subsection 6b. 262 | 263 | d) Convey the object code by offering access from a designated 264 | place (gratis or for a charge), and offer equivalent access to the 265 | Corresponding Source in the same way through the same place at no 266 | further charge. You need not require recipients to copy the 267 | Corresponding Source along with the object code. If the place to 268 | copy the object code is a network server, the Corresponding Source 269 | may be on a different server (operated by you or a third party) 270 | that supports equivalent copying facilities, provided you maintain 271 | clear directions next to the object code saying where to find the 272 | Corresponding Source. Regardless of what server hosts the 273 | Corresponding Source, you remain obligated to ensure that it is 274 | available for as long as needed to satisfy these requirements. 275 | 276 | e) Convey the object code using peer-to-peer transmission, provided 277 | you inform other peers where the object code and Corresponding 278 | Source of the work are being offered to the general public at no 279 | charge under subsection 6d. 280 | 281 | A separable portion of the object code, whose source code is excluded 282 | from the Corresponding Source as a System Library, need not be 283 | included in conveying the object code work. 284 | 285 | A "User Product" is either (1) a "consumer product", which means any 286 | tangible personal property which is normally used for personal, family, 287 | or household purposes, or (2) anything designed or sold for incorporation 288 | into a dwelling. In determining whether a product is a consumer product, 289 | doubtful cases shall be resolved in favor of coverage. For a particular 290 | product received by a particular user, "normally used" refers to a 291 | typical or common use of that class of product, regardless of the status 292 | of the particular user or of the way in which the particular user 293 | actually uses, or expects or is expected to use, the product. A product 294 | is a consumer product regardless of whether the product has substantial 295 | commercial, industrial or non-consumer uses, unless such uses represent 296 | the only significant mode of use of the product. 297 | 298 | "Installation Information" for a User Product means any methods, 299 | procedures, authorization keys, or other information required to install 300 | and execute modified versions of a covered work in that User Product from 301 | a modified version of its Corresponding Source. The information must 302 | suffice to ensure that the continued functioning of the modified object 303 | code is in no case prevented or interfered with solely because 304 | modification has been made. 305 | 306 | If you convey an object code work under this section in, or with, or 307 | specifically for use in, a User Product, and the conveying occurs as 308 | part of a transaction in which the right of possession and use of the 309 | User Product is transferred to the recipient in perpetuity or for a 310 | fixed term (regardless of how the transaction is characterized), the 311 | Corresponding Source conveyed under this section must be accompanied 312 | by the Installation Information. But this requirement does not apply 313 | if neither you nor any third party retains the ability to install 314 | modified object code on the User Product (for example, the work has 315 | been installed in ROM). 316 | 317 | The requirement to provide Installation Information does not include a 318 | requirement to continue to provide support service, warranty, or updates 319 | for a work that has been modified or installed by the recipient, or for 320 | the User Product in which it has been modified or installed. Access to a 321 | network may be denied when the modification itself materially and 322 | adversely affects the operation of the network or violates the rules and 323 | protocols for communication across the network. 324 | 325 | Corresponding Source conveyed, and Installation Information provided, 326 | in accord with this section must be in a format that is publicly 327 | documented (and with an implementation available to the public in 328 | source code form), and must require no special password or key for 329 | unpacking, reading or copying. 330 | 331 | 7. Additional Terms. 332 | 333 | "Additional permissions" are terms that supplement the terms of this 334 | License by making exceptions from one or more of its conditions. 335 | Additional permissions that are applicable to the entire Program shall 336 | be treated as though they were included in this License, to the extent 337 | that they are valid under applicable law. If additional permissions 338 | apply only to part of the Program, that part may be used separately 339 | under those permissions, but the entire Program remains governed by 340 | this License without regard to the additional permissions. 341 | 342 | When you convey a copy of a covered work, you may at your option 343 | remove any additional permissions from that copy, or from any part of 344 | it. (Additional permissions may be written to require their own 345 | removal in certain cases when you modify the work.) You may place 346 | additional permissions on material, added by you to a covered work, 347 | for which you have or can give appropriate copyright permission. 348 | 349 | Notwithstanding any other provision of this License, for material you 350 | add to a covered work, you may (if authorized by the copyright holders of 351 | that material) supplement the terms of this License with terms: 352 | 353 | a) Disclaiming warranty or limiting liability differently from the 354 | terms of sections 15 and 16 of this License; or 355 | 356 | b) Requiring preservation of specified reasonable legal notices or 357 | author attributions in that material or in the Appropriate Legal 358 | Notices displayed by works containing it; or 359 | 360 | c) Prohibiting misrepresentation of the origin of that material, or 361 | requiring that modified versions of such material be marked in 362 | reasonable ways as different from the original version; or 363 | 364 | d) Limiting the use for publicity purposes of names of licensors or 365 | authors of the material; or 366 | 367 | e) Declining to grant rights under trademark law for use of some 368 | trade names, trademarks, or service marks; or 369 | 370 | f) Requiring indemnification of licensors and authors of that 371 | material by anyone who conveys the material (or modified versions of 372 | it) with contractual assumptions of liability to the recipient, for 373 | any liability that these contractual assumptions directly impose on 374 | those licensors and authors. 375 | 376 | All other non-permissive additional terms are considered "further 377 | restrictions" within the meaning of section 10. If the Program as you 378 | received it, or any part of it, contains a notice stating that it is 379 | governed by this License along with a term that is a further 380 | restriction, you may remove that term. If a license document contains 381 | a further restriction but permits relicensing or conveying under this 382 | License, you may add to a covered work material governed by the terms 383 | of that license document, provided that the further restriction does 384 | not survive such relicensing or conveying. 385 | 386 | If you add terms to a covered work in accord with this section, you 387 | must place, in the relevant source files, a statement of the 388 | additional terms that apply to those files, or a notice indicating 389 | where to find the applicable terms. 390 | 391 | Additional terms, permissive or non-permissive, may be stated in the 392 | form of a separately written license, or stated as exceptions; 393 | the above requirements apply either way. 394 | 395 | 8. Termination. 396 | 397 | You may not propagate or modify a covered work except as expressly 398 | provided under this License. Any attempt otherwise to propagate or 399 | modify it is void, and will automatically terminate your rights under 400 | this License (including any patent licenses granted under the third 401 | paragraph of section 11). 402 | 403 | However, if you cease all violation of this License, then your 404 | license from a particular copyright holder is reinstated (a) 405 | provisionally, unless and until the copyright holder explicitly and 406 | finally terminates your license, and (b) permanently, if the copyright 407 | holder fails to notify you of the violation by some reasonable means 408 | prior to 60 days after the cessation. 409 | 410 | Moreover, your license from a particular copyright holder is 411 | reinstated permanently if the copyright holder notifies you of the 412 | violation by some reasonable means, this is the first time you have 413 | received notice of violation of this License (for any work) from that 414 | copyright holder, and you cure the violation prior to 30 days after 415 | your receipt of the notice. 416 | 417 | Termination of your rights under this section does not terminate the 418 | licenses of parties who have received copies or rights from you under 419 | this License. If your rights have been terminated and not permanently 420 | reinstated, you do not qualify to receive new licenses for the same 421 | material under section 10. 422 | 423 | 9. Acceptance Not Required for Having Copies. 424 | 425 | You are not required to accept this License in order to receive or 426 | run a copy of the Program. Ancillary propagation of a covered work 427 | occurring solely as a consequence of using peer-to-peer transmission 428 | to receive a copy likewise does not require acceptance. However, 429 | nothing other than this License grants you permission to propagate or 430 | modify any covered work. These actions infringe copyright if you do 431 | not accept this License. Therefore, by modifying or propagating a 432 | covered work, you indicate your acceptance of this License to do so. 433 | 434 | 10. Automatic Licensing of Downstream Recipients. 435 | 436 | Each time you convey a covered work, the recipient automatically 437 | receives a license from the original licensors, to run, modify and 438 | propagate that work, subject to this License. You are not responsible 439 | for enforcing compliance by third parties with this License. 440 | 441 | An "entity transaction" is a transaction transferring control of an 442 | organization, or substantially all assets of one, or subdividing an 443 | organization, or merging organizations. If propagation of a covered 444 | work results from an entity transaction, each party to that 445 | transaction who receives a copy of the work also receives whatever 446 | licenses to the work the party's predecessor in interest had or could 447 | give under the previous paragraph, plus a right to possession of the 448 | Corresponding Source of the work from the predecessor in interest, if 449 | the predecessor has it or can get it with reasonable efforts. 450 | 451 | You may not impose any further restrictions on the exercise of the 452 | rights granted or affirmed under this License. For example, you may 453 | not impose a license fee, royalty, or other charge for exercise of 454 | rights granted under this License, and you may not initiate litigation 455 | (including a cross-claim or counterclaim in a lawsuit) alleging that 456 | any patent claim is infringed by making, using, selling, offering for 457 | sale, or importing the Program or any portion of it. 458 | 459 | 11. Patents. 460 | 461 | A "contributor" is a copyright holder who authorizes use under this 462 | License of the Program or a work on which the Program is based. The 463 | work thus licensed is called the contributor's "contributor version". 464 | 465 | A contributor's "essential patent claims" are all patent claims 466 | owned or controlled by the contributor, whether already acquired or 467 | hereafter acquired, that would be infringed by some manner, permitted 468 | by this License, of making, using, or selling its contributor version, 469 | but do not include claims that would be infringed only as a 470 | consequence of further modification of the contributor version. For 471 | purposes of this definition, "control" includes the right to grant 472 | patent sublicenses in a manner consistent with the requirements of 473 | this License. 474 | 475 | Each contributor grants you a non-exclusive, worldwide, royalty-free 476 | patent license under the contributor's essential patent claims, to 477 | make, use, sell, offer for sale, import and otherwise run, modify and 478 | propagate the contents of its contributor version. 479 | 480 | In the following three paragraphs, a "patent license" is any express 481 | agreement or commitment, however denominated, not to enforce a patent 482 | (such as an express permission to practice a patent or covenant not to 483 | sue for patent infringement). To "grant" such a patent license to a 484 | party means to make such an agreement or commitment not to enforce a 485 | patent against the party. 486 | 487 | If you convey a covered work, knowingly relying on a patent license, 488 | and the Corresponding Source of the work is not available for anyone 489 | to copy, free of charge and under the terms of this License, through a 490 | publicly available network server or other readily accessible means, 491 | then you must either (1) cause the Corresponding Source to be so 492 | available, or (2) arrange to deprive yourself of the benefit of the 493 | patent license for this particular work, or (3) arrange, in a manner 494 | consistent with the requirements of this License, to extend the patent 495 | license to downstream recipients. "Knowingly relying" means you have 496 | actual knowledge that, but for the patent license, your conveying the 497 | covered work in a country, or your recipient's use of the covered work 498 | in a country, would infringe one or more identifiable patents in that 499 | country that you have reason to believe are valid. 500 | 501 | If, pursuant to or in connection with a single transaction or 502 | arrangement, you convey, or propagate by procuring conveyance of, a 503 | covered work, and grant a patent license to some of the parties 504 | receiving the covered work authorizing them to use, propagate, modify 505 | or convey a specific copy of the covered work, then the patent license 506 | you grant is automatically extended to all recipients of the covered 507 | work and works based on it. 508 | 509 | A patent license is "discriminatory" if it does not include within 510 | the scope of its coverage, prohibits the exercise of, or is 511 | conditioned on the non-exercise of one or more of the rights that are 512 | specifically granted under this License. You may not convey a covered 513 | work if you are a party to an arrangement with a third party that is 514 | in the business of distributing software, under which you make payment 515 | to the third party based on the extent of your activity of conveying 516 | the work, and under which the third party grants, to any of the 517 | parties who would receive the covered work from you, a discriminatory 518 | patent license (a) in connection with copies of the covered work 519 | conveyed by you (or copies made from those copies), or (b) primarily 520 | for and in connection with specific products or compilations that 521 | contain the covered work, unless you entered into that arrangement, 522 | or that patent license was granted, prior to 28 March 2007. 523 | 524 | Nothing in this License shall be construed as excluding or limiting 525 | any implied license or other defenses to infringement that may 526 | otherwise be available to you under applicable patent law. 527 | 528 | 12. No Surrender of Others' Freedom. 529 | 530 | If conditions are imposed on you (whether by court order, agreement or 531 | otherwise) that contradict the conditions of this License, they do not 532 | excuse you from the conditions of this License. If you cannot convey a 533 | covered work so as to satisfy simultaneously your obligations under this 534 | License and any other pertinent obligations, then as a consequence you may 535 | not convey it at all. For example, if you agree to terms that obligate you 536 | to collect a royalty for further conveying from those to whom you convey 537 | the Program, the only way you could satisfy both those terms and this 538 | License would be to refrain entirely from conveying the Program. 539 | 540 | 13. Remote Network Interaction; Use with the GNU General Public License. 541 | 542 | Notwithstanding any other provision of this License, if you modify the 543 | Program, your modified version must prominently offer all users 544 | interacting with it remotely through a computer network (if your version 545 | supports such interaction) an opportunity to receive the Corresponding 546 | Source of your version by providing access to the Corresponding Source 547 | from a network server at no charge, through some standard or customary 548 | means of facilitating copying of software. This Corresponding Source 549 | shall include the Corresponding Source for any work covered by version 3 550 | of the GNU General Public License that is incorporated pursuant to the 551 | following paragraph. 552 | 553 | Notwithstanding any other provision of this License, you have 554 | permission to link or combine any covered work with a work licensed 555 | under version 3 of the GNU General Public License into a single 556 | combined work, and to convey the resulting work. The terms of this 557 | License will continue to apply to the part which is the covered work, 558 | but the work with which it is combined will remain governed by version 559 | 3 of the GNU General Public License. 560 | 561 | 14. Revised Versions of this License. 562 | 563 | The Free Software Foundation may publish revised and/or new versions of 564 | the GNU Affero General Public License from time to time. Such new versions 565 | will be similar in spirit to the present version, but may differ in detail to 566 | address new problems or concerns. 567 | 568 | Each version is given a distinguishing version number. If the 569 | Program specifies that a certain numbered version of the GNU Affero General 570 | Public License "or any later version" applies to it, you have the 571 | option of following the terms and conditions either of that numbered 572 | version or of any later version published by the Free Software 573 | Foundation. If the Program does not specify a version number of the 574 | GNU Affero General Public License, you may choose any version ever published 575 | by the Free Software Foundation. 576 | 577 | If the Program specifies that a proxy can decide which future 578 | versions of the GNU Affero General Public License can be used, that proxy's 579 | public statement of acceptance of a version permanently authorizes you 580 | to choose that version for the Program. 581 | 582 | Later license versions may give you additional or different 583 | permissions. However, no additional obligations are imposed on any 584 | author or copyright holder as a result of your choosing to follow a 585 | later version. 586 | 587 | 15. Disclaimer of Warranty. 588 | 589 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 590 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 591 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 592 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 593 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 594 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 595 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 596 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 597 | 598 | 16. Limitation of Liability. 599 | 600 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 601 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 602 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 603 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 604 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 605 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 606 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 607 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 608 | SUCH DAMAGES. 609 | 610 | 17. Interpretation of Sections 15 and 16. 611 | 612 | If the disclaimer of warranty and limitation of liability provided 613 | above cannot be given local legal effect according to their terms, 614 | reviewing courts shall apply local law that most closely approximates 615 | an absolute waiver of all civil liability in connection with the 616 | Program, unless a warranty or assumption of liability accompanies a 617 | copy of the Program in return for a fee. 618 | 619 | END OF TERMS AND CONDITIONS 620 | 621 | How to Apply These Terms to Your New Programs 622 | 623 | If you develop a new program, and you want it to be of the greatest 624 | possible use to the public, the best way to achieve this is to make it 625 | free software which everyone can redistribute and change under these terms. 626 | 627 | To do so, attach the following notices to the program. It is safest 628 | to attach them to the start of each source file to most effectively 629 | state the exclusion of warranty; and each file should have at least 630 | the "copyright" line and a pointer to where the full notice is found. 631 | 632 | 633 | Copyright (C) 634 | 635 | This program is free software: you can redistribute it and/or modify 636 | it under the terms of the GNU Affero General Public License as published 637 | by the Free Software Foundation, either version 3 of the License, or 638 | (at your option) any later version. 639 | 640 | This program is distributed in the hope that it will be useful, 641 | but WITHOUT ANY WARRANTY; without even the implied warranty of 642 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 643 | GNU Affero General Public License for more details. 644 | 645 | You should have received a copy of the GNU Affero General Public License 646 | along with this program. If not, see . 647 | 648 | Also add information on how to contact you by electronic and paper mail. 649 | 650 | If your software can interact with users remotely through a computer 651 | network, you should also make sure that it provides a way for users to 652 | get its source. For example, if your program is a web application, its 653 | interface could display a "Source" link that leads users to an archive 654 | of the code. There are many ways you could offer source, and different 655 | solutions will be better for different programs; see section 13 for the 656 | specific requirements. 657 | 658 | You should also get your employer (if you work as a programmer) or school, 659 | if any, to sign a "copyright disclaimer" for the program, if necessary. 660 | For more information on this, and how to apply and follow the GNU AGPL, see 661 | . -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | .PHONY: build 2 | build: deps compile 3 | 4 | .PHONY: deps 5 | deps: 6 | npm install 7 | 8 | .PHONY: compile 9 | compile: 10 | npm run build 11 | 12 | .PHONY: start 13 | start: 14 | npm start 15 | 16 | .PHONY: test 17 | test: 18 | npm test 19 | 20 | .PHONY: lint 21 | lint: 22 | npm run lint 23 | 24 | .PHONY: lint-fix 25 | lint-fix: 26 | npm run lint:fix -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Codely logo 4 | 5 |

6 | 7 |

8 | 🎛️ DevDash 9 |

10 | 11 |

12 | Build status 13 | Codely Open Source 14 | CodelyTV Courses 15 |

16 | 17 |

18 | Developer dashboard focused on learning React appling best practices. 19 |

20 | 21 |

22 | App created with the 🌱⚛️ Create React App Codely template 23 |
24 |
25 | Stars are welcome 😊 26 |

27 | 28 | ## 🚀 Run the app 29 | 30 | - `npm install`: Install dependencies 31 | - `cp .env.example .env`: Create the environment variables file based on the example template 32 | - `vim .env`: Specify your GitHub Personal access token ([how to get it](https://docs.github.com/en/enterprise-server@3.4/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token) -> [your tokens](https://github.com/settings/tokens) -> Enable `Repo.public_repo`) 33 | - `vim src/devdash_config.ts`: Set the repository URLs you want to show on your *DevDash_* 34 | - `npm start`: Run in dev mode on [localhost:3000](http://localhost:3000) 35 | - `npm run build`: Generate production build 36 | 37 | ## ✅ Testing 38 | 39 | ### Unit tests 40 | 41 | `npm run test`: Run unit tests with Jest and React Testing Library 42 | 43 | ### End-to-end tests 44 | 45 | - `npm start`: Run in dev mode on [localhost:3000](http://localhost:3000) 46 | - Run end-to-end tests with Cypress choosing one of the following options: 47 | - `npm run cy:open`: Open Cypress in dev mode 48 | - `npm run cy:run`: Execute Cypress in CLI 49 | 50 | ## 🔦 Linting 51 | 52 | - `npm run lint`: Run linter 53 | - `npm run lint:fix`: Fix lint issues 54 | 55 | ## 👌 Codely Code Quality Standards 56 | 57 | Publishing this package we are committing ourselves to the following code quality standards: 58 | 59 | - 🤝 Respect **Semantic Versioning**: No breaking changes in patch or minor versions 60 | - 🤏 No surprises in transitive dependencies: Use the **bare minimum dependencies** needed to meet the purpose 61 | - 🎯 **One specific purpose** to meet without having to carry a bunch of unnecessary other utilities 62 | - ✅ **Tests** as documentation and usage examples 63 | - 📖 **Well documented ReadMe** showing how to install and use 64 | - ⚖️ **License favoring Open Source** and collaboration 65 | 66 | ## 🔀 Related information 67 | 68 | This application was generated using the [🌱⚛️ Create React App Codely template](https://github.com/CodelyTV/cra-template-codely). Feel free to check it out and star the repo! 🌟😊🙌 69 | -------------------------------------------------------------------------------- /cypress.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "cypress"; 2 | 3 | export default defineConfig({ 4 | video: false, 5 | e2e: { 6 | baseUrl: "http://localhost:3000", 7 | specPattern: "tests/e2e/tests/**/*.spec.{js,jsx,ts,tsx}", 8 | screenshotOnRunFailure: false, 9 | video: false, 10 | viewportWidth: 1920, 11 | viewportHeight: 1080, 12 | supportFile: "tests/e2e/support/e2e.ts", 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | testEnvironment: "jsdom", 3 | setupFilesAfterEnv: ["/tests/setupTests.ts"], 4 | testMatch: ["/tests/sections/*/*.(test).(ts|tsx)"], 5 | testPathIgnorePatterns: ["/tests/e2e/"], 6 | transform: { 7 | "^.+\\.(js|jsx|ts|tsx)$": [ 8 | "@swc/jest", 9 | { 10 | sourceMaps: true, 11 | jsc: { 12 | parser: { 13 | syntax: "typescript", 14 | tsx: true, 15 | }, 16 | transform: { 17 | react: { 18 | runtime: "automatic", 19 | }, 20 | }, 21 | }, 22 | }, 23 | ], 24 | }, 25 | moduleNameMapper: { 26 | "\\.svg$": "/tests/svg.mock.js", 27 | "\\.(css|less|scss|sass)$": "identity-obj-proxy", 28 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": 29 | "jest-transform-stub", 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@codelytv/devdash", 3 | "version": "0.1.0", 4 | "private": true, 5 | "engine": { 6 | "node": "^16.0.0", 7 | "npm": "^8.0.0" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/CodelyTV/devdash" 12 | }, 13 | "author": "codelytv", 14 | "license": "GPL-3.0", 15 | "bugs": { 16 | "url": "https://github.com/CodelyTV/devdash/issues" 17 | }, 18 | "homepage": ".", 19 | "dependencies": { 20 | "react": "^18.2.0", 21 | "react-dom": "^18.2.0", 22 | "react-loading-skeleton": "^3.1.0", 23 | "react-router-dom": "^6.4.3", 24 | "react-scripts": "5.0.1", 25 | "react-topbar-progress-indicator": "^4.1.1" 26 | }, 27 | "scripts": { 28 | "start": "react-scripts start", 29 | "build": "react-scripts build", 30 | "test": "jest --watch --config=jest.config.js", 31 | "eject": "react-scripts eject", 32 | "cy:open": "cypress open", 33 | "cy:run": "cypress run", 34 | "lint": "eslint --ignore-path .gitignore . && stylelint **/*.scss", 35 | "lint:fix": "eslint --fix --ignore-path .gitignore . && stylelint --fix **/*.scss" 36 | }, 37 | "eslintConfig": { 38 | "extends": [ 39 | "react-app", 40 | "react-app/jest", 41 | "eslint-config-codely/typescript" 42 | ], 43 | "parserOptions": { 44 | "project": [ 45 | "./tsconfig.json" 46 | ] 47 | }, 48 | "rules": { 49 | "@typescript-eslint/no-floating-promises": 0, 50 | "react/jsx-key": "error" 51 | }, 52 | "settings": { 53 | "import/resolver": { 54 | "node": { 55 | "extensions": [ 56 | ".js", 57 | ".jsx", 58 | ".ts", 59 | ".tsx" 60 | ] 61 | } 62 | } 63 | }, 64 | "overrides": [ 65 | { 66 | "files": [ 67 | "**/tests/e2e/**/*.spec.ts" 68 | ], 69 | "rules": { 70 | "testing-library/await-async-query": 0, 71 | "@typescript-eslint/no-unsafe-member-access": 0, 72 | "@typescript-eslint/no-unsafe-call": 0, 73 | "testing-library/prefer-screen-queries": 0, 74 | "@typescript-eslint/no-unsafe-assignment": 0 75 | } 76 | } 77 | ] 78 | }, 79 | "browserslist": { 80 | "production": [ 81 | ">0.2%", 82 | "not dead", 83 | "not op_mini all" 84 | ], 85 | "development": [ 86 | "last 1 chrome version", 87 | "last 1 firefox version", 88 | "last 1 safari version" 89 | ] 90 | }, 91 | "devDependencies": { 92 | "@faker-js/faker": "^7.6.0", 93 | "@swc/core": "^1.3.9", 94 | "@swc/jest": "^0.2.23", 95 | "@testing-library/cypress": "^8.0.3", 96 | "@testing-library/jest-dom": "^5.16.5", 97 | "@testing-library/react": "^13.4.0", 98 | "@testing-library/user-event": "^13.5.0", 99 | "@types/jest": "^27.5.2", 100 | "@types/node": "^16.11.68", 101 | "@types/react": "^18.0.21", 102 | "@types/react-dom": "^18.0.6", 103 | "cypress": "^10.3.0", 104 | "eslint-config-codely": "^1.1.4", 105 | "identity-obj-proxy": "^3.0.0", 106 | "jest-mock-extended": "^3.0.1", 107 | "jest-transform-stub": "^2.0.0", 108 | "sass": "^1.55.0", 109 | "stylelint": "^14.14.0", 110 | "stylelint-config-rational-order": "^0.1.2", 111 | "stylelint-config-standard-scss": "^3.0.0", 112 | "stylelint-order": "^5.0.0", 113 | "typescript": "^4.8.4" 114 | } 115 | } 116 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 🌱⚛️ Create React App Codely template example 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import "react-loading-skeleton/dist/skeleton.css"; 2 | 3 | import { LocalStorageRepositoryWidgetRepository } from "./infrastructure/LocalStorageWidgetRepository"; 4 | import { Router } from "./Router"; 5 | import { RepositoryWidgetContextProvider } from "./sections/dashboard/repositoryWidget/RepositoryWidgetContextProvider"; 6 | 7 | const repository = new LocalStorageRepositoryWidgetRepository(); 8 | 9 | export function App() { 10 | return ( 11 | 12 | 13 | 14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/Router.tsx: -------------------------------------------------------------------------------- 1 | import { createBrowserRouter, RouterProvider } from "react-router-dom"; 2 | 3 | import { ConfigFactory } from "./sections/config/ConfigFactory"; 4 | import { DashboardFactory } from "./sections/dashboard/DashboardFactory"; 5 | import { GitHubRepositoryDetailFactory } from "./sections/gitHubRepositoryDetail/GithubRepositoryDetailFactory"; 6 | import { Layout } from "./sections/layout/Layout"; 7 | import { RouterMiddleware } from "./sections/router/RouterMiddleware"; 8 | 9 | const router = createBrowserRouter([ 10 | { 11 | path: "/", 12 | element: ( 13 | 14 | 15 | 16 | ), 17 | children: [ 18 | { 19 | path: "/", 20 | element: , 21 | }, 22 | { 23 | path: "/repository/:organization/:name", 24 | element: GitHubRepositoryDetailFactory.create(), 25 | }, 26 | { 27 | path: "/config", 28 | element: , 29 | }, 30 | ], 31 | }, 32 | ]); 33 | 34 | export function Router() { 35 | return ; 36 | } 37 | -------------------------------------------------------------------------------- /src/assets/styles/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: sans-serif; 4 | } 5 | -------------------------------------------------------------------------------- /src/assets/svgs/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svgs/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svgs/error.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svgs/git-pull-request.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svgs/issue-opened.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/svgs/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svgs/repo-forked.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svgs/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/svgs/unlock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/assets/svgs/watchers.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/devdash_config.ts: -------------------------------------------------------------------------------- 1 | export interface DevDashConfig { 2 | github_access_token: string; 3 | widgets: { 4 | id: string; 5 | repository_url: string; 6 | }[]; 7 | } 8 | 9 | export const config: DevDashConfig = { 10 | github_access_token: process.env.REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN as string, 11 | widgets: [ 12 | { 13 | id: "2565fa91-2ac4-4e4f-9111-6d27a598082d", 14 | repository_url: "https://github.com/CodelyTV/dotly", 15 | }, 16 | { 17 | id: "a66d5092-5ba6-4184-9931-cc485defe412", 18 | repository_url: "https://github.com/CodelyTV/eslint-plugin-hexagonal-architecture", 19 | }, 20 | { 21 | id: "7c7a6b71-76dc-42ce-a46b-1730fc758193", 22 | repository_url: "https://github.com/CodelyTV/refactoring-code-smells", 23 | }, 24 | ], 25 | }; 26 | -------------------------------------------------------------------------------- /src/domain/DomainEvents.ts: -------------------------------------------------------------------------------- 1 | export const enum DomainEvents { 2 | repositoryWidgetAdded = "repositoryWidgetAdded", 3 | } 4 | -------------------------------------------------------------------------------- /src/domain/FormEvent.ts: -------------------------------------------------------------------------------- 1 | export type FormEvent = React.FormEvent & { 2 | target: { elements: { [key in keyof T]: { value: T[key] } } }; 3 | }; 4 | -------------------------------------------------------------------------------- /src/domain/GitHubAccessTokenRepository.ts: -------------------------------------------------------------------------------- 1 | export interface GitHubAccessTokenRepository { 2 | search(): string; 3 | save(token: string): void; 4 | } 5 | -------------------------------------------------------------------------------- /src/domain/GitHubRepository.ts: -------------------------------------------------------------------------------- 1 | export interface RepositoryId { 2 | organization: string; 3 | name: string; 4 | } 5 | 6 | export interface WorkFlowRunStatus { 7 | id: number; 8 | name: string; 9 | title: string; 10 | url: string; 11 | createdAt: Date; 12 | status: string; 13 | conclusion: string; 14 | } 15 | export interface GitHubRepository { 16 | id: RepositoryId; 17 | url: string; 18 | description: string; 19 | private: boolean; 20 | updatedAt: Date; 21 | hasWorkflows: boolean; 22 | isLastWorkflowSuccess: boolean; 23 | stars: number; 24 | watchers: number; 25 | forks: number; 26 | issues: number; 27 | pullRequests: number; 28 | workflowRunsStatus: WorkFlowRunStatus[]; 29 | } 30 | -------------------------------------------------------------------------------- /src/domain/GitHubRepositoryPullRequest.ts: -------------------------------------------------------------------------------- 1 | export interface GitHubRepositoryPullRequest { 2 | id: number; 3 | title: string; 4 | createdAt: Date; 5 | url: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/domain/GitHubRepositoryPullRequestRepository.ts: -------------------------------------------------------------------------------- 1 | import { RepositoryId } from "./GitHubRepository"; 2 | import { GitHubRepositoryPullRequest } from "./GitHubRepositoryPullRequest"; 3 | 4 | export interface GitHubRepositoryPullRequestRepository { 5 | search(repositoryId: RepositoryId): Promise; 6 | } 7 | -------------------------------------------------------------------------------- /src/domain/GitHubRepositoryRepository.ts: -------------------------------------------------------------------------------- 1 | import { GitHubRepository, RepositoryId } from "./GitHubRepository"; 2 | 3 | export interface GitHubRepositoryRepository { 4 | search(repositoryUrls: string[]): Promise; 5 | byId(repositoryId: RepositoryId): Promise; 6 | } 7 | -------------------------------------------------------------------------------- /src/domain/RepositoryAlreadyExistsError.ts: -------------------------------------------------------------------------------- 1 | export class RepositoryAlreadyExistsError extends Error { 2 | constructor(url: string) { 3 | super(`The repository with url ${url} already exists`); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/domain/RepositoryWidget.ts: -------------------------------------------------------------------------------- 1 | export interface RepositoryWidget { 2 | id: string; 3 | repositoryUrl: string; 4 | } 5 | -------------------------------------------------------------------------------- /src/domain/RepositoryWidgetRepository.ts: -------------------------------------------------------------------------------- 1 | import { RepositoryAlreadyExistsError } from "./RepositoryAlreadyExistsError"; 2 | import { RepositoryWidget } from "./RepositoryWidget"; 3 | 4 | export interface RepositoryWidgetRepository { 5 | search(): Promise; 6 | save(widget: RepositoryWidget): Promise; 7 | } 8 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import "./assets/styles/index.scss"; 2 | 3 | import React from "react"; 4 | import ReactDOM from "react-dom/client"; 5 | 6 | import { App } from "./App"; 7 | 8 | const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /src/infrastructure/GitHubApiGitHubRepositoryPullRequestRepository.ts: -------------------------------------------------------------------------------- 1 | import { RepositoryId } from "../domain/GitHubRepository"; 2 | import { GitHubRepositoryPullRequest } from "../domain/GitHubRepositoryPullRequest"; 3 | import { GitHubRepositoryPullRequestRepository } from "../domain/GitHubRepositoryPullRequestRepository"; 4 | import { PullRequest } from "./GitHubApiResponse"; 5 | 6 | export class GitHubApiGitHubRepositoryPullRequestRepository 7 | implements GitHubRepositoryPullRequestRepository 8 | { 9 | private readonly endpoints = "https://api.github.com/repos/$organization/$name/pulls"; 10 | 11 | constructor(private readonly personalAccessToken: string) {} 12 | 13 | async search(repositoryId: RepositoryId): Promise { 14 | const url = this.endpoints 15 | .replace("$organization", repositoryId.organization) 16 | .replace("$name", repositoryId.name); 17 | 18 | return fetch(url, { headers: { Authorization: `Bearer ${this.personalAccessToken}` } }) 19 | .then((response) => response.json()) 20 | .then((response) => { 21 | return response.map((pr) => ({ 22 | id: pr.id, 23 | title: pr.title, 24 | url: pr.html_url, 25 | createdAt: new Date(pr.created_at), 26 | })); 27 | }); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/infrastructure/GitHubApiGitHubRepositoryRepository.ts: -------------------------------------------------------------------------------- 1 | import { GitHubRepository, RepositoryId } from "../domain/GitHubRepository"; 2 | import { GitHubRepositoryRepository } from "../domain/GitHubRepositoryRepository"; 3 | import { CiStatus, PullRequest, RepositoryData } from "./GitHubApiResponse"; 4 | 5 | export class GitHubApiGitHubRepositoryRepository implements GitHubRepositoryRepository { 6 | private readonly endpoints = [ 7 | "https://api.github.com/repos/$organization/$name", 8 | "https://api.github.com/repos/$organization/$name/pulls", 9 | "https://api.github.com/repos/$organization/$name/actions/runs?page=1&per_page=10", 10 | ]; 11 | 12 | constructor(private readonly personalAccessToken: string) {} 13 | 14 | async search(repositoryUrls: string[]): Promise { 15 | const responsePromises = repositoryUrls 16 | .map((url) => this.urlToId(url)) 17 | .map((id) => this.searchBy(id)); 18 | 19 | return Promise.all(responsePromises); 20 | } 21 | 22 | async byId(repositoryId: RepositoryId): Promise { 23 | return this.searchBy(repositoryId); 24 | } 25 | 26 | private async searchBy(repositoryId: RepositoryId): Promise { 27 | const repositoryRequests = this.endpoints 28 | .map((endpoint) => endpoint.replace("$organization", repositoryId.organization)) 29 | .map((endpoint) => endpoint.replace("$name", repositoryId.name)) 30 | .map((url) => 31 | fetch(url, { 32 | headers: { Authorization: `Bearer ${this.personalAccessToken}` }, 33 | }) 34 | ); 35 | 36 | return Promise.all(repositoryRequests) 37 | .then((responses) => Promise.all(responses.map((response) => response.json()))) 38 | .then((responses) => { 39 | const [repositoryData, pullRequests, ciStatus] = responses as [ 40 | RepositoryData, 41 | PullRequest[], 42 | CiStatus 43 | ]; 44 | 45 | return { 46 | id: { 47 | name: repositoryData.name, 48 | organization: repositoryData.organization.login, 49 | }, 50 | url: repositoryData.html_url, 51 | description: repositoryData.description, 52 | private: repositoryData.private, 53 | updatedAt: new Date(repositoryData.updated_at), 54 | hasWorkflows: ciStatus.workflow_runs.length > 0, 55 | isLastWorkflowSuccess: 56 | ciStatus.workflow_runs.length > 0 && 57 | ciStatus.workflow_runs[0].status === "completed" && 58 | ciStatus.workflow_runs[0].conclusion === "sucess", 59 | stars: repositoryData.stargazers_count, 60 | watchers: repositoryData.watchers_count, 61 | forks: repositoryData.forks_count, 62 | issues: repositoryData.open_issues_count, 63 | pullRequests: pullRequests.length, 64 | workflowRunsStatus: ciStatus.workflow_runs.map((run) => ({ 65 | id: run.id, 66 | name: run.name, 67 | title: run.display_title, 68 | url: run.html_url, 69 | createdAt: new Date(run.created_at), 70 | status: run.status, 71 | conclusion: run.conclusion, 72 | })), 73 | }; 74 | }); 75 | } 76 | 77 | private urlToId(url: string): RepositoryId { 78 | const splitUrl = url.split("/"); 79 | 80 | return { 81 | name: splitUrl.pop() as string, 82 | organization: splitUrl.pop() as string, 83 | }; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/infrastructure/GitHubApiResponse.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | interface Permissions { 3 | admin: boolean; 4 | maintain: boolean; 5 | push: boolean; 6 | triage: boolean; 7 | pull: boolean; 8 | } 9 | 10 | interface Author { 11 | name: string; 12 | email: string; 13 | } 14 | 15 | interface Headcommit { 16 | id: string; 17 | tree_id: string; 18 | message: string; 19 | timestamp: string; 20 | author: Author; 21 | committer: Author; 22 | } 23 | 24 | interface License { 25 | key: string; 26 | name: string; 27 | spdx_id: string; 28 | url: string; 29 | node_id: string; 30 | } 31 | 32 | interface Owner { 33 | login: string; 34 | id: number; 35 | node_id: string; 36 | avatar_url: string; 37 | gravatar_id: string; 38 | url: string; 39 | html_url: string; 40 | followers_url: string; 41 | following_url: string; 42 | gists_url: string; 43 | starred_url: string; 44 | subscriptions_url: string; 45 | organizations_url: string; 46 | repos_url: string; 47 | events_url: string; 48 | received_events_url: string; 49 | type: string; 50 | site_admin: boolean; 51 | } 52 | 53 | interface Repository { 54 | id: number; 55 | node_id: string; 56 | name: string; 57 | full_name: string; 58 | private: boolean; 59 | owner: Owner; 60 | html_url: string; 61 | description: string; 62 | fork: boolean; 63 | url: string; 64 | forks_url: string; 65 | keys_url: string; 66 | collaborators_url: string; 67 | teams_url: string; 68 | hooks_url: string; 69 | issue_events_url: string; 70 | events_url: string; 71 | assignees_url: string; 72 | branches_url: string; 73 | tags_url: string; 74 | blobs_url: string; 75 | git_tags_url: string; 76 | git_refs_url: string; 77 | trees_url: string; 78 | statuses_url: string; 79 | languages_url: string; 80 | stargazers_url: string; 81 | contributors_url: string; 82 | subscribers_url: string; 83 | subscription_url: string; 84 | commits_url: string; 85 | git_commits_url: string; 86 | comments_url: string; 87 | issue_comment_url: string; 88 | contents_url: string; 89 | compare_url: string; 90 | merges_url: string; 91 | archive_url: string; 92 | downloads_url: string; 93 | issues_url: string; 94 | pulls_url: string; 95 | milestones_url: string; 96 | notifications_url: string; 97 | labels_url: string; 98 | releases_url: string; 99 | deployments_url: string; 100 | } 101 | 102 | interface Workflowrun { 103 | id: number; 104 | name: string; 105 | node_id: string; 106 | head_branch: string; 107 | head_sha: string; 108 | path: string; 109 | display_title: string; 110 | run_number: number; 111 | event: string; 112 | status: string; 113 | conclusion: string; 114 | workflow_id: number; 115 | check_suite_id: number; 116 | check_suite_node_id: string; 117 | url: string; 118 | html_url: string; 119 | pull_requests: any[]; 120 | created_at: string; 121 | updated_at: string; 122 | actor: Owner; 123 | run_attempt: number; 124 | referenced_workflows: any[]; 125 | run_started_at: string; 126 | triggering_actor: Owner; 127 | jobs_url: string; 128 | logs_url: string; 129 | check_suite_url: string; 130 | artifacts_url: string; 131 | cancel_url: string; 132 | rerun_url: string; 133 | previous_attempt_url?: any; 134 | workflow_url: string; 135 | head_commit: Headcommit; 136 | repository: Repository; 137 | head_repository: Repository; 138 | } 139 | 140 | export interface CiStatus { 141 | total_count: number; 142 | workflow_runs: Workflowrun[]; 143 | } 144 | 145 | interface Self { 146 | href: string; 147 | } 148 | 149 | interface Repo2 { 150 | id: number; 151 | node_id: string; 152 | name: string; 153 | full_name: string; 154 | private: boolean; 155 | owner: Owner; 156 | html_url: string; 157 | description: string; 158 | fork: boolean; 159 | url: string; 160 | forks_url: string; 161 | keys_url: string; 162 | collaborators_url: string; 163 | teams_url: string; 164 | hooks_url: string; 165 | issue_events_url: string; 166 | events_url: string; 167 | assignees_url: string; 168 | branches_url: string; 169 | tags_url: string; 170 | blobs_url: string; 171 | git_tags_url: string; 172 | git_refs_url: string; 173 | trees_url: string; 174 | statuses_url: string; 175 | languages_url: string; 176 | stargazers_url: string; 177 | contributors_url: string; 178 | subscribers_url: string; 179 | subscription_url: string; 180 | commits_url: string; 181 | git_commits_url: string; 182 | comments_url: string; 183 | issue_comment_url: string; 184 | contents_url: string; 185 | compare_url: string; 186 | merges_url: string; 187 | archive_url: string; 188 | downloads_url: string; 189 | issues_url: string; 190 | pulls_url: string; 191 | milestones_url: string; 192 | notifications_url: string; 193 | labels_url: string; 194 | releases_url: string; 195 | deployments_url: string; 196 | created_at: string; 197 | updated_at: string; 198 | pushed_at: string; 199 | git_url: string; 200 | ssh_url: string; 201 | clone_url: string; 202 | svn_url: string; 203 | homepage: string; 204 | size: number; 205 | stargazers_count: number; 206 | watchers_count: number; 207 | language: string; 208 | has_issues: boolean; 209 | has_projects: boolean; 210 | has_downloads: boolean; 211 | has_wiki: boolean; 212 | has_pages: boolean; 213 | forks_count: number; 214 | mirror_url?: any; 215 | archived: boolean; 216 | disabled: boolean; 217 | open_issues_count: number; 218 | license: License; 219 | allow_forking: boolean; 220 | is_template: boolean; 221 | web_commit_signoff_required: boolean; 222 | topics: string[]; 223 | visibility: string; 224 | forks: number; 225 | open_issues: number; 226 | watchers: number; 227 | default_branch: string; 228 | } 229 | 230 | interface Base { 231 | label: string; 232 | ref: string; 233 | sha: string; 234 | user: Owner; 235 | repo: Repo2; 236 | } 237 | interface Links { 238 | self: Self; 239 | html: Self; 240 | issue: Self; 241 | comments: Self; 242 | review_comments: Self; 243 | review_comment: Self; 244 | commits: Self; 245 | statuses: Self; 246 | } 247 | 248 | interface Repo { 249 | id: number; 250 | node_id: string; 251 | name: string; 252 | full_name: string; 253 | private: boolean; 254 | owner: Owner; 255 | html_url: string; 256 | description: string; 257 | fork: boolean; 258 | url: string; 259 | forks_url: string; 260 | keys_url: string; 261 | collaborators_url: string; 262 | teams_url: string; 263 | hooks_url: string; 264 | issue_events_url: string; 265 | events_url: string; 266 | assignees_url: string; 267 | branches_url: string; 268 | tags_url: string; 269 | blobs_url: string; 270 | git_tags_url: string; 271 | git_refs_url: string; 272 | trees_url: string; 273 | statuses_url: string; 274 | languages_url: string; 275 | stargazers_url: string; 276 | contributors_url: string; 277 | subscribers_url: string; 278 | subscription_url: string; 279 | commits_url: string; 280 | git_commits_url: string; 281 | comments_url: string; 282 | issue_comment_url: string; 283 | contents_url: string; 284 | compare_url: string; 285 | merges_url: string; 286 | archive_url: string; 287 | downloads_url: string; 288 | issues_url: string; 289 | pulls_url: string; 290 | milestones_url: string; 291 | notifications_url: string; 292 | labels_url: string; 293 | releases_url: string; 294 | deployments_url: string; 295 | created_at: string; 296 | updated_at: string; 297 | pushed_at: string; 298 | git_url: string; 299 | ssh_url: string; 300 | clone_url: string; 301 | svn_url: string; 302 | homepage: string; 303 | size: number; 304 | stargazers_count: number; 305 | watchers_count: number; 306 | language?: string; 307 | has_issues: boolean; 308 | has_projects: boolean; 309 | has_downloads: boolean; 310 | has_wiki: boolean; 311 | has_pages: boolean; 312 | forks_count: number; 313 | mirror_url?: any; 314 | archived: boolean; 315 | disabled: boolean; 316 | open_issues_count: number; 317 | license: License; 318 | allow_forking: boolean; 319 | is_template: boolean; 320 | web_commit_signoff_required: boolean; 321 | topics: any[]; 322 | visibility: string; 323 | forks: number; 324 | open_issues: number; 325 | watchers: number; 326 | default_branch: string; 327 | } 328 | 329 | interface Head { 330 | label: string; 331 | ref: string; 332 | sha: string; 333 | user: Owner; 334 | repo: Repo; 335 | } 336 | 337 | export interface PullRequest { 338 | url: string; 339 | id: number; 340 | node_id: string; 341 | html_url: string; 342 | diff_url: string; 343 | patch_url: string; 344 | issue_url: string; 345 | number: number; 346 | state: string; 347 | locked: boolean; 348 | title: string; 349 | user: Owner; 350 | body: string; 351 | created_at: string; 352 | updated_at: string; 353 | closed_at?: any; 354 | merged_at?: any; 355 | merge_commit_sha?: string; 356 | assignee?: any; 357 | assignees: any[]; 358 | requested_reviewers: any[]; 359 | requested_teams: any[]; 360 | labels: any[]; 361 | milestone?: any; 362 | draft: boolean; 363 | commits_url: string; 364 | review_comments_url: string; 365 | review_comment_url: string; 366 | comments_url: string; 367 | statuses_url: string; 368 | head: Head; 369 | base: Base; 370 | _links: Links; 371 | author_association: string; 372 | auto_merge?: any; 373 | active_lock_reason?: any; 374 | } 375 | 376 | export interface RepositoryData { 377 | id: number; 378 | node_id: string; 379 | name: string; 380 | full_name: string; 381 | private: boolean; 382 | owner: Owner; 383 | html_url: string; 384 | description: string; 385 | fork: boolean; 386 | url: string; 387 | forks_url: string; 388 | keys_url: string; 389 | collaborators_url: string; 390 | teams_url: string; 391 | hooks_url: string; 392 | issue_events_url: string; 393 | events_url: string; 394 | assignees_url: string; 395 | branches_url: string; 396 | tags_url: string; 397 | blobs_url: string; 398 | git_tags_url: string; 399 | git_refs_url: string; 400 | trees_url: string; 401 | statuses_url: string; 402 | languages_url: string; 403 | stargazers_url: string; 404 | contributors_url: string; 405 | subscribers_url: string; 406 | subscription_url: string; 407 | commits_url: string; 408 | git_commits_url: string; 409 | comments_url: string; 410 | issue_comment_url: string; 411 | contents_url: string; 412 | compare_url: string; 413 | merges_url: string; 414 | archive_url: string; 415 | downloads_url: string; 416 | issues_url: string; 417 | pulls_url: string; 418 | milestones_url: string; 419 | notifications_url: string; 420 | labels_url: string; 421 | releases_url: string; 422 | deployments_url: string; 423 | created_at: string; 424 | updated_at: string; 425 | pushed_at: string; 426 | git_url: string; 427 | ssh_url: string; 428 | clone_url: string; 429 | svn_url: string; 430 | homepage: string; 431 | size: number; 432 | stargazers_count: number; 433 | watchers_count: number; 434 | language: string; 435 | has_issues: boolean; 436 | has_projects: boolean; 437 | has_downloads: boolean; 438 | has_wiki: boolean; 439 | has_pages: boolean; 440 | forks_count: number; 441 | mirror_url?: any; 442 | archived: boolean; 443 | disabled: boolean; 444 | open_issues_count: number; 445 | license: License; 446 | allow_forking: boolean; 447 | is_template: boolean; 448 | web_commit_signoff_required: boolean; 449 | topics: string[]; 450 | visibility: string; 451 | forks: number; 452 | open_issues: number; 453 | watchers: number; 454 | default_branch: string; 455 | permissions: Permissions; 456 | temp_clone_token: string; 457 | organization: Owner; 458 | network_count: number; 459 | subscribers_count: number; 460 | } 461 | 462 | export interface GitHubApiResponses { 463 | repositoryData: RepositoryData; 464 | pullRequests: PullRequest[]; 465 | ciStatus: CiStatus; 466 | } 467 | -------------------------------------------------------------------------------- /src/infrastructure/InMemoryGitHubRepositoryRepository.ts: -------------------------------------------------------------------------------- 1 | import { GitHubRepository, RepositoryId } from "../domain/GitHubRepository"; 2 | import { GitHubRepositoryRepository } from "../domain/GitHubRepositoryRepository"; 3 | import { githubApiResponses } from "../github_api_responses"; 4 | 5 | export class InMemoryGitHubRepositoryRepository implements GitHubRepositoryRepository { 6 | async search(): Promise { 7 | return Promise.resolve( 8 | githubApiResponses.map(({ repositoryData, pullRequests, ciStatus }) => { 9 | return { 10 | id: { 11 | name: repositoryData.name, 12 | organization: repositoryData.organization.login, 13 | }, 14 | url: repositoryData.url, 15 | description: repositoryData.description, 16 | private: repositoryData.private, 17 | updatedAt: new Date(repositoryData.updated_at), 18 | hasWorkflows: ciStatus.workflow_runs.length > 0, 19 | isLastWorkflowSuccess: 20 | ciStatus.workflow_runs.length > 0 && 21 | ciStatus.workflow_runs[0].status === "completed" && 22 | ciStatus.workflow_runs[0].conclusion === "sucess", 23 | stars: repositoryData.stargazers_count, 24 | watchers: repositoryData.watchers_count, 25 | forks: repositoryData.forks_count, 26 | issues: repositoryData.open_issues_count, 27 | pullRequests: pullRequests.length, 28 | workflowRunsStatus: ciStatus.workflow_runs.map((run) => ({ 29 | id: run.id, 30 | name: run.name, 31 | title: run.display_title, 32 | url: run.html_url, 33 | createdAt: new Date(run.created_at), 34 | status: run.status, 35 | conclusion: run.conclusion, 36 | })), 37 | }; 38 | }) 39 | ); 40 | } 41 | 42 | async byId(repositoryId: RepositoryId): Promise { 43 | const repositories = await this.search(); 44 | 45 | return repositories.find( 46 | (repositories) => 47 | repositories.id.name === repositoryId.name && 48 | repositories.id.organization && 49 | repositoryId.organization 50 | ); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/infrastructure/LocalStorageGithubAccessTokenRepository.ts: -------------------------------------------------------------------------------- 1 | import { GitHubAccessTokenRepository } from "../domain/GitHubAccessTokenRepository"; 2 | 3 | export class LocalStorageGitHubAccessTokenRepository implements GitHubAccessTokenRepository { 4 | localStorageKey = "github_access_token"; 5 | 6 | search(): string { 7 | const token = localStorage.getItem(this.localStorageKey); 8 | 9 | return token ?? ""; 10 | } 11 | 12 | save(token: string): void { 13 | localStorage.setItem(this.localStorageKey, token); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/infrastructure/LocalStorageWidgetRepository.ts: -------------------------------------------------------------------------------- 1 | import { RepositoryWidget } from "../domain/RepositoryWidget"; 2 | import { RepositoryWidgetRepository } from "../domain/RepositoryWidgetRepository"; 3 | 4 | export class LocalStorageRepositoryWidgetRepository implements RepositoryWidgetRepository { 5 | localStorageKey = "repositoryWidgets"; 6 | 7 | async search(): Promise { 8 | const data = localStorage.getItem(this.localStorageKey); 9 | 10 | if (!data) { 11 | return Promise.resolve([]); 12 | } 13 | 14 | return Promise.resolve(JSON.parse(data) as RepositoryWidget[]); 15 | } 16 | 17 | async save(widget: RepositoryWidget): Promise { 18 | const currentRepositoryWidget = await this.search(); 19 | 20 | localStorage.setItem( 21 | this.localStorageKey, 22 | JSON.stringify(currentRepositoryWidget.concat(widget)) 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/sections/config/Config.module.scss: -------------------------------------------------------------------------------- 1 | .config { 2 | width: 80%; 3 | max-width: 500px; 4 | margin: 2rem auto; 5 | 6 | .form { 7 | label { 8 | display: block; 9 | margin-bottom: 0.5rem; 10 | font-weight: bold; 11 | font-size: 1rem; 12 | } 13 | 14 | div { 15 | margin-bottom: 1rem; 16 | } 17 | 18 | input[type="text"] { 19 | width: 100%; 20 | height: 1.5rem; 21 | } 22 | 23 | input[type="submit"] { 24 | margin-top: 1rem; 25 | padding: 0.5rem 1rem; 26 | color: #1a2233; 27 | font-weight: bold; 28 | font-size: 1rem; 29 | background-color: #3cff64; 30 | border: 1px solid transparent; 31 | border-radius: 2rem; 32 | } 33 | } 34 | 35 | .callout { 36 | padding: 1rem; 37 | font-weight: bold; 38 | background-color: #3cff64; 39 | border-radius: 0.25rem; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/sections/config/Config.tsx: -------------------------------------------------------------------------------- 1 | import { FormEvent } from "../../domain/FormEvent"; 2 | import { GitHubAccessTokenRepository } from "../../domain/GitHubAccessTokenRepository"; 3 | import styles from "./Config.module.scss"; 4 | import { useSaveConfig } from "./useSaveConfig"; 5 | 6 | type FormFields = { ghAccessToken: string }; 7 | 8 | export function Config({ repository }: { repository: GitHubAccessTokenRepository }) { 9 | const { save } = useSaveConfig(repository); 10 | 11 | const submitForm = async (ev: FormEvent) => { 12 | ev.preventDefault(); 13 | const { ghAccessToken } = ev.target.elements; 14 | save(ghAccessToken.value); 15 | 16 | window.location.href = "/"; 17 | }; 18 | 19 | return ( 20 |
21 |

Configuración

22 |

23 | ⚙️ Aquí puedes configurar tu GitHub Access Token para que DevDash_ obtenga los datos 24 | de los repositorios de Github. 25 |

26 |

27 | Puedes obtener más info sobre cómo obtener el token{" "} 28 | 33 | aquí 34 | 35 |

36 | 37 |
38 | 39 | 40 | 41 | 42 |
43 |
44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /src/sections/config/ConfigFactory.tsx: -------------------------------------------------------------------------------- 1 | import { LocalStorageGitHubAccessTokenRepository } from "../../infrastructure/LocalStorageGithubAccessTokenRepository"; 2 | import { Config } from "./Config"; 3 | 4 | const repository = new LocalStorageGitHubAccessTokenRepository(); 5 | 6 | export function ConfigFactory() { 7 | return ; 8 | } 9 | -------------------------------------------------------------------------------- /src/sections/config/GithubAccessTokenSearcher.ts: -------------------------------------------------------------------------------- 1 | import { config } from "../../devdash_config"; 2 | import { GitHubAccessTokenRepository } from "../../domain/GitHubAccessTokenRepository"; 3 | 4 | export class GitHubAccessTokenSearcher { 5 | constructor(private readonly repository: GitHubAccessTokenRepository) {} 6 | 7 | search(): string { 8 | const token = this.repository.search(); 9 | 10 | return token || config.github_access_token; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/sections/config/useSaveConfig.ts: -------------------------------------------------------------------------------- 1 | import { GitHubAccessTokenRepository } from "../../domain/GitHubAccessTokenRepository"; 2 | 3 | export function useSaveConfig(repository: GitHubAccessTokenRepository): { 4 | save: (token: string) => void; 5 | } { 6 | function save(token: string): void { 7 | repository.save(token); 8 | } 9 | 10 | return { save }; 11 | } 12 | -------------------------------------------------------------------------------- /src/sections/dashboard/Dashboard.module.scss: -------------------------------------------------------------------------------- 1 | .empty { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | height: calc(100vh - var(--header-height)); 6 | font-size: 1.5rem; 7 | } 8 | 9 | .container { 10 | display: grid; 11 | grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); 12 | gap: 1rem; 13 | max-width: 1200px; 14 | margin: 0 auto; 15 | padding: 1rem; 16 | } 17 | -------------------------------------------------------------------------------- /src/sections/dashboard/Dashboard.tsx: -------------------------------------------------------------------------------- 1 | import { useMemo } from "react"; 2 | 3 | import { GitHubRepositoryRepository } from "../../domain/GitHubRepositoryRepository"; 4 | import { RepositoryWidget } from "../../domain/RepositoryWidget"; 5 | import { RepositoryWidgetRepository } from "../../domain/RepositoryWidgetRepository"; 6 | import styles from "./Dashboard.module.scss"; 7 | import { GitHubRepositoryWidget } from "./gitHubRepositoryWidget/GitHubRepositoryWidget"; 8 | import { useGitHubRepositories } from "./gitHubRepositoryWidget/useGitHubRepositories"; 9 | import { AddRepositoryWidgetForm } from "./repositoryWidget/AddRepositoryWidgetForm"; 10 | import { RepositoryWidgetsSkeleton } from "./repositoryWidget/RepositoryWidgetsSkeleton"; 11 | 12 | export function Dashboard({ 13 | gitHubRepositoryRepository, 14 | repositoryWidgetRepository, 15 | repositoryWidgets, 16 | }: { 17 | gitHubRepositoryRepository: GitHubRepositoryRepository; 18 | repositoryWidgetRepository: RepositoryWidgetRepository; 19 | repositoryWidgets: RepositoryWidget[]; 20 | }) { 21 | const gitHubRepositoryUrls = useMemo(() => { 22 | return repositoryWidgets.map((widget) => widget.repositoryUrl); 23 | }, [repositoryWidgets]); 24 | 25 | const { gitHubRepositories, isLoading } = useGitHubRepositories( 26 | gitHubRepositoryRepository, 27 | gitHubRepositoryUrls 28 | ); 29 | 30 | return ( 31 | <> 32 |
33 | {isLoading ? ( 34 | 35 | ) : ( 36 | gitHubRepositories.map((repository) => ( 37 | 41 | )) 42 | )} 43 | 44 |
45 | 46 | {!isLoading && gitHubRepositories.length === 0 && ( 47 |
48 | No hay widgets configurados. 49 |
50 | )} 51 | 52 | ); 53 | } 54 | -------------------------------------------------------------------------------- /src/sections/dashboard/DashboardFactory.tsx: -------------------------------------------------------------------------------- 1 | import { GitHubApiGitHubRepositoryRepository } from "../../infrastructure/GitHubApiGitHubRepositoryRepository"; 2 | import { LocalStorageGitHubAccessTokenRepository } from "../../infrastructure/LocalStorageGithubAccessTokenRepository"; 3 | import { LocalStorageRepositoryWidgetRepository } from "../../infrastructure/LocalStorageWidgetRepository"; 4 | import { GitHubAccessTokenSearcher } from "../config/GithubAccessTokenSearcher"; 5 | import { Dashboard } from "./Dashboard"; 6 | import { useRepositoryWidgetContext } from "./repositoryWidget/RepositoryWidgetContextProvider"; 7 | 8 | const ghAccessTokenRepository = new LocalStorageGitHubAccessTokenRepository(); 9 | const ghAccessTokenSearcher = new GitHubAccessTokenSearcher(ghAccessTokenRepository); 10 | const gitHubRepositoryRepository = new GitHubApiGitHubRepositoryRepository( 11 | ghAccessTokenSearcher.search() 12 | ); 13 | const repositoryWidgetRepository = new LocalStorageRepositoryWidgetRepository(); 14 | 15 | export function DashboardFactory() { 16 | const { repositoryWidgets } = useRepositoryWidgetContext(); 17 | 18 | return ( 19 | 24 | ); 25 | } 26 | -------------------------------------------------------------------------------- /src/sections/dashboard/gitHubRepositoryWidget/GitHubRepositoryWidget.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | import { ReactComponent as Check } from "../../../assets/svgs/check.svg"; 4 | import { ReactComponent as Error } from "../../../assets/svgs/error.svg"; 5 | import { ReactComponent as PullRequests } from "../../../assets/svgs/git-pull-request.svg"; 6 | import { ReactComponent as IssueOpened } from "../../../assets/svgs/issue-opened.svg"; 7 | import { ReactComponent as Lock } from "../../../assets/svgs/lock.svg"; 8 | import { ReactComponent as Forks } from "../../../assets/svgs/repo-forked.svg"; 9 | import { ReactComponent as Start } from "../../../assets/svgs/star.svg"; 10 | import { ReactComponent as Unlock } from "../../../assets/svgs/unlock.svg"; 11 | import { ReactComponent as Watchers } from "../../../assets/svgs/watchers.svg"; 12 | import { GitHubRepository } from "../../../domain/GitHubRepository"; 13 | import styles from "../repositoryWidget/RepositoryWidget.module.scss"; 14 | 15 | const isoToReadableDate = (lastUpdateDate: Date): string => { 16 | const currentDate = new Date(); 17 | const diffTime = currentDate.getTime() - lastUpdateDate.getTime(); 18 | const diffDays = Math.round(diffTime / (1000 * 3600 * 24)); 19 | 20 | if (diffDays === 0) { 21 | return "today"; 22 | } 23 | 24 | if (diffDays > 30) { 25 | return "more than a month ago"; 26 | } 27 | 28 | return `${diffDays} days ago`; 29 | }; 30 | 31 | export function GitHubRepositoryWidget({ repository }: { repository: GitHubRepository }) { 32 | return ( 33 |
34 |
35 |

36 | 37 | {repository.id.organization}/{repository.id.name} 38 | 39 |

40 | {repository.private ? : } 41 |
42 |
43 |
44 |

Last update {isoToReadableDate(repository.updatedAt)}

45 | {repository.hasWorkflows && ( 46 |
{repository.isLastWorkflowSuccess ? : }
47 | )} 48 |
49 |

{repository.description}

50 |
51 |
52 |
53 | 54 | {repository.stars} 55 |
56 |
57 | 58 | {repository.watchers} 59 |
60 |
61 | 62 | {repository.forks} 63 |
64 |
65 | 66 | {repository.issues} 67 |
68 |
69 | 70 | {repository.pullRequests} 71 |
72 |
73 |
74 | ); 75 | } 76 | -------------------------------------------------------------------------------- /src/sections/dashboard/gitHubRepositoryWidget/useGitHubRepositories.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | import { GitHubRepository } from "../../../domain/GitHubRepository"; 4 | import { GitHubRepositoryRepository } from "../../../domain/GitHubRepositoryRepository"; 5 | 6 | export function useGitHubRepositories( 7 | repository: GitHubRepositoryRepository, 8 | repositoryUrls: string[] 9 | ): { 10 | gitHubRepositories: GitHubRepository[]; 11 | isLoading: boolean; 12 | } { 13 | const [gitHubRepositories, setGitHubRepositories] = useState([]); 14 | const [isLoading, setIsLoading] = useState(true); 15 | 16 | useEffect(() => { 17 | setIsLoading(true); 18 | repository.search(repositoryUrls).then((repositoryData) => { 19 | setGitHubRepositories(repositoryData); 20 | setIsLoading(false); 21 | }); 22 | }, [repository, repositoryUrls]); 23 | 24 | return { gitHubRepositories, isLoading }; 25 | } 26 | -------------------------------------------------------------------------------- /src/sections/dashboard/repositoryWidget/AddRepositoryWidgetForm.module.scss: -------------------------------------------------------------------------------- 1 | .add_widget { 2 | min-height: 14.25rem; 3 | color: white; 4 | background-color: #4f5562; 5 | 6 | .container { 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100%; 11 | } 12 | 13 | .add_button { 14 | font-size: 1rem; 15 | background-color: transparent; 16 | border: 0; 17 | 18 | p { 19 | margin-top: 0.1rem; 20 | color: white; 21 | } 22 | } 23 | 24 | .form { 25 | width: 100%; 26 | padding: 1rem; 27 | 28 | label { 29 | display: block; 30 | margin-bottom: 0.5rem; 31 | font-size: 1rem; 32 | } 33 | 34 | div { 35 | margin-bottom: 1rem; 36 | } 37 | 38 | input[type="text"] { 39 | width: 100%; 40 | height: 1.5rem; 41 | } 42 | 43 | input[type="submit"] { 44 | padding: 0.5rem 1rem; 45 | color: #1a2233; 46 | font-weight: bold; 47 | font-size: 1rem; 48 | background-color: #3cff64; 49 | border: 1px solid transparent; 50 | border-radius: 2rem; 51 | } 52 | } 53 | 54 | .error { 55 | padding: 0.25rem; 56 | color: black; 57 | background-color: #f83d32; 58 | border-radius: 0.25rem; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/sections/dashboard/repositoryWidget/AddRepositoryWidgetForm.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import { ReactComponent as Add } from "../../../assets/svgs/add.svg"; 4 | import { FormEvent } from "../../../domain/FormEvent"; 5 | import { RepositoryWidgetRepository } from "../../../domain/RepositoryWidgetRepository"; 6 | import styles from "./AddRepositoryWidgetForm.module.scss"; 7 | import { useAddRepositoryWidget } from "./useAddRepositoryWidget"; 8 | 9 | type FormFields = { id: string; repositoryUrl: string }; 10 | 11 | export function AddRepositoryWidgetForm({ 12 | repository, 13 | }: { 14 | repository: RepositoryWidgetRepository; 15 | }) { 16 | const [isFormActive, setIsFormActive] = useState(false); 17 | const [hasAlreadyExistsError, setHasAlreadyExistsError] = useState(false); 18 | const { save } = useAddRepositoryWidget(repository); 19 | 20 | const submitForm = async (ev: FormEvent) => { 21 | ev.preventDefault(); 22 | const { id, repositoryUrl } = ev.target.elements; 23 | const error = await save({ id: id.value, repositoryUrl: repositoryUrl.value }); 24 | setHasAlreadyExistsError(!!error); 25 | setIsFormActive(false); 26 | }; 27 | 28 | return ( 29 |
30 |
31 | {!isFormActive && !hasAlreadyExistsError ? ( 32 | 36 | ) : ( 37 |
38 |
39 | 40 | 41 |
42 |
43 | 44 | 45 |
46 | 47 | {hasAlreadyExistsError && ( 48 |

49 | Repositorio duplicado 50 |

51 | )} 52 | 53 |
54 | 55 |
56 |
57 | )} 58 |
59 |
60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /src/sections/dashboard/repositoryWidget/RepositoryWidget.module.scss: -------------------------------------------------------------------------------- 1 | .widget { 2 | display: flex; 3 | flex-direction: column; 4 | color: white; 5 | background-color: #1a2233; 6 | filter: drop-shadow(10px 10px 20px rgb(0 0 0 / 25%)); 7 | 8 | &__header { 9 | display: flex; 10 | align-items: center; 11 | justify-content: space-between; 12 | padding: 0.5rem; 13 | background-color: #3cff64; 14 | } 15 | 16 | &__status { 17 | display: flex; 18 | align-items: center; 19 | justify-content: space-between; 20 | } 21 | 22 | &__title { 23 | overflow: hidden; 24 | color: #1a2233; 25 | font-weight: bold; 26 | font-size: 0.875rem; 27 | white-space: nowrap; 28 | text-overflow: ellipsis; 29 | 30 | a { 31 | color: inherit; 32 | text-decoration: none; 33 | } 34 | } 35 | 36 | &__body { 37 | flex: 1; 38 | padding: 0.5rem; 39 | } 40 | 41 | &__footer { 42 | display: flex; 43 | align-items: center; 44 | justify-content: space-around; 45 | padding: 0.5rem; 46 | } 47 | 48 | &__stat { 49 | display: flex; 50 | align-items: center; 51 | justify-content: center; 52 | 53 | span { 54 | margin-left: 0.25rem; 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/sections/dashboard/repositoryWidget/RepositoryWidgetContextProvider.tsx: -------------------------------------------------------------------------------- 1 | import React, { createContext, useContext, useEffect, useState } from "react"; 2 | 3 | import { config } from "../../../devdash_config"; 4 | import { DomainEvents } from "../../../domain/DomainEvents"; 5 | import { RepositoryWidget } from "../../../domain/RepositoryWidget"; 6 | import { RepositoryWidgetRepository } from "../../../domain/RepositoryWidgetRepository"; 7 | 8 | const RepositoryWidgetContext = createContext<{ repositoryWidgets: RepositoryWidget[] }>({ 9 | repositoryWidgets: [], 10 | }); 11 | 12 | export function RepositoryWidgetContextProvider({ 13 | children, 14 | repository, 15 | }: { 16 | children: React.ReactElement; 17 | repository: RepositoryWidgetRepository; 18 | }) { 19 | const [repositoryWidgets, setRepositoryWidgets] = useState([]); 20 | 21 | useEffect(() => { 22 | repository.search().then((repositoryWidgets) => { 23 | if (repositoryWidgets.length === 0) { 24 | setRepositoryWidgets( 25 | config.widgets.map((w) => ({ id: w.id, repositoryUrl: w.repository_url })) 26 | ); 27 | 28 | return; 29 | } 30 | 31 | setRepositoryWidgets(repositoryWidgets); 32 | }); 33 | }, [repository]); 34 | 35 | useEffect(() => { 36 | const reloadRepositoryWidgets = () => { 37 | repository.search().then(setRepositoryWidgets); 38 | }; 39 | 40 | document.addEventListener(DomainEvents.repositoryWidgetAdded, reloadRepositoryWidgets); 41 | 42 | return () => { 43 | document.removeEventListener(DomainEvents.repositoryWidgetAdded, reloadRepositoryWidgets); 44 | }; 45 | }, [repository]); 46 | 47 | return ( 48 | 49 | {children} 50 | 51 | ); 52 | } 53 | 54 | export const useRepositoryWidgetContext = () => useContext(RepositoryWidgetContext); 55 | -------------------------------------------------------------------------------- /src/sections/dashboard/repositoryWidget/RepositoryWidgetsSkeleton.tsx: -------------------------------------------------------------------------------- 1 | import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; 2 | 3 | import { ReactComponent as PullRequests } from "../../../assets/svgs/git-pull-request.svg"; 4 | import { ReactComponent as IssueOpened } from "../../../assets/svgs/issue-opened.svg"; 5 | import { ReactComponent as Forks } from "../../../assets/svgs/repo-forked.svg"; 6 | import { ReactComponent as Start } from "../../../assets/svgs/star.svg"; 7 | import { ReactComponent as Watchers } from "../../../assets/svgs/watchers.svg"; 8 | import styles from "./RepositoryWidget.module.scss"; 9 | 10 | function RepositoryWidgetSkeleton() { 11 | return ( 12 |
13 |
17 | 18 |
19 |
20 |

21 | Last update 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 | export function RepositoryWidgetsSkeleton({ numberOfWidgets }: { numberOfWidgets: number }) { 64 | return ( 65 | 66 | {[...new Array(numberOfWidgets)].map((_, i) => ( 67 | 68 | ))} 69 | 70 | ); 71 | } 72 | -------------------------------------------------------------------------------- /src/sections/dashboard/repositoryWidget/useAddRepositoryWidget.ts: -------------------------------------------------------------------------------- 1 | import { DomainEvents } from "../../../domain/DomainEvents"; 2 | import { RepositoryAlreadyExistsError } from "../../../domain/RepositoryAlreadyExistsError"; 3 | import { RepositoryWidget } from "../../../domain/RepositoryWidget"; 4 | import { RepositoryWidgetRepository } from "../../../domain/RepositoryWidgetRepository"; 5 | 6 | export function useAddRepositoryWidget(repository: RepositoryWidgetRepository): { 7 | save: (widget: RepositoryWidget) => Promise; 8 | } { 9 | async function save(widget: RepositoryWidget): Promise { 10 | const widgetRepositories = await repository.search(); 11 | 12 | if (widgetRepositories.some((w) => w.repositoryUrl === widget.repositoryUrl)) { 13 | return new RepositoryAlreadyExistsError(widget.repositoryUrl); 14 | } 15 | 16 | await repository.save(widget); 17 | document.dispatchEvent(new CustomEvent(DomainEvents.repositoryWidgetAdded)); 18 | } 19 | 20 | return { save }; 21 | } 22 | -------------------------------------------------------------------------------- /src/sections/gitHubRepositoryDetail/GitHubRepositoryDetail.module.scss: -------------------------------------------------------------------------------- 1 | .repository-detail { 2 | max-width: 80%; 3 | margin: 0.5rem auto; 4 | 5 | .header { 6 | display: flex; 7 | gap: 1rem; 8 | align-items: center; 9 | justify-content: space-between; 10 | padding: 0.5rem; 11 | background-color: #3cff64; 12 | 13 | a { 14 | color: #1a2233; 15 | } 16 | 17 | &__title { 18 | margin: 0.5rem; 19 | } 20 | } 21 | 22 | .build { 23 | display: flex; 24 | gap: 1rem; 25 | align-items: center; 26 | margin-bottom: 1rem; 27 | } 28 | 29 | .detail__table { 30 | width: 100%; 31 | margin-top: 1rem; 32 | text-align: center; 33 | border-collapse: collapse; 34 | 35 | thead tr th { 36 | border-bottom: 1px solid black; 37 | } 38 | 39 | tbody { 40 | a { 41 | color: inherit; 42 | } 43 | 44 | tr:nth-child(odd) { 45 | background-color: #d0d0d0; 46 | } 47 | 48 | tr td { 49 | padding: 0.5rem; 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/sections/gitHubRepositoryDetail/GitHubRepositoryDetail.tsx: -------------------------------------------------------------------------------- 1 | import { useMemo } from "react"; 2 | import { useParams } from "react-router-dom"; 3 | 4 | import { ReactComponent as Lock } from "../../assets/svgs/lock.svg"; 5 | import { ReactComponent as Unlock } from "../../assets/svgs/unlock.svg"; 6 | import { GitHubRepositoryPullRequestRepository } from "../../domain/GitHubRepositoryPullRequestRepository"; 7 | import { GitHubRepositoryRepository } from "../../domain/GitHubRepositoryRepository"; 8 | import { useInViewport } from "../layout/useInViewport"; 9 | import styles from "./GitHubRepositoryDetail.module.scss"; 10 | import { PullRequests } from "./PullRequests"; 11 | import { useGitHubRepository } from "./useGithubRepository"; 12 | 13 | export function GitHubRepositoryDetail({ 14 | gitHubRepositoryRepository, 15 | gitHubRepositoryPullRequestRepository, 16 | }: { 17 | gitHubRepositoryRepository: GitHubRepositoryRepository; 18 | gitHubRepositoryPullRequestRepository: GitHubRepositoryPullRequestRepository; 19 | }) { 20 | const { isInViewport, ref } = useInViewport(); 21 | const { organization, name } = useParams() as { organization: string; name: string }; 22 | 23 | const repositoryId = useMemo(() => ({ name, organization }), [name, organization]); 24 | const { repositoryData } = useGitHubRepository(gitHubRepositoryRepository, repositoryId); 25 | 26 | if (!repositoryData) { 27 | return <>; 28 | } 29 | 30 | return ( 31 |
32 |
33 | 34 |

35 | {repositoryData.id.organization}/{repositoryData.id.name} 36 |

37 | 38 | {repositoryData.private ? : } 39 |
40 | 41 |

{3 / 0}

42 |

{repositoryData.description}

43 | 44 |

Repository stats

45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
StarsWatchersForksIssuesPull Requests
{repositoryData.stars}{repositoryData.watchers}{repositoryData.forks}{repositoryData.issues}{repositoryData.pullRequests}
66 | 67 |

Workflow runs status

68 | 69 | {repositoryData.workflowRunsStatus.length > 0 ? ( 70 | <> 71 |

72 | ⏱️Last workflow run:{" "} 73 | {repositoryData.workflowRunsStatus[0].createdAt.toLocaleDateString("es-ES")} 74 |

75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | {repositoryData.workflowRunsStatus.map((run) => ( 87 | 88 | 89 | 94 | 95 | 96 | 97 | 98 | ))} 99 | 100 |
NameTitleDateStatusConclusion
{run.name} 90 | 91 | {run.title} 92 | 93 | {run.createdAt.toLocaleDateString("es-ES")}{run.status}{run.conclusion}
101 | 102 | ) : ( 103 |

There are no workflow runs

104 | )} 105 | 106 |
107 | {isInViewport && ( 108 | 112 | )} 113 |
114 |
115 | ); 116 | } 117 | -------------------------------------------------------------------------------- /src/sections/gitHubRepositoryDetail/GithubRepositoryDetailFactory.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import { GitHubApiGitHubRepositoryPullRequestRepository } from "../../infrastructure/GitHubApiGitHubRepositoryPullRequestRepository"; 4 | import { GitHubApiGitHubRepositoryRepository } from "../../infrastructure/GitHubApiGitHubRepositoryRepository"; 5 | import { LocalStorageGitHubAccessTokenRepository } from "../../infrastructure/LocalStorageGithubAccessTokenRepository"; 6 | import { GitHubAccessTokenSearcher } from "../config/GithubAccessTokenSearcher"; 7 | import { GitHubRepositoryDetail } from "./GitHubRepositoryDetail"; 8 | 9 | const ghAccessTokenRepository = new LocalStorageGitHubAccessTokenRepository(); 10 | const ghAccessTokenSearcher = new GitHubAccessTokenSearcher(ghAccessTokenRepository); 11 | 12 | const gitHubRepositoryRepository = new GitHubApiGitHubRepositoryRepository( 13 | ghAccessTokenSearcher.search() 14 | ); 15 | const gitHubRepositoryPullRequestRepository = new GitHubApiGitHubRepositoryPullRequestRepository( 16 | ghAccessTokenSearcher.search() 17 | ); 18 | 19 | export class GitHubRepositoryDetailFactory { 20 | static create(): React.ReactElement { 21 | return ( 22 | 26 | ); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/sections/gitHubRepositoryDetail/PullRequests.tsx: -------------------------------------------------------------------------------- 1 | import { RepositoryId } from "../../domain/GitHubRepository"; 2 | import { GitHubRepositoryPullRequestRepository } from "../../domain/GitHubRepositoryPullRequestRepository"; 3 | import { Loader } from "../layout/Loader"; 4 | import styles from "./GitHubRepositoryDetail.module.scss"; 5 | import { useGitHubRepositoryPullRequests } from "./useGitHubRepositoryPullRequests"; 6 | 7 | export function PullRequests({ 8 | repository, 9 | repositoryId, 10 | }: { 11 | repositoryId: RepositoryId; 12 | repository: GitHubRepositoryPullRequestRepository; 13 | }) { 14 | const { isLoading, pullRequests } = useGitHubRepositoryPullRequests(repository, repositoryId); 15 | 16 | return ( 17 | <> 18 |

Pull requests

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | {!isLoading && 28 | pullRequests.map((pullRequest) => ( 29 | 30 | 35 | 36 | 37 | ))} 38 | 39 |
TítuloFecha
31 | 32 | {pullRequest.title} 33 | 34 | {pullRequest.createdAt.toLocaleDateString("es-ES")}
40 | {isLoading && } 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /src/sections/gitHubRepositoryDetail/useGitHubRepositoryPullRequests.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | import { RepositoryId } from "../../domain/GitHubRepository"; 4 | import { GitHubRepositoryPullRequest } from "../../domain/GitHubRepositoryPullRequest"; 5 | import { GitHubRepositoryPullRequestRepository } from "../../domain/GitHubRepositoryPullRequestRepository"; 6 | 7 | export function useGitHubRepositoryPullRequests( 8 | repository: GitHubRepositoryPullRequestRepository, 9 | repositoryId: RepositoryId 10 | ): { isLoading: boolean; pullRequests: GitHubRepositoryPullRequest[] } { 11 | const [pullRequests, setPullRequests] = useState([]); 12 | const [isLoading, setIsLoading] = useState(true); 13 | 14 | useEffect(() => { 15 | setIsLoading(true); 16 | repository.search(repositoryId).then((pullRequests) => { 17 | setPullRequests(pullRequests); 18 | setIsLoading(false); 19 | }); 20 | }, [repository, repositoryId]); 21 | 22 | return { 23 | pullRequests, 24 | isLoading, 25 | }; 26 | } 27 | -------------------------------------------------------------------------------- /src/sections/gitHubRepositoryDetail/useGithubRepository.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | import { GitHubRepository, RepositoryId } from "../../domain/GitHubRepository"; 4 | import { GitHubRepositoryRepository } from "../../domain/GitHubRepositoryRepository"; 5 | 6 | export function useGitHubRepository( 7 | repository: GitHubRepositoryRepository, 8 | repositoryId: RepositoryId 9 | ): { 10 | repositoryData: GitHubRepository | undefined; 11 | } { 12 | const [repositoryData, setRepositoryData] = useState(); 13 | 14 | useEffect(() => { 15 | repository.byId(repositoryId).then((repositoryData) => { 16 | setRepositoryData(repositoryData); 17 | }); 18 | }, [repository, repositoryId]); 19 | 20 | return { repositoryData }; 21 | } 22 | -------------------------------------------------------------------------------- /src/sections/layout/ErrorBoundary.tsx: -------------------------------------------------------------------------------- 1 | import { Component, ErrorInfo, ReactNode } from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | export class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> { 5 | state = { 6 | hasError: false, 7 | }; 8 | 9 | public static getDerivedStateFromError(_: Error) { 10 | return { hasError: true }; 11 | } 12 | 13 | public componentDidCatch(error: Error, errorInfo: ErrorInfo) { 14 | // You can also log the error to an error reporting service 15 | console.error("Uncaught error:", error, errorInfo); 16 | } 17 | 18 | private resetError() { 19 | this.setState({ hasError: false }); 20 | } 21 | 22 | render() { 23 | if (this.state.hasError) { 24 | return ( 25 | <> 26 |

Something went wrong.

27 | 28 | Return to home 29 | 30 | 31 | ); 32 | } 33 | 34 | return this.props.children; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/sections/layout/Layout.module.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --header-height: 6.25rem; 3 | } 4 | 5 | .header { 6 | height: var(--header-height); 7 | background-color: #1a2233; 8 | 9 | &__container { 10 | display: flex; 11 | gap: 2rem; 12 | align-items: center; 13 | justify-content: space-between; 14 | max-width: 1200px; 15 | margin: 0 auto; 16 | padding: 1rem; 17 | 18 | .brand__container { 19 | display: flex; 20 | gap: 2rem; 21 | align-items: center; 22 | } 23 | 24 | & a { 25 | text-decoration: none; 26 | } 27 | } 28 | 29 | .app__brand { 30 | color: #3cff64; 31 | font-style: italic; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/sections/layout/Layout.tsx: -------------------------------------------------------------------------------- 1 | import { Link, Outlet } from "react-router-dom"; 2 | 3 | import { ReactComponent as Brand } from "./brand.svg"; 4 | import { ErrorBoundary } from "./ErrorBoundary"; 5 | import styles from "./Layout.module.scss"; 6 | import TopBarProgressByLocation from "./TopBarProgressByLocation"; 7 | 8 | export function Layout() { 9 | return ( 10 | <> 11 | 12 |
13 |
14 |
15 | 16 | 17 | 18 | 19 |

DevDash_

20 | 21 |
22 | 23 | 24 | ⚙️ 25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /src/sections/layout/Loader.module.scss: -------------------------------------------------------------------------------- 1 | // https://loading.io/css/ 2 | .loader__container { 3 | display: flex; 4 | justify-content: center; 5 | width: 100%; 6 | 7 | .lds-ellipsis { 8 | position: relative; 9 | display: inline-block; 10 | width: 80px; 11 | height: 80px; 12 | 13 | div { 14 | position: absolute; 15 | top: 33px; 16 | width: 13px; 17 | height: 13px; 18 | background: #1a2233; 19 | border-radius: 50%; 20 | animation-timing-function: cubic-bezier(0, 1, 1, 0); 21 | } 22 | 23 | div:nth-child(1) { 24 | left: 8px; 25 | animation: lds-ellipsis1 0.6s infinite; 26 | } 27 | 28 | div:nth-child(2) { 29 | left: 8px; 30 | animation: lds-ellipsis2 0.6s infinite; 31 | } 32 | 33 | div:nth-child(3) { 34 | left: 32px; 35 | animation: lds-ellipsis2 0.6s infinite; 36 | } 37 | 38 | div:nth-child(4) { 39 | left: 56px; 40 | animation: lds-ellipsis3 0.6s infinite; 41 | } 42 | 43 | @keyframes lds-ellipsis1 { 44 | 0% { 45 | transform: scale(0); 46 | } 47 | 48 | 100% { 49 | transform: scale(1); 50 | } 51 | } 52 | 53 | @keyframes lds-ellipsis3 { 54 | 0% { 55 | transform: scale(1); 56 | } 57 | 58 | 100% { 59 | transform: scale(0); 60 | } 61 | } 62 | 63 | @keyframes lds-ellipsis2 { 64 | 0% { 65 | transform: translate(0, 0); 66 | } 67 | 68 | 100% { 69 | transform: translate(24px, 0); 70 | } 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/sections/layout/Loader.tsx: -------------------------------------------------------------------------------- 1 | import styles from "./Loader.module.scss"; 2 | 3 | //https://loading.io/css/ 4 | export function Loader() { 5 | return ( 6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/sections/layout/TopBarProgressByLocation.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { useLocation } from "react-router-dom"; 3 | import TopBarProgress from "react-topbar-progress-indicator"; 4 | 5 | TopBarProgress.config({ 6 | barColors: { 7 | "0": "#fff", 8 | "1.0": "#3cff64", 9 | }, 10 | shadowBlur: 5, 11 | }); 12 | 13 | const TopBarProgressByLocation = () => { 14 | const [progress, setProgress] = useState(false); 15 | const [previousLocation, setPreviousLocation] = useState(""); 16 | const location = useLocation(); 17 | 18 | useEffect(() => { 19 | setPreviousLocation(location.pathname); 20 | setProgress(true); 21 | const hasClickedOnALinkToTheCurrentPage = location.pathname === previousLocation; 22 | if (hasClickedOnALinkToTheCurrentPage) { 23 | setPreviousLocation(""); 24 | } 25 | // eslint-disable-next-line react-hooks/exhaustive-deps 26 | }, [location]); 27 | 28 | useEffect(() => { 29 | setProgress(false); 30 | }, [previousLocation]); 31 | 32 | if (!progress) { 33 | return <>; 34 | } 35 | 36 | return ; 37 | }; 38 | 39 | export default TopBarProgressByLocation; 40 | -------------------------------------------------------------------------------- /src/sections/layout/brand.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/sections/layout/useInViewport.ts: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useState } from "react"; 2 | 3 | export function useInViewport(): { isInViewport: boolean; ref: React.RefCallback } { 4 | const [isInViewport, setIsInViewport] = useState(false); 5 | const [refElement, setRefElement] = useState(null); 6 | 7 | const setRef = useCallback((node: HTMLElement | null) => { 8 | if (node !== null) { 9 | setRefElement(node); 10 | } 11 | }, []); 12 | 13 | useEffect(() => { 14 | if (refElement && !isInViewport) { 15 | const observer = new IntersectionObserver( 16 | ([entry]) => entry.isIntersecting && setIsInViewport(true) 17 | ); 18 | observer.observe(refElement); 19 | 20 | return () => { 21 | observer.disconnect(); 22 | }; 23 | } 24 | }, [isInViewport, refElement]); 25 | 26 | return { isInViewport, ref: setRef }; 27 | } 28 | -------------------------------------------------------------------------------- /src/sections/router/RouterMiddleware.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | import { useNavigate } from "react-router-dom"; 3 | 4 | import { LocalStorageGitHubAccessTokenRepository } from "../../infrastructure/LocalStorageGithubAccessTokenRepository"; 5 | import { GitHubAccessTokenSearcher } from "../config/GithubAccessTokenSearcher"; 6 | 7 | const ghAccessTokenRepository = new LocalStorageGitHubAccessTokenRepository(); 8 | const ghAccessTokenSearcher = new GitHubAccessTokenSearcher(ghAccessTokenRepository); 9 | 10 | export function RouterMiddleware({ children }: { children: React.ReactElement }) { 11 | const navigate = useNavigate(); 12 | 13 | const ghAccessToken = ghAccessTokenSearcher.search(); 14 | 15 | useEffect(() => { 16 | if (!ghAccessToken) { 17 | navigate("/config"); 18 | } 19 | }, [ghAccessToken, navigate]); 20 | 21 | return <>{children}; 22 | } 23 | -------------------------------------------------------------------------------- /tests/GitHubRepositoryMother.ts: -------------------------------------------------------------------------------- 1 | import { faker } from "@faker-js/faker"; 2 | 3 | import { GitHubRepository } from "../src/domain/GitHubRepository"; 4 | 5 | export class GitHubRepositoryMother { 6 | static create(params?: Partial): GitHubRepository { 7 | const defaultParams: GitHubRepository = { 8 | id: { 9 | organization: faker.company.name(), 10 | name: faker.random.word(), 11 | }, 12 | description: faker.random.words(10), 13 | url: faker.internet.url(), 14 | private: faker.datatype.boolean(), 15 | forks: faker.datatype.number(), 16 | hasWorkflows: faker.datatype.boolean(), 17 | isLastWorkflowSuccess: faker.datatype.boolean(), 18 | stars: faker.datatype.number(), 19 | issues: faker.datatype.number(), 20 | pullRequests: faker.datatype.number(), 21 | updatedAt: faker.datatype.datetime(), 22 | watchers: faker.datatype.number(), 23 | workflowRunsStatus: [], 24 | ...params, 25 | }; 26 | 27 | return defaultParams; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /tests/RepositoryWidgetMother.ts: -------------------------------------------------------------------------------- 1 | import { faker } from "@faker-js/faker"; 2 | 3 | import { RepositoryWidget } from "../src/domain/RepositoryWidget"; 4 | 5 | export class RepositoryWidgetMother { 6 | static create(params?: Partial): RepositoryWidget { 7 | const defaultParams: RepositoryWidget = { 8 | id: faker.datatype.uuid(), 9 | repositoryUrl: faker.internet.url(), 10 | ...params, 11 | }; 12 | 13 | return defaultParams; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /tests/e2e/support/commands.ts: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 26 | 27 | import "@testing-library/cypress/add-commands"; 28 | -------------------------------------------------------------------------------- /tests/e2e/support/e2e.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import "./commands"; 18 | -------------------------------------------------------------------------------- /tests/e2e/tests/RespositoryWidgetForm.spec.ts: -------------------------------------------------------------------------------- 1 | import { RepositoryWidgetMother } from "../../RepositoryWidgetMother"; 2 | 3 | describe("Repository Widget Form", () => { 4 | it("Add new repository with id and url", () => { 5 | const newWidget = RepositoryWidgetMother.create({ 6 | repositoryUrl: "https://github.com/CodelyTV/DevDash", 7 | }); 8 | 9 | cy.visit("/"); 10 | 11 | cy.findByRole("button", { 12 | name: new RegExp("Añadir", "i"), 13 | }).click(); 14 | 15 | cy.findByLabelText(/Id/i).type(newWidget.id); 16 | cy.findByLabelText(/Url del repositorio/i).type(newWidget.repositoryUrl); 17 | 18 | cy.findByRole("button", { 19 | name: /Añadir/i, 20 | }).click(); 21 | 22 | const widget = cy.findByText("CodelyTV/DevDash"); 23 | 24 | widget.should("exist"); 25 | }); 26 | 27 | it("Show error when respository already exists in Dashboard", () => { 28 | const newWidget = RepositoryWidgetMother.create({ 29 | repositoryUrl: "https://github.com/CodelyTV/DevDash", 30 | }); 31 | 32 | cy.visit("/"); 33 | 34 | cy.findByRole("button", { 35 | name: new RegExp("Añadir", "i"), 36 | }).click(); 37 | 38 | cy.findByLabelText(/Id/i).type(newWidget.id); 39 | cy.findByLabelText(/Url del repositorio/i).type(newWidget.repositoryUrl); 40 | 41 | cy.findByRole("button", { 42 | name: /Añadir/i, 43 | }).click(); 44 | 45 | cy.findByRole("button", { 46 | name: new RegExp("Añadir", "i"), 47 | }).click(); 48 | 49 | cy.findByLabelText(/Id/i).type(newWidget.id); 50 | cy.findByLabelText(/Url del repositorio/i).type(newWidget.repositoryUrl); 51 | 52 | cy.findByRole("button", { 53 | name: /Añadir/i, 54 | }).click(); 55 | 56 | const errorMessage = cy.findByText("Repositorio duplicado"); 57 | 58 | errorMessage.should("exist"); 59 | }); 60 | }); 61 | -------------------------------------------------------------------------------- /tests/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "noEmit": true, 5 | "types": ["cypress", "@testing-library/cypress"], 6 | "isolatedModules": false 7 | }, 8 | "include": ["../../node_modules/cypress", "./**/*.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /tests/renderWithRouter.tsx: -------------------------------------------------------------------------------- 1 | import { render } from "@testing-library/react"; 2 | import { ReactElement } from "react"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | 5 | export const renderWithRouter = (ui: ReactElement, { route = "/" } = {}) => { 6 | window.history.pushState({}, "Test page", route); 7 | 8 | return { 9 | ...render(ui, { wrapper: BrowserRouter }), 10 | }; 11 | }; 12 | -------------------------------------------------------------------------------- /tests/sections/dashboard/AddRepositoryWidgetForm.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import userEvent from "@testing-library/user-event"; 3 | import { mock } from "jest-mock-extended"; 4 | 5 | import { RepositoryWidget } from "../../../src/domain/RepositoryWidget"; 6 | import { RepositoryWidgetRepository } from "../../../src/domain/RepositoryWidgetRepository"; 7 | import { AddRepositoryWidgetForm } from "../../../src/sections/dashboard/repositoryWidget/AddRepositoryWidgetForm"; 8 | 9 | const mockRepository = mock(); 10 | 11 | describe("AddWidgetForm", () => { 12 | it("show widget form when add button is clicked", async () => { 13 | render(); 14 | 15 | const button = await screen.findByRole("button", { 16 | name: new RegExp("Añadir", "i"), 17 | }); 18 | 19 | userEvent.click(button); 20 | 21 | const url = screen.getByLabelText(/Url del repositorio/i); 22 | 23 | expect(url).toBeInTheDocument(); 24 | }); 25 | 26 | it("save new widget when form is submitted", async () => { 27 | mockRepository.search.mockResolvedValue([]); 28 | 29 | const newWidget: RepositoryWidget = { 30 | id: "newWidgetId", 31 | repositoryUrl: "https://github.com/CodelyTV/DevDash", 32 | }; 33 | 34 | render(); 35 | 36 | const button = await screen.findByRole("button", { 37 | name: new RegExp("Añadir repositorio", "i"), 38 | }); 39 | userEvent.click(button); 40 | 41 | const id = screen.getByLabelText(/Id/i); 42 | userEvent.type(id, newWidget.id); 43 | 44 | const url = screen.getByLabelText(/Url del repositorio/i); 45 | userEvent.type(url, newWidget.repositoryUrl); 46 | 47 | const submitButton = await screen.findByRole("button", { 48 | name: /Añadir/i, 49 | }); 50 | userEvent.click(submitButton); 51 | 52 | const addAnotherRepositoryFormButton = await screen.findByRole("button", { 53 | name: new RegExp("Añadir repositorio", "i"), 54 | }); 55 | 56 | expect(addAnotherRepositoryFormButton).toBeInTheDocument(); 57 | expect(mockRepository.save).toHaveBeenCalledWith(newWidget); 58 | }); 59 | 60 | it("show error when respository already exists in Dashboard", async () => { 61 | mockRepository.save.mockReset(); 62 | 63 | const existingWidget: RepositoryWidget = { 64 | id: "existingWidgetId", 65 | repositoryUrl: "https://github.com/CodelyTV/DevDash", 66 | }; 67 | mockRepository.search.mockResolvedValue([existingWidget]); 68 | 69 | const newWidgetWithSameUrl: RepositoryWidget = { 70 | id: "newWidgetId", 71 | repositoryUrl: "https://github.com/CodelyTV/DevDash", 72 | }; 73 | 74 | render(); 75 | 76 | const button = await screen.findByRole("button", { 77 | name: new RegExp("Añadir repositorio", "i"), 78 | }); 79 | userEvent.click(button); 80 | 81 | const id = screen.getByLabelText(/Id/i); 82 | userEvent.type(id, newWidgetWithSameUrl.id); 83 | 84 | const url = screen.getByLabelText(/Url del repositorio/i); 85 | userEvent.type(url, newWidgetWithSameUrl.repositoryUrl); 86 | 87 | const submitButton = await screen.findByRole("button", { 88 | name: /Añadir/i, 89 | }); 90 | userEvent.click(submitButton); 91 | 92 | const errorMessage = await screen.findByRole("alert", { 93 | description: /Repositorio duplicado/i, 94 | }); 95 | 96 | expect(errorMessage).toBeInTheDocument(); 97 | expect(mockRepository.save).not.toHaveBeenCalled(); 98 | }); 99 | }); 100 | -------------------------------------------------------------------------------- /tests/sections/dashboard/Dashboard.test.tsx: -------------------------------------------------------------------------------- 1 | import { screen } from "@testing-library/react"; 2 | import { mock } from "jest-mock-extended"; 3 | 4 | import { GitHubRepositoryRepository } from "../../../src/domain/GitHubRepositoryRepository"; 5 | import { RepositoryWidgetRepository } from "../../../src/domain/RepositoryWidgetRepository"; 6 | import { Dashboard } from "../../../src/sections/dashboard/Dashboard"; 7 | import { GitHubRepositoryMother } from "../../GitHubRepositoryMother"; 8 | import { renderWithRouter } from "../../renderWithRouter"; 9 | import { RepositoryWidgetMother } from "../../RepositoryWidgetMother"; 10 | 11 | const mockGitHubRepositoryRepository = mock(); 12 | const mockWidgetRepository = mock(); 13 | 14 | describe("Dashboard section", () => { 15 | it("show all widgets", async () => { 16 | const repositoryWidget = RepositoryWidgetMother.create(); 17 | const gitHubRepository = GitHubRepositoryMother.create(); 18 | 19 | mockGitHubRepositoryRepository.search.mockResolvedValue([gitHubRepository]); 20 | 21 | renderWithRouter( 22 | 27 | ); 28 | 29 | const firstWidgetTitle = `${gitHubRepository.id.organization}/${gitHubRepository.id.name}`; 30 | const firstWidgetHeader = await screen.findByRole("heading", { 31 | name: new RegExp(firstWidgetTitle, "i"), 32 | }); 33 | 34 | expect(firstWidgetHeader).toBeInTheDocument(); 35 | }); 36 | 37 | it("show not results message when there are no widgets", async () => { 38 | mockGitHubRepositoryRepository.search.mockResolvedValue([]); 39 | 40 | renderWithRouter( 41 | 46 | ); 47 | 48 | const noResults = await screen.findByText(new RegExp("No hay widgets configurados", "i")); 49 | 50 | expect(noResults).toBeInTheDocument(); 51 | }); 52 | 53 | it("show last modified date in human readable format", async () => { 54 | const repositoryWidget = RepositoryWidgetMother.create(); 55 | const gitHubRepository = GitHubRepositoryMother.create({ updatedAt: new Date() }); 56 | 57 | mockGitHubRepositoryRepository.search.mockResolvedValue([gitHubRepository]); 58 | 59 | renderWithRouter( 60 | 65 | ); 66 | 67 | const modificationDate = await screen.findByText(new RegExp("today", "i")); 68 | 69 | expect(modificationDate).toBeInTheDocument(); 70 | }); 71 | }); 72 | -------------------------------------------------------------------------------- /tests/setupTests.ts: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | -------------------------------------------------------------------------------- /tests/svg.mock.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-anonymous-default-export */ 2 | export default "SvgrURL"; 3 | export const ReactComponent = "div"; 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "types": ["cypress"], 10 | "allowJs": true, 11 | "skipLibCheck": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "strict": true, 15 | "forceConsistentCasingInFileNames": true, 16 | "noFallthroughCasesInSwitch": true, 17 | "module": "esnext", 18 | "moduleResolution": "node", 19 | "resolveJsonModule": true, 20 | "isolatedModules": true, 21 | "noEmit": true, 22 | "jsx": "react-jsx" 23 | }, 24 | "include": [ 25 | "src", 26 | "tests", 27 | "jest.config.js", 28 | "cypress.config.ts" 29 | ] 30 | } 31 | --------------------------------------------------------------------------------