sts-sponsors team mailing list archive
-
sts-sponsors team
-
Mailing list archive
-
Message #07026
[Merge] ~jonesogolo/maas-site-manager:1546-fix-copy-button-tokens-length-64 into maas-site-manager:main
Jones Ogolo has proposed merging ~jonesogolo/maas-site-manager:1546-fix-copy-button-tokens-length-64 into maas-site-manager:main.
Commit message:
Increase token length to 64 characters and updated display styling
Requested reviews:
MAAS Committers (maas-committers)
For more details, see:
https://code.launchpad.net/~jonesogolo/maas-site-manager/+git/maas-site-manager/+merge/441084
Steps to QA:
1. Goto /tokens
2. Examine table on different screen sizes and try focusing on the copy button to make sure it's visible.
--
Your team MAAS Committers is requested to review the proposed merge of ~jonesogolo/maas-site-manager:1546-fix-copy-button-tokens-length-64 into maas-site-manager:main.
diff --git a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
index 4215dfb..ab1c15b 100644
--- a/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
+++ b/frontend/src/components/TokensList/components/TokensTable/_TokensTable.scss
@@ -3,13 +3,31 @@
width: 3rem;
}
+ thead th:last-child {
+ width: 15rem;
+ }
+
+ thead th:nth-child(3) {
+ width: 15rem;
+ }
+
@media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large) {
thead th:last-child {
width: 10rem;
}
thead th:nth-child(3) {
- width: 15rem;
+ width: 10rem;
+ }
+ }
+
+ @media screen and (max-width: $breakpoint-small) {
+ thead th:last-child {
+ width: auto;
+ }
+
+ thead th:nth-child(3) {
+ width: auto;
}
}
@@ -22,14 +40,13 @@
width: 100%;
display: flex;
align-items: center;
- min-width: 15rem;
&:hover .table-cell__copy-button {
opacity: 1;
}
.token-text {
- max-width: 70%;
+ max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/frontend/src/components/base/CopyButton/_CopyButton.scss b/frontend/src/components/base/CopyButton/_CopyButton.scss
index e535e69..6f4ddd9 100644
--- a/frontend/src/components/base/CopyButton/_CopyButton.scss
+++ b/frontend/src/components/base/CopyButton/_CopyButton.scss
@@ -3,7 +3,7 @@
border: none;
background-color: $color-light;
font-weight: $font-weight-bold;
- font-size: 0.75rem;
+ font-size: 0.75rem !important;
border-radius: 0.1875rem;
opacity: 0;
transition: all 0.2s ease-out;
diff --git a/frontend/src/mocks/factories.ts b/frontend/src/mocks/factories.ts
index 85894dd..f98b4bc 100644
--- a/frontend/src/mocks/factories.ts
+++ b/frontend/src/mocks/factories.ts
@@ -52,7 +52,7 @@ export const tokenFactory = Factory.define<Token>(({ sequence }) => {
const chance = new Chance(`maas-${sequence}`);
return {
name: `${sequence}`,
- token: chance.hash({ length: 32 }),
+ token: chance.hash({ length: 64 }),
expires: new Date(chance.date({ year: 2024 })).toISOString(), //<ISO 8601 date string>,
created: new Date(chance.date({ year: 2023 })).toISOString(), //<ISO 8601 date string>
};
Follow ups