Skip to content

Commit

Permalink
Merge pull request #197 from balancer:feat-improve-perms-tables
Browse files Browse the repository at this point in the history 
feat: improve permission tables layout
  • Loading branch information
@mkflow27
mkflow27 authored Dec 16, 2024
2 parents 9525b6f + 6402ec0 commit ab747e8
Show file tree
Hide file tree
Showing 3 changed files with 243 additions and 72 deletions.
300 changes: 228 additions & 72 deletions docs/.vuepress/components/PermissionTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,50 +6,65 @@
Error loading data. Please try again later.
</div>

<div v-else class="table-wrapper">
<table>
<thead>
<tr>
<th>Function</th>
<th>Contract</th>
<th>Caller Names</th>
<th>Caller Addresses</th>
<th>Deployments</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in sortedTableData" :key="index">
<td class="function">
<code>{{ row.function }}</code>
</td>
<td class="contract">{{ row.contract }}</td>
<td class="caller-names">
<ol>
<li v-for="name in row.callerNamesArray" :key="name">
{{ name }}
</li>
</ol>
</td>
<td class="caller-addresses">
<ol>
<li
v-for="(address, idx) in row.callerAddressesArray"
:key="idx"
>
<code>{{ address }}</code>
</li>
</ol>
</td>
<td class="deployments">{{ row.deployments }}</td>
</tr>
</tbody>
</table>
<div v-else class="table-container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th class="col-function">Function</th>
<th class="col-contract">Contract</th>
<th class="col-callers">Authorized Callers</th>
<th class="col-deployments">Deployments</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in sortedTableData" :key="index">
<td class="function">
<pre><code class="javascript">{{ row.function }}</code></pre>
</td>
<td class="contract">{{ row.contract }}</td>
<td class="callers">
<template v-if="row.callerAddressesArray.length">
<ol>
<li
v-for="(address, idx) in row.callerAddressesArray"
:key="idx"
>
<a
:href="getExplorerLink(address)"
target="_blank"
rel="noopener noreferrer"
class="caller-address"
>
{{ address }}
</a>
<span
v-if="
row.callerNamesArray[idx] &&
row.callerNamesArray[idx] !== address
"
class="caller-name"
>
({{ row.callerNamesArray[idx] }})
</span>
</li>
</ol>
</template>
<template v-else> none </template>
</td>
<td class="deployments">{{ row.deployments }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import 'highlight.js/styles/github-dark.css';
import hljs from 'highlight.js';
interface TableRow {
function: string;
Expand Down Expand Up @@ -102,19 +117,33 @@ export default defineComponent({
);
},
},
async mounted() {
await this.fetchData();
mounted() {
this.fetchData();
this.highlightCode();
},
updated() {
this.highlightCode();
},
methods: {
highlightCode() {
document.querySelectorAll('pre code').forEach(block => {
hljs.highlightBlock(block as HTMLElement);
});
},
getExplorerLink(address: string): string {
const baseUrl =
this.chain === 'mainnet'
? 'https://etherscan.io/address/'
: 'https://gnosisscan.io/address/';
return `${baseUrl}${address}`;
},
isV3Related(deployment: string, callerNames: string[]): boolean {
// Check if deployment contains v3
const isV3Deployment = deployment.includes('-v3-');
// Check if any caller name contains v3
const hasV3Caller = callerNames.some(
name => name.includes('-v3-') || name.includes('/v3/')
);
return isV3Deployment || hasV3Caller;
},
Expand Down Expand Up @@ -149,14 +178,12 @@ export default defineComponent({
const permissionAddresses = permissions[actionId] || [];
const callerNamesArray = permissionAddresses.map(addr => {
let name = reverseAddressBook[addr];
if (!name) {
name = reverseAddressBook[addr.toLowerCase()];
}
let name =
reverseAddressBook[addr] ||
reverseAddressBook[addr.toLowerCase()];
return name || addr;
});
// Only add if it's v3 related
if (this.isV3Related(deployment, callerNamesArray)) {
processedData.push({
function: functionName,
Expand Down Expand Up @@ -205,13 +232,13 @@ table {
th {
background-color: var(--background-color, #f8fafc);
padding: 0.75rem 1rem;
padding: 0.5rem 0.75rem;
font-weight: 600;
border-bottom: 1px solid var(--c-docs-card-border);
}
td {
padding: 0.75rem 1rem;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--c-docs-card-border);
vertical-align: top;
}
Expand All @@ -220,47 +247,176 @@ tr:last-child td {
border-bottom: none;
}
.col-function {
width: 15%;
}
.col-contract {
width: 20%;
}
.col-callers {
width: 50%;
}
.col-deployments {
width: 15%;
}
.function {
min-width: 150px;
max-width: 300px;
}
.function pre {
margin: 0;
padding: 0;
}
.function code {
font-family: monospace;
font-size: 0.875rem;
font-size: 0.75rem;
white-space: pre-wrap;
max-width: 300px;
background-color: var(--c-bg-light);
padding: 0.2rem 0.4rem;
display: block;
padding: 0.5rem;
border-radius: 0.25rem;
background-color: var(--code-bg);
color: var(--code-text);
}
.caller-names ol,
.caller-addresses ol {
margin: 0;
padding-left: 1.5rem;
.contract {
min-width: 150px;
white-space: nowrap;
}
.caller-names li,
.caller-addresses li {
.callers {
font-size: 0.875rem;
min-width: 350px;
padding-left: 0; /* Remove any cell padding */
}
.callers ol {
padding-left: 1.5rem; /* Slightly reduced padding */
list-style-position: outside;
/* Pull the list slightly to the left */
margin: 0 0 0 -1rem;
}
.callers li {
margin-bottom: 0.25rem;
display: flex;
align-items: baseline;
flex-wrap: nowrap;
gap: 0.5rem;
font-family: monospace;
padding-left: 0.25rem; /* Small padding for list items */
}
.caller-addresses code {
.callers li:last-child {
margin-bottom: 0;
}
.caller-address {
color: inherit;
text-decoration: none;
white-space: nowrap;
font-family: monospace;
font-size: 0.875rem;
white-space: pre-wrap;
background-color: var(--c-bg-light);
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
}
.loading,
.error {
padding: 1rem;
text-align: center;
.callers a:hover {
text-decoration: underline;
}
.error {
color: #dc2626;
.bullet {
color: var(--c-text-lighter);
margin-right: 0.5rem;
font-size: 1.2em;
line-height: 1;
}
.caller-name {
font-family: var(--font-family);
color: var(--c-text-lighter);
white-space: normal;
font-size: 0.875rem;
min-width: 150px;
margin-left: 0.25rem;
}
.callers a {
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.callers a:hover {
text-decoration: underline;
}
tr:hover {
background-color: var(--background-color, #f8fafc);
}
/* Theme-aware syntax highlighting */
:deep(.hljs) {
background: var(--code-bg) !important;
color: var(--code-text) !important;
}
/* Light mode */
html:not(.dark) {
--code-bg: #f8fafc;
--code-text: #1e293b;
}
html:not(.dark) :deep(.hljs-keyword),
html:not(.dark) :deep(.hljs-built_in),
html:not(.dark) :deep(.hljs-type) {
color: #2563eb !important; /* blue */
}
html:not(.dark) :deep(.hljs-string) {
color: #059669 !important; /* green */
}
html:not(.dark) :deep(.hljs-number) {
color: #db2777 !important; /* pink */
}
html:not(.dark) :deep(.hljs-comment) {
color: #64748b !important; /* slate */
}
html:not(.dark) :deep(.hljs-function) {
color: #334155 !important; /* darker slate blue for better readability */
}
/* Dark mode */
html.dark {
--code-bg: #1a1b26;
--code-text: #c0caf5;
}
html.dark :deep(.hljs-keyword),
html.dark :deep(.hljs-built_in),
html.dark :deep(.hljs-type) {
color: #7aa2f7 !important; /* lighter blue */
}
html.dark :deep(.hljs-string) {
color: #9ece6a !important; /* lighter green */
}
html.dark :deep(.hljs-number) {
color: #ff9e64 !important; /* orange */
}
html.dark :deep(.hljs-comment) {
color: #565f89 !important; /* muted blue */
}
html.dark :deep(.hljs-function) {
color: #e2e8f0 !important; /* light gray with slight blue tint for dark mode */
}
</style>
Loading

0 comments on commit ab747e8

Please sign in to comment.