mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-11-25 19:31:05 +00:00
Update dependencies and tiny adjustments to UI (#1083)
- updated all web/ dependencies - fixed icon positioning issue - changed text color of pipeline message - add hover underline effect to breadcrumb org name
This commit is contained in:
Anbraten
GitHub
parent
d22821afc1
commit
66be4923d2
23 changed files with 1059 additions and 1639 deletions
|
|
@ -5,3 +5,4 @@ package.json
|
|||
tsconfig.eslint.json
|
||||
tsconfig.json
|
||||
src/assets/locales/
|
||||
components.d.ts
|
||||
|
|
|
|||
|
|
@ -121,6 +121,8 @@ module.exports = {
|
|||
],
|
||||
'vue/new-line-between-multi-line-property': 'error',
|
||||
'vue/padding-line-between-blocks': 'error',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/no-reserved-component-names': 'off',
|
||||
|
||||
// css rules
|
||||
'vue-scoped-css/no-unused-selector': 'error',
|
||||
|
|
|
|||
|
|
@ -2,3 +2,4 @@ yarn-lock.yaml
|
|||
dist
|
||||
coverage/
|
||||
LICENSE
|
||||
components.d.ts
|
||||
|
|
|
|||
45
web/components.d.ts
vendored
Normal file
45
web/components.d.ts
vendored
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
export {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
ActionsTab: typeof import('./src/components/repo/settings/ActionsTab.vue')['default']
|
||||
ActiveBuilds: typeof import('./src/components/layout/header/ActiveBuilds.vue')['default']
|
||||
BadgeTab: typeof import('./src/components/repo/settings/BadgeTab.vue')['default']
|
||||
BuildFeedItem: typeof import('./src/components/build-feed/BuildFeedItem.vue')['default']
|
||||
BuildFeedSidebar: typeof import('./src/components/build-feed/BuildFeedSidebar.vue')['default']
|
||||
BuildItem: typeof import('./src/components/repo/build/BuildItem.vue')['default']
|
||||
BuildList: typeof import('./src/components/repo/build/BuildList.vue')['default']
|
||||
BuildLog: typeof import('./src/components/repo/build/BuildLog.vue')['default']
|
||||
BuildProcDuration: typeof import('./src/components/repo/build/BuildProcDuration.vue')['default']
|
||||
BuildProcList: typeof import('./src/components/repo/build/BuildProcList.vue')['default']
|
||||
BuildRunningIcon: typeof import('./src/components/repo/build/BuildRunningIcon.vue')['default']
|
||||
BuildStatusIcon: typeof import('./src/components/repo/build/BuildStatusIcon.vue')['default']
|
||||
Button: typeof import('./src/components/atomic/Button.vue')['default']
|
||||
Checkbox: typeof import('./src/components/form/Checkbox.vue')['default']
|
||||
CheckboxesField: typeof import('./src/components/form/CheckboxesField.vue')['default']
|
||||
DocsLink: typeof import('./src/components/atomic/DocsLink.vue')['default']
|
||||
FluidContainer: typeof import('./src/components/layout/FluidContainer.vue')['default']
|
||||
GeneralTab: typeof import('./src/components/repo/settings/GeneralTab.vue')['default']
|
||||
Icon: typeof import('./src/components/atomic/Icon.vue')['default']
|
||||
IconButton: typeof import('./src/components/atomic/IconButton.vue')['default']
|
||||
InputField: typeof import('./src/components/form/InputField.vue')['default']
|
||||
ListItem: typeof import('./src/components/atomic/ListItem.vue')['default']
|
||||
Navbar: typeof import('./src/components/layout/header/Navbar.vue')['default']
|
||||
NumberField: typeof import('./src/components/form/NumberField.vue')['default']
|
||||
Panel: typeof import('./src/components/layout/Panel.vue')['default']
|
||||
RadioField: typeof import('./src/components/form/RadioField.vue')['default']
|
||||
RegistriesTab: typeof import('./src/components/repo/settings/RegistriesTab.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SecretsTab: typeof import('./src/components/repo/settings/SecretsTab.vue')['default']
|
||||
SelectField: typeof import('./src/components/form/SelectField.vue')['default']
|
||||
Tab: typeof import('./src/components/tabs/Tab.vue')['default']
|
||||
Tabs: typeof import('./src/components/tabs/Tabs.vue')['default']
|
||||
TextField: typeof import('./src/components/form/TextField.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
@ -17,51 +17,51 @@
|
|||
"test": "echo 'No tests configured' && exit 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@intlify/vite-plugin-vue-i18n": "^3.4.0",
|
||||
"@kyvg/vue3-notification": "2.3.4",
|
||||
"@meforma/vue-toaster": "1.2.2",
|
||||
"@intlify/vite-plugin-vue-i18n": "^6.0.0",
|
||||
"@kyvg/vue3-notification": "^2.3.6",
|
||||
"@meforma/vue-toaster": "^1.3.0",
|
||||
"ansi_up": "^5.1.0",
|
||||
"dayjs": "1.10.7",
|
||||
"floating-vue": "2.0.0-beta.5",
|
||||
"fuse.js": "6.4.6",
|
||||
"humanize-duration": "3.27.0",
|
||||
"javascript-time-ago": "2.3.10",
|
||||
"lodash": "4.17.21",
|
||||
"node-emoji": "1.11.0",
|
||||
"pinia": "2.0.0",
|
||||
"vue": "v3.2.20",
|
||||
"vue-i18n": "9",
|
||||
"vue-router": "4.0.10"
|
||||
"dayjs": "^1.11.4",
|
||||
"floating-vue": "^2.0.0-beta.19",
|
||||
"fuse.js": "^6.6.2",
|
||||
"humanize-duration": "^3.27.2",
|
||||
"javascript-time-ago": "^2.5.7",
|
||||
"lodash": "^4.17.21",
|
||||
"node-emoji": "^1.11.0",
|
||||
"pinia": "^2.0.17",
|
||||
"vue": "^3.2.37",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/json": "1.1.421",
|
||||
"@types/humanize-duration": "3.27.0",
|
||||
"@types/javascript-time-ago": "2.0.3",
|
||||
"@types/lodash": "4.14.179",
|
||||
"@types/node": "16.11.6",
|
||||
"@types/node-emoji": "1.8.1",
|
||||
"@typescript-eslint/eslint-plugin": "5.6.0",
|
||||
"@typescript-eslint/parser": "5.6.0",
|
||||
"@vitejs/plugin-vue": "1.9.4",
|
||||
"@vue/compiler-sfc": "3.2.20",
|
||||
"eslint": "7.32.0",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-config-airbnb-typescript": "16.1.0",
|
||||
"eslint-config-prettier": "8.3.0",
|
||||
"eslint-plugin-import": "2.25.3",
|
||||
"eslint-plugin-prettier": "4.0.0",
|
||||
"eslint-plugin-promise": "5.1.1",
|
||||
"eslint-plugin-simple-import-sort": "7.0.0",
|
||||
"eslint-plugin-vue": "7.18.0",
|
||||
"eslint-plugin-vue-scoped-css": "1.3.0",
|
||||
"prettier": "2.4.1",
|
||||
"@iconify/json": "^2.1.88",
|
||||
"@types/humanize-duration": "^3.27.1",
|
||||
"@types/javascript-time-ago": "^2.0.3",
|
||||
"@types/lodash": "^4.14.182",
|
||||
"@types/node": "^16.11.6",
|
||||
"@types/node-emoji": "^1.8.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.33.0",
|
||||
"@typescript-eslint/parser": "^5.33.0",
|
||||
"@vitejs/plugin-vue": "^3.0.1",
|
||||
"@vue/compiler-sfc": "^3.2.37",
|
||||
"eslint": "^8.21.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-config-airbnb-typescript": "^17.0.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-promise": "^6.0.0",
|
||||
"eslint-plugin-simple-import-sort": "^7.0.0",
|
||||
"eslint-plugin-vue": "^9.3.0",
|
||||
"eslint-plugin-vue-scoped-css": "^2.2.0",
|
||||
"prettier": "^2.7.1",
|
||||
"typescript": "4.4.4",
|
||||
"unplugin-icons": "0.12.17",
|
||||
"unplugin-vue-components": "0.17.0",
|
||||
"vite": "2.6.13",
|
||||
"vite-plugin-windicss": "1.4.12",
|
||||
"vite-svg-loader": "3.0.0",
|
||||
"vue-tsc": "0.28.10",
|
||||
"windicss": "3.2.0"
|
||||
"unplugin-icons": "^0.14.8",
|
||||
"unplugin-vue-components": "^0.22.3",
|
||||
"vite": "^3.0.4",
|
||||
"vite-plugin-windicss": "^1.8.7",
|
||||
"vite-svg-loader": "^3.4.0",
|
||||
"vue-tsc": "^0.39.5",
|
||||
"windicss": "^3.5.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,7 @@
|
|||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="
|
||||
relative
|
||||
flex
|
||||
items-center
|
||||
py-1
|
||||
px-2
|
||||
rounded-md
|
||||
border
|
||||
shadow-sm
|
||||
cursor-pointer
|
||||
transition-all
|
||||
duration-150
|
||||
focus:outline-none
|
||||
overflow-hidden
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
class="relative flex items-center py-1 px-2 rounded-md border shadow-sm cursor-pointer transition-all duration-150 focus:outline-none overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
:class="{
|
||||
'bg-white hover:bg-gray-200 border-gray-300 text-color dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:bg-dark-gray-800':
|
||||
color === 'gray',
|
||||
|
|
|
|||
|
|
@ -1,25 +1,7 @@
|
|||
<template>
|
||||
<div
|
||||
:disabled="disabled"
|
||||
class="
|
||||
relative
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
text-color
|
||||
px-1
|
||||
py-1
|
||||
rounded-full
|
||||
bg-transparent
|
||||
hover:bg-gray-200 hover:text-gray-700
|
||||
dark:hover:bg-gray-600 dark:hover:text-gray-700
|
||||
cursor-pointer
|
||||
transition-all
|
||||
duration-150
|
||||
focus:outline-none
|
||||
overflow-hidden
|
||||
disabled:opacity-50 disabled:cursor-not-allowed
|
||||
"
|
||||
class="relative flex items-center justify-center text-color px-1 py-1 rounded-full bg-transparent hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-600 dark:hover:text-gray-700 cursor-pointer transition-all duration-150 focus:outline-none overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
@click="doClick"
|
||||
>
|
||||
<Icon :name="icon" />
|
||||
|
|
|
|||
|
|
@ -1,17 +1,7 @@
|
|||
<template>
|
||||
<component
|
||||
:is="clickable ? 'button' : 'div'"
|
||||
class="
|
||||
w-full
|
||||
flex
|
||||
border
|
||||
rounded-md
|
||||
bg-white
|
||||
overflow-hidden
|
||||
p-4
|
||||
border-gray-300
|
||||
dark:bg-dark-gray-700 dark:border-dark-400
|
||||
"
|
||||
class="w-full flex border rounded-md bg-white overflow-hidden p-4 border-gray-300 dark:bg-dark-gray-700 dark:border-dark-400"
|
||||
:class="{ 'cursor-pointer hover:shadow-md hover:bg-gray-200 dark:hover:bg-dark-gray-800': clickable }"
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -7,16 +7,7 @@
|
|||
v-for="build in sortedBuildFeed"
|
||||
:key="build.id"
|
||||
:to="{ name: 'repo-build', params: { repoOwner: build.owner, repoName: build.name, buildId: build.number } }"
|
||||
class="
|
||||
flex
|
||||
border-b
|
||||
py-4
|
||||
px-2
|
||||
w-full
|
||||
hover:bg-light-300
|
||||
dark:hover:bg-dark-gray-900 dark:border-dark-gray-600
|
||||
hover:shadow-sm
|
||||
"
|
||||
class="flex border-b py-4 px-2 w-full hover:bg-light-300 dark:hover:bg-dark-gray-900 dark:border-dark-gray-600 hover:shadow-sm"
|
||||
>
|
||||
<BuildFeedItem :build="build" />
|
||||
</router-link>
|
||||
|
|
|
|||
|
|
@ -3,21 +3,7 @@
|
|||
<input
|
||||
:id="`checkbox-${id}`"
|
||||
type="checkbox"
|
||||
class="
|
||||
checkbox
|
||||
flex-shrink-0
|
||||
relative
|
||||
border border-gray-400
|
||||
dark:border-gray-600
|
||||
cursor-pointer
|
||||
rounded-md
|
||||
transition-colors
|
||||
duration-150
|
||||
w-5
|
||||
h-5
|
||||
checked:bg-lime-600 checked:border-lime-600
|
||||
dark:checked:bg-lime-800 dark:checked:border-lime-800
|
||||
"
|
||||
class="checkbox flex-shrink-0 relative border border-gray-400 dark:border-gray-600 cursor-pointer rounded-md transition-colors duration-150 w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-800 dark:checked:border-lime-800"
|
||||
:checked="innerValue"
|
||||
@click="innerValue = !innerValue"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -3,19 +3,7 @@
|
|||
<input
|
||||
:id="`radio-${id}-${option.value}`"
|
||||
type="radio"
|
||||
class="
|
||||
radio
|
||||
relative
|
||||
flex-shrink-0
|
||||
border border-gray-400
|
||||
dark:border-gray-600
|
||||
cursor-pointer
|
||||
rounded-full
|
||||
w-5
|
||||
h-5
|
||||
checked:bg-lime-600 checked:border-lime-600
|
||||
dark:checked:bg-lime-700 dark:checked:border-lime-700
|
||||
"
|
||||
class="radio relative flex-shrink-0 border border-gray-400 dark:border-gray-600 cursor-pointer rounded-full w-5 h-5 checked:bg-lime-600 checked:border-lime-600 dark:checked:bg-lime-700 dark:checked:border-lime-700"
|
||||
:value="option.value"
|
||||
:checked="innerValue.includes(option.value)"
|
||||
@click="innerValue = option.value"
|
||||
|
|
|
|||
|
|
@ -1,15 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="
|
||||
w-full
|
||||
border border-gray-200
|
||||
py-1
|
||||
px-2
|
||||
rounded-md
|
||||
bg-white
|
||||
hover:border-gray-300
|
||||
dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:border-dark-800
|
||||
"
|
||||
class="w-full border border-gray-200 py-1 px-2 rounded-md bg-white hover:border-gray-300 dark:bg-dark-gray-700 dark:border-dark-400 dark:hover:border-dark-800"
|
||||
>
|
||||
<input
|
||||
v-if="lines === 1"
|
||||
|
|
|
|||
|
|
@ -1,18 +1,6 @@
|
|||
<template>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
rounded-full
|
||||
w-8
|
||||
h-8
|
||||
bg-opacity-30
|
||||
hover:bg-opacity-50
|
||||
bg-white
|
||||
items-center
|
||||
justify-center
|
||||
cursor-pointer
|
||||
text-white
|
||||
"
|
||||
class="flex rounded-full w-8 h-8 bg-opacity-30 hover:bg-opacity-50 bg-white items-center justify-center cursor-pointer text-white"
|
||||
:class="{
|
||||
spinner: activeBuilds.length !== 0,
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<ListItem v-if="build" clickable class="p-0 w-full">
|
||||
<div class="flex items-center md:mr-4">
|
||||
<div class="flex h-full w-11 items-center md:mr-4">
|
||||
<div
|
||||
class="min-h-full w-3"
|
||||
:class="{
|
||||
|
|
@ -23,9 +23,7 @@
|
|||
</div>
|
||||
|
||||
<div class="w-full md:w-auto md:mx-4 flex items-center min-w-0">
|
||||
<span class="text-color-alt <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{
|
||||
message
|
||||
}}</span>
|
||||
<span class="text-color <md:underline whitespace-nowrap overflow-hidden overflow-ellipsis">{{ message }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -26,16 +26,7 @@
|
|||
<div
|
||||
v-show="loadedLogs"
|
||||
ref="consoleElement"
|
||||
class="
|
||||
w-full
|
||||
max-w-full
|
||||
grid grid-cols-[min-content,1fr,min-content]
|
||||
auto-rows-min
|
||||
flex-grow
|
||||
p-2
|
||||
gap-x-2
|
||||
overflow-x-hidden overflow-y-auto
|
||||
"
|
||||
class="w-full max-w-full grid grid-cols-[min-content,1fr,min-content] auto-rows-min flex-grow p-2 gap-x-2 overflow-x-hidden overflow-y-auto"
|
||||
>
|
||||
<div v-for="line in log" :key="line.index" class="contents font-mono">
|
||||
<span class="text-gray-500 whitespace-nowrap select-none text-right">{{ line.index + 1 }}</span>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,7 @@
|
|||
<template>
|
||||
<div class="flex flex-col w-full md:w-3/12 text-gray-600 dark:text-gray-400">
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
md:ml-2
|
||||
p-4
|
||||
space-x-1
|
||||
justify-between
|
||||
flex-shrink-0
|
||||
border-b-1
|
||||
md:rounded-md
|
||||
bg-gray-300
|
||||
dark:border-b-dark-gray-600 dark:bg-dark-gray-700
|
||||
"
|
||||
class="flex md:ml-2 p-4 space-x-1 justify-between flex-shrink-0 border-b-1 md:rounded-md bg-gray-300 dark:border-b-dark-gray-600 dark:bg-dark-gray-700"
|
||||
>
|
||||
<div class="flex space-x-1 items-center flex-shrink-0">
|
||||
<div class="flex items-center"><img class="w-6" :src="build.author_avatar" /></div>
|
||||
|
|
@ -59,17 +48,7 @@
|
|||
<div v-if="proc.environ" class="text-xs">
|
||||
<div v-for="(value, key) in proc.environ" :key="key">
|
||||
<span
|
||||
class="
|
||||
pl-2
|
||||
pr-1
|
||||
py-0.5
|
||||
bg-gray-800
|
||||
text-gray-200
|
||||
dark:bg-gray-600
|
||||
border-2 border-gray-800
|
||||
dark:border-gray-600
|
||||
rounded-l-full
|
||||
"
|
||||
class="pl-2 pr-1 py-0.5 bg-gray-800 text-gray-200 dark:bg-gray-600 border-2 border-gray-800 dark:border-gray-600 rounded-l-full"
|
||||
>{{ key }}</span
|
||||
>
|
||||
<span class="pl-1 pr-2 py-0.5 border-2 border-gray-800 dark:border-gray-600 rounded-r-full">{{
|
||||
|
|
@ -81,17 +60,7 @@
|
|||
<div
|
||||
v-for="job in proc.children"
|
||||
:key="job.pid"
|
||||
class="
|
||||
flex
|
||||
mx-2
|
||||
mb-1
|
||||
p-2
|
||||
pl-6
|
||||
cursor-pointer
|
||||
rounded-md
|
||||
items-center
|
||||
hover:bg-gray-300 hover:dark:bg-dark-gray-700
|
||||
"
|
||||
class="flex mx-2 mb-1 p-2 pl-6 cursor-pointer rounded-md items-center hover:bg-gray-300 hover:dark:bg-dark-gray-700"
|
||||
:class="{ 'bg-gray-300 !dark:bg-dark-gray-700': selectedProcId && selectedProcId === job.pid }"
|
||||
@click="$emit('update:selected-proc-id', job.pid)"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -2,19 +2,9 @@
|
|||
<WoodpeckerIcon class="woodpecker h-16" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
<script lang="ts" setup>
|
||||
// eslint-disable-next-line import/no-relative-parent-imports
|
||||
import WoodpeckerIcon from '../../../assets/woodpecker.svg?component';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'BuildRunningIcon',
|
||||
|
||||
components: {
|
||||
WoodpeckerIcon,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -4,18 +4,7 @@
|
|||
<div
|
||||
v-for="tab in tabs"
|
||||
:key="tab.id"
|
||||
class="
|
||||
w-full
|
||||
py-2
|
||||
md:w-auto md:pt-0 md:pb-2 md:px-8
|
||||
flex
|
||||
cursor-pointer
|
||||
md:border-b-2
|
||||
text-color
|
||||
hover:text-gray-700
|
||||
dark:hover:text-gray-400
|
||||
items-center
|
||||
"
|
||||
class="w-full py-2 md:w-auto md:pt-0 md:pb-2 md:px-8 flex cursor-pointer md:border-b-2 text-color hover:text-gray-700 dark:hover:text-gray-400 items-center"
|
||||
:class="{
|
||||
'border-gray-400 dark:border-gray-600': activeTab === tab.id,
|
||||
'border-transparent': activeTab !== tab.id,
|
||||
|
|
|
|||
|
|
@ -5,15 +5,7 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="
|
||||
flex flex-col
|
||||
w-full
|
||||
overflow-hidden
|
||||
md:m-8 md:rounded-md md:shadow md:border md:bg-white md:dark:bg-dark-gray-700
|
||||
dark:border-dark-200
|
||||
md:flex-row md:w-3xl md:h-sm
|
||||
justify-center
|
||||
"
|
||||
class="flex flex-col w-full overflow-hidden md:m-8 md:rounded-md md:shadow md:border md:bg-white md:dark:bg-dark-gray-700 dark:border-dark-200 md:flex-row md:w-3xl md:h-sm justify-center"
|
||||
>
|
||||
<div class="flex md:bg-lime-500 md:dark:bg-lime-900 md:w-3/5 justify-center items-center">
|
||||
<img class="w-48 h-48" src="../assets/logo.svg?url" />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<FluidContainer v-if="repo && repoPermissions && $route.meta.repoHeader">
|
||||
<div class="flex flex-wrap border-b items-center pb-4 mb-4 dark:border-gray-600 justify-center">
|
||||
<h1 class="text-xl text-color w-full md:w-auto text-center mb-4 md:mb-0">
|
||||
<router-link :to="{ name: 'repos-owner', params: { repoOwner } }">{{ repoOwner }}</router-link>
|
||||
<router-link :to="{ name: 'repos-owner', params: { repoOwner } }" class="hover:underline">{{
|
||||
repoOwner
|
||||
}}</router-link>
|
||||
{{ ` / ${repo.name}` }}
|
||||
</h1>
|
||||
<a v-if="badgeUrl" :href="badgeUrl" target="_blank" class="md:ml-auto">
|
||||
|
|
@ -32,8 +34,8 @@
|
|||
<router-view v-else-if="repo && repoPermissions" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, onMounted, provide, ref, toRef, watch } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineProps, onMounted, provide, ref, toRef, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
|
|
@ -50,91 +52,81 @@ import { RepoPermissions } from '~/lib/api/types';
|
|||
import BuildStore from '~/store/builds';
|
||||
import RepoStore from '~/store/repos';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'RepoWrapper',
|
||||
|
||||
components: { FluidContainer, IconButton, Icon, Tabs, Tab },
|
||||
|
||||
props: {
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
repoOwner: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
repoName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
const props = defineProps({
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
repoOwner: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const repoOwner = toRef(props, 'repoOwner');
|
||||
const repoName = toRef(props, 'repoName');
|
||||
const repoStore = RepoStore();
|
||||
const buildStore = BuildStore();
|
||||
const apiClient = useApiClient();
|
||||
const notifications = useNotifications();
|
||||
const { isAuthenticated } = useAuthentication();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const i18n = useI18n();
|
||||
// used by toRef
|
||||
// eslint-disable-next-line vue/no-unused-properties
|
||||
repoName: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const { forge } = useConfig();
|
||||
const repo = repoStore.getRepo(repoOwner, repoName);
|
||||
const repoPermissions = ref<RepoPermissions>();
|
||||
const builds = buildStore.getSortedBuilds(repoOwner, repoName);
|
||||
provide('repo', repo);
|
||||
provide('repo-permissions', repoPermissions);
|
||||
provide('builds', builds);
|
||||
const repoOwner = toRef(props, 'repoOwner');
|
||||
const repoName = toRef(props, 'repoName');
|
||||
const repoStore = RepoStore();
|
||||
const buildStore = BuildStore();
|
||||
const apiClient = useApiClient();
|
||||
const notifications = useNotifications();
|
||||
const { isAuthenticated } = useAuthentication();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const i18n = useI18n();
|
||||
|
||||
async function loadRepo() {
|
||||
repoPermissions.value = await apiClient.getRepoPermissions(repoOwner.value, repoName.value);
|
||||
if (!repoPermissions.value.pull) {
|
||||
notifications.notify({ type: 'error', title: i18n.t('repo.not_allowed') });
|
||||
// no access and not authenticated, redirect to login
|
||||
if (!isAuthenticated) {
|
||||
await router.replace({ name: 'login', query: { url: route.fullPath } });
|
||||
return;
|
||||
}
|
||||
await router.replace({ name: 'home' });
|
||||
return;
|
||||
}
|
||||
const { forge } = useConfig();
|
||||
const repo = repoStore.getRepo(repoOwner, repoName);
|
||||
const repoPermissions = ref<RepoPermissions>();
|
||||
const builds = buildStore.getSortedBuilds(repoOwner, repoName);
|
||||
provide('repo', repo);
|
||||
provide('repo-permissions', repoPermissions);
|
||||
provide('builds', builds);
|
||||
|
||||
await repoStore.loadRepo(repoOwner.value, repoName.value);
|
||||
await buildStore.loadBuilds(repoOwner.value, repoName.value);
|
||||
async function loadRepo() {
|
||||
repoPermissions.value = await apiClient.getRepoPermissions(repoOwner.value, repoName.value);
|
||||
if (!repoPermissions.value.pull) {
|
||||
notifications.notify({ type: 'error', title: i18n.t('repo.not_allowed') });
|
||||
// no access and not authenticated, redirect to login
|
||||
if (!isAuthenticated) {
|
||||
await router.replace({ name: 'login', query: { url: route.fullPath } });
|
||||
return;
|
||||
}
|
||||
await router.replace({ name: 'home' });
|
||||
return;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadRepo();
|
||||
});
|
||||
await repoStore.loadRepo(repoOwner.value, repoName.value);
|
||||
await buildStore.loadBuilds(repoOwner.value, repoName.value);
|
||||
}
|
||||
|
||||
watch([repoOwner, repoName], () => {
|
||||
loadRepo();
|
||||
});
|
||||
onMounted(() => {
|
||||
loadRepo();
|
||||
});
|
||||
|
||||
const badgeUrl = computed(() => `/api/badges/${repo.value.owner}/${repo.value.name}/status.svg`);
|
||||
watch([repoOwner, repoName], () => {
|
||||
loadRepo();
|
||||
});
|
||||
|
||||
const activeTab = computed({
|
||||
get() {
|
||||
if (route.name === 'repo-branches' || route.name === 'repo-branch') {
|
||||
return 'branches';
|
||||
}
|
||||
return 'activity';
|
||||
},
|
||||
set(tab: string) {
|
||||
if (tab === 'branches') {
|
||||
router.push({ name: 'repo-branches' });
|
||||
} else {
|
||||
router.push({ name: 'repo' });
|
||||
}
|
||||
},
|
||||
});
|
||||
const badgeUrl = computed(() => `/api/badges/${repo.value.owner}/${repo.value.name}/status.svg`);
|
||||
|
||||
return { repo, repoPermissions, badgeUrl, activeTab, forge };
|
||||
const activeTab = computed({
|
||||
get() {
|
||||
if (route.name === 'repo-branches' || route.name === 'repo-branch') {
|
||||
return 'branches';
|
||||
}
|
||||
return 'activity';
|
||||
},
|
||||
set(tab: string) {
|
||||
if (tab === 'branches') {
|
||||
router.push({ name: 'repo-branches' });
|
||||
} else {
|
||||
router.push({ name: 'repo' });
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,7 @@
|
|||
<IconButton icon="back" class="flex-shrink-0" @click="goBack" />
|
||||
|
||||
<h1
|
||||
class="
|
||||
order-3
|
||||
w-full
|
||||
<md:flex-wrap
|
||||
md:order-none md:w-auto md:ml-2
|
||||
flex
|
||||
text-center text-xl text-color
|
||||
whitespace-nowrap
|
||||
overflow-hidden overflow-ellipsis
|
||||
"
|
||||
class="order-3 w-full <md:flex-wrap md:order-none md:w-auto md:ml-2 flex text-center text-xl text-color whitespace-nowrap overflow-hidden overflow-ellipsis"
|
||||
>
|
||||
<span class="w-full md:w-auto text-center">{{ $t('repo.build.pipeline', { buildId }) }}</span>
|
||||
<span class="<md:hidden mx-2">-</span>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"include": [".eslintrc.js", "jest.config.ts", "vite.config.ts", "windi.config.ts", "src", "test"]
|
||||
"include": [".eslintrc.js", "jest.config.ts", "vite.config.ts", "windi.config.ts", "src", "test", "components.d.ts"]
|
||||
}
|
||||
|
|
|
|||
2202
web/yarn.lock
2202
web/yarn.lock
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue