Skip to content

Commit 59230ea

Browse files
wouterhhuismanwouterhhuisman
authored
inline edit for description of metadata pages (#1750)
* inline edit for description of resourcetypes * inline edit for description for remaining metadata pages * Create strong-experts-act.md * Update strong-experts-act.md * refactored code to remove duplicated code
1 parent 7d4f881 commit 59230ea

File tree

20 files changed

+361
-123
lines changed

20 files changed

+361
-123
lines changed

‎.changeset/strong-experts-act.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@orchestrator-ui/orchestrator-ui-components": patch
3+
---
4+
5+
inline edit for description of metadata pages

‎.github/workflows/tag-example-ui.yml‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,63 +4,63 @@
44
name: Tag example-orchestrator-ui
55

66
on:
7-
push:
8-
tags:
9-
- "@orchestrator-ui/orchestrator-ui-components@[0-9]+.[0-9]+.[0-9]+"
10-
release:
11-
types:
12-
- published
13-
tags:
14-
- "@orchestrator-ui/orchestrator-ui-components@[0-9]+.[0-9]+.[0-9]+"
7+
push:
8+
tags:
9+
- '@orchestrator-ui/orchestrator-ui-components@[0-9]+.[0-9]+.[0-9]+'
10+
release:
11+
types:
12+
- published
13+
tags:
14+
- '@orchestrator-ui/orchestrator-ui-components@[0-9]+.[0-9]+.[0-9]+'
1515

1616
# The main branch of the following repository will be tagged
1717
# with the version part (e.g. 0.3.1) of the tag trigger above.
1818
env:
19-
REPO: "example-orchestrator-ui"
19+
REPO: 'example-orchestrator-ui'
2020

2121
jobs:
22-
docker:
23-
runs-on: ubuntu-latest
24-
permissions:
25-
contents: read
26-
packages: write
27-
steps:
28-
- name: Create GitHub app token
29-
uses: actions/create-github-app-token@v1
30-
id: app-token
31-
with:
32-
app-id: ${{ vars.RW_REPOSITORY_CONTENT_APP_ID }}
33-
private-key: ${{ secrets.RW_REPOSITORY_CONTENT_PRIVATE_KEY }}
34-
owner: ${{ github.repository_owner }}
35-
repositories: ${{ env.REPO }}
36-
- name: Get latest commit SHA
37-
id: sha
38-
uses: actions/github-script@v7
39-
with:
40-
result-encoding: string
41-
script: |
42-
const commit = await github.rest.repos.getCommit({
43-
owner: github.repository_owner,
44-
repo: env.REPO,
45-
ref: 'heads/main',
46-
})
47-
return commit.data.sha
48-
- name: Extract REF from ref_name
49-
run: |
50-
REF_NAME=${{ github.ref_name }}
51-
REF=${REF_NAME/@orchestrator-ui\/orchestrator-ui-components@/}
52-
echo REF=${REF} >> $GITHUB_ENV
53-
- name: Add tag to repository
54-
uses: actions/github-script@v7
55-
env:
56-
REF: ${{ format('refs/tags/{0}', env.REF) }}
57-
SHA: ${{ steps.sha.outputs.result }}
58-
with:
59-
github-token: ${{ steps.app-token.outputs.token }}
60-
script: |
61-
await github.rest.git.createRef({
62-
owner: github.repository_owner,
63-
repo: env.REPO,
64-
ref: process.env.REF,
65-
sha: process.env.SHA,
66-
})
22+
docker:
23+
runs-on: ubuntu-latest
24+
permissions:
25+
contents: read
26+
packages: write
27+
steps:
28+
- name: Create GitHub app token
29+
uses: actions/create-github-app-token@v1
30+
id: app-token
31+
with:
32+
app-id: ${{ vars.RW_REPOSITORY_CONTENT_APP_ID }}
33+
private-key: ${{ secrets.RW_REPOSITORY_CONTENT_PRIVATE_KEY }}
34+
owner: ${{ github.repository_owner }}
35+
repositories: ${{ env.REPO }}
36+
- name: Get latest commit SHA
37+
id: sha
38+
uses: actions/github-script@v7
39+
with:
40+
result-encoding: string
41+
script: |
42+
const commit = await github.rest.repos.getCommit({
43+
owner: github.repository_owner,
44+
repo: env.REPO,
45+
ref: 'heads/main',
46+
})
47+
return commit.data.sha
48+
- name: Extract REF from ref_name
49+
run: |
50+
REF_NAME=${{ github.ref_name }}
51+
REF=${REF_NAME/@orchestrator-ui\/orchestrator-ui-components@/}
52+
echo REF=${REF} >> $GITHUB_ENV
53+
- name: Add tag to repository
54+
uses: actions/github-script@v7
55+
env:
56+
REF: ${{ format('refs/tags/{0}', env.REF) }}
57+
SHA: ${{ steps.sha.outputs.result }}
58+
with:
59+
github-token: ${{ steps.app-token.outputs.token }}
60+
script: |
61+
await github.rest.git.createRef({
62+
owner: github.repository_owner,
63+
repo: env.REPO,
64+
ref: process.env.REF,
65+
sha: process.env.SHA,
66+
})

‎apps/storybook/src/index.css‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,68 @@
11
:root {
2-
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3-
line-height: 1.5;
4-
font-weight: 400;
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
55

6-
color-scheme: light dark;
7-
color: rgba(255, 255, 255, 0.87);
8-
background-color: #242424;
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
99

10-
font-synthesis: none;
11-
text-rendering: optimizeLegibility;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
1414
}
1515

1616
a {
17-
font-weight: 500;
18-
color: #646cff;
19-
text-decoration: inherit;
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
2020
}
2121
a:hover {
22-
color: #535bf2;
22+
color: #535bf2;
2323
}
2424

2525
body {
26-
margin: 0;
27-
display: flex;
28-
place-items: center;
29-
min-width: 320px;
30-
min-height: 100vh;
26+
margin: 0;
27+
display: flex;
28+
place-items: center;
29+
min-width: 320px;
30+
min-height: 100vh;
3131
}
3232

3333
h1 {
34-
font-size: 3.2em;
35-
line-height: 1.1;
34+
font-size: 3.2em;
35+
line-height: 1.1;
3636
}
3737

3838
button {
39-
border-radius: 8px;
40-
border: 1px solid transparent;
41-
padding: 0.6em 1.2em;
42-
font-size: 1em;
43-
font-weight: 500;
44-
font-family: inherit;
45-
background-color: #1a1a1a;
46-
cursor: pointer;
47-
transition: border-color 0.25s;
39+
border-radius: 8px;
40+
border: 1px solid transparent;
41+
padding: 0.6em 1.2em;
42+
font-size: 1em;
43+
font-weight: 500;
44+
font-family: inherit;
45+
background-color: #1a1a1a;
46+
cursor: pointer;
47+
transition: border-color 0.25s;
4848
}
4949
button:hover {
50-
border-color: #646cff;
50+
border-color: #646cff;
5151
}
5252
button:focus,
5353
button:focus-visible {
54-
outline: 4px auto -webkit-focus-ring-color;
54+
outline: 4px auto -webkit-focus-ring-color;
5555
}
5656

5757
@media (prefers-color-scheme: light) {
58-
:root {
59-
color: #213547;
60-
background-color: #ffffff;
61-
}
62-
a:hover {
63-
color: #747bff;
64-
}
65-
button {
66-
background-color: #f9f9f9;
67-
}
58+
:root {
59+
color: #213547;
60+
background-color: #ffffff;
61+
}
62+
a:hover {
63+
color: #747bff;
64+
}
65+
button {
66+
background-color: #f9f9f9;
67+
}
6868
}

‎packages/orchestrator-ui-components/src/components/WfoMetadata/WfoMetadataDescriptionField.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { FC } from 'react';
2+
3+
import { WfoInlineEdit } from '../WfoInlineEdit';
4+
5+
interface WfoMetadataDescriptionFieldProps {
6+
onSave: (updatedNote: string) => void;
7+
description: string;
8+
}
9+
10+
export const WfoMetadataDescriptionField: FC<
11+
WfoMetadataDescriptionFieldProps
12+
> = ({ onSave, description }) => {
13+
return (
14+
<div>
15+
<WfoInlineEdit
16+
value={description}
17+
onlyShowOnHover={true}
18+
onSave={onSave}
19+
/>
20+
</div>
21+
);
22+
};

‎packages/orchestrator-ui-components/src/configuration/constants.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,9 @@ export const IPAM_FREE_SUBNETS_ENDPOINT = `${IPAM_ENDPOINT}/free_subnets`;
2727
export const SUBSCRIPTION_ACTIONS_ENDPOINT = 'subscriptions/workflows';
2828
export const CUSTOMER_DESCRIPTION_ENDPOINT =
2929
'/subscription_customer_descriptions';
30+
31+
//metadata
32+
export const METADATA_PRODUCT_ENDPOINT = 'products';
33+
export const METADATA_PRODUCT_BLOCK_ENDPOINT = 'product_blocks';
34+
export const METADATA_RESOURCE_TYPE_ENDPOINT = 'resource_types';
35+
export const METADATA_WORKFLOWS_ENDPOINT = 'workflows';

‎packages/orchestrator-ui-components/src/pages/metadata/WfoProductBlocksPage.tsx‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
getPageSizeChangeHandler,
2222
getQueryStringHandler,
2323
} from '@/components';
24+
import { WfoMetadataDescriptionField } from '@/components/WfoMetadata/WfoMetadataDescriptionField';
2425
import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
2526
import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
2627
import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
@@ -30,7 +31,11 @@ import {
3031
useShowToastMessage,
3132
useStoredTableConfig,
3233
} from '@/hooks';
33-
import { useGetProductBlocksQuery, useLazyGetProductBlocksQuery } from '@/rtk';
34+
import {
35+
useGetProductBlocksQuery,
36+
useLazyGetProductBlocksQuery,
37+
useUpdateProductBlockMutation,
38+
} from '@/rtk';
3439
import type { ProductBlocksResponse } from '@/rtk';
3540
import { mapRtkErrorToWfoError } from '@/rtk/utils';
3641
import {
@@ -72,6 +77,7 @@ export const WfoProductBlocksPage = () => {
7277
const getStoredTableConfig = useStoredTableConfig<ProductBlockDefinition>(
7378
METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
7479
);
80+
const [updateProductBlock] = useUpdateProductBlockMutation();
7581

7682
useEffect(() => {
7783
const storedConfig = getStoredTableConfig();
@@ -121,7 +127,18 @@ export const WfoProductBlocksPage = () => {
121127
description: {
122128
columnType: ColumnType.DATA,
123129
label: t('description'),
124-
width: '400px',
130+
width: '700px',
131+
renderData: (value, row) => (
132+
<WfoMetadataDescriptionField
133+
onSave={(updatedNote) =>
134+
updateProductBlock({
135+
id: row.productBlockId,
136+
description: updatedNote,
137+
})
138+
}
139+
description={value}
140+
/>
141+
),
125142
},
126143
status: {
127144
columnType: ColumnType.DATA,

‎packages/orchestrator-ui-components/src/pages/metadata/WfoProductsPage.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
getDataSortHandler,
2020
getQueryStringHandler,
2121
} from '@/components';
22+
import { WfoMetadataDescriptionField } from '@/components/WfoMetadata/WfoMetadataDescriptionField';
2223
import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
2324
import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
2425
import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID';
@@ -29,7 +30,11 @@ import {
2930
useShowToastMessage,
3031
useStoredTableConfig,
3132
} from '@/hooks';
32-
import { useGetProductsQuery, useLazyGetProductsQuery } from '@/rtk';
33+
import {
34+
useGetProductsQuery,
35+
useLazyGetProductsQuery,
36+
useUpdateProductMutation,
37+
} from '@/rtk';
3338
import { ProductsResponse } from '@/rtk';
3439
import { mapRtkErrorToWfoError } from '@/rtk/utils';
3540
import type { GraphqlQueryVariables, ProductDefinition } from '@/types';
@@ -68,6 +73,7 @@ export const WfoProductsPage = () => {
6873
const getStoredTableConfig = useStoredTableConfig<ProductDefinition>(
6974
METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY,
7075
);
76+
const [updateProduct] = useUpdateProductMutation();
7177

7278
useEffect(() => {
7379
const storedConfig = getStoredTableConfig();
@@ -122,8 +128,18 @@ export const WfoProductsPage = () => {
122128
description: {
123129
columnType: ColumnType.DATA,
124130
label: t('description'),
125-
width: '400px',
126-
renderTooltip: (value) => value,
131+
width: '700px',
132+
renderData: (value, row) => (
133+
<WfoMetadataDescriptionField
134+
onSave={(updatedNote) =>
135+
updateProduct({
136+
id: row.productId,
137+
description: updatedNote,
138+
})
139+
}
140+
description={value}
141+
/>
142+
),
127143
},
128144
productType: {
129145
columnType: ColumnType.DATA,
@@ -188,6 +204,7 @@ export const WfoProductsPage = () => {
188204
createdAt: {
189205
columnType: ColumnType.DATA,
190206
label: t('createdAt'),
207+
width: '90px',
191208
renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
192209
renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
193210
clipboardText: parseIsoString(parseDateToLocaleDateTimeString),

0 commit comments

Comments
 (0)