inline edit for description of metadata pages

.changeset/strong-experts-act.md

@@ -0,0 +1,5 @@
+---
+"@orchestrator-ui/orchestrator-ui-components": patch
+---
+
+inline edit for description of metadata pages

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

@@ -4,63 +4,63 @@
 name: Tag example-orchestrator-ui
 
 on:
-  push:
-    tags:
-      - "@orchestrator-ui/orchestrator-ui-components@[0-9]+.[0-9]+.[0-9]+"
-  release:
-    types:
-      - published
-    tags:
-      - "@orchestrator-ui/orchestrator-ui-components@[0-9]+.[0-9]+.[0-9]+"
+    push:
+        tags:
+            - '@orchestrator-ui/orchestrator-ui-components@[0-9]+.[0-9]+.[0-9]+'
+    release:
+        types:
+            - published
+        tags:
+            - '@orchestrator-ui/orchestrator-ui-components@[0-9]+.[0-9]+.[0-9]+'
 
 # The main branch of the following repository will be tagged
 # with the version part (e.g. 0.3.1) of the tag trigger above.
 env:
-  REPO: "example-orchestrator-ui"
+    REPO: 'example-orchestrator-ui'
 
 jobs:
-  docker:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Create GitHub app token
-        uses: actions/create-github-app-token@v1
-        id: app-token
-        with:
-          app-id: ${{ vars.RW_REPOSITORY_CONTENT_APP_ID }}
-          private-key: ${{ secrets.RW_REPOSITORY_CONTENT_PRIVATE_KEY }}
-          owner: ${{ github.repository_owner }}
-          repositories: ${{ env.REPO }}
-      - name: Get latest commit SHA
-        id: sha
-        uses: actions/github-script@v7
-        with:
-          result-encoding: string
-          script: |
-            const commit = await github.rest.repos.getCommit({
-              owner: github.repository_owner,
-              repo: env.REPO,
-              ref: 'heads/main',
-            })
-            return commit.data.sha
-      - name: Extract REF from ref_name
-        run: |
-          REF_NAME=${{ github.ref_name }}
-          REF=${REF_NAME/@orchestrator-ui\/orchestrator-ui-components@/}
-          echo REF=${REF} >> $GITHUB_ENV
-      - name: Add tag to repository
-        uses: actions/github-script@v7
-        env:
-          REF: ${{ format('refs/tags/{0}', env.REF) }}
-          SHA: ${{ steps.sha.outputs.result }}
-        with:
-          github-token: ${{ steps.app-token.outputs.token }}
-          script: |
-            await github.rest.git.createRef({
-              owner: github.repository_owner,
-              repo: env.REPO,
-              ref: process.env.REF,
-              sha: process.env.SHA,
-            })
+    docker:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            packages: write
+        steps:
+            - name: Create GitHub app token
+              uses: actions/create-github-app-token@v1
+              id: app-token
+              with:
+                  app-id: ${{ vars.RW_REPOSITORY_CONTENT_APP_ID }}
+                  private-key: ${{ secrets.RW_REPOSITORY_CONTENT_PRIVATE_KEY }}
+                  owner: ${{ github.repository_owner }}
+                  repositories: ${{ env.REPO }}
+            - name: Get latest commit SHA
+              id: sha
+              uses: actions/github-script@v7
+              with:
+                  result-encoding: string
+                  script: |
+                      const commit = await github.rest.repos.getCommit({
+                        owner: github.repository_owner,
+                        repo: env.REPO,
+                        ref: 'heads/main',
+                      })
+                      return commit.data.sha
+            - name: Extract REF from ref_name
+              run: |
+                  REF_NAME=${{ github.ref_name }}
+                  REF=${REF_NAME/@orchestrator-ui\/orchestrator-ui-components@/}
+                  echo REF=${REF} >> $GITHUB_ENV
+            - name: Add tag to repository
+              uses: actions/github-script@v7
+              env:
+                  REF: ${{ format('refs/tags/{0}', env.REF) }}
+                  SHA: ${{ steps.sha.outputs.result }}
+              with:
+                  github-token: ${{ steps.app-token.outputs.token }}
+                  script: |
+                      await github.rest.git.createRef({
+                        owner: github.repository_owner,
+                        repo: env.REPO,
+                        ref: process.env.REF,
+                        sha: process.env.SHA,
+                      })

apps/storybook/src/index.css

@@ -1,68 +1,68 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+    color: #535bf2;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+    font-size: 3.2em;
+    line-height: 1.1;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+    border-color: #646cff;
 }
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+    outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+    a:hover {
+        color: #747bff;
+    }
+    button {
+        background-color: #f9f9f9;
+    }
 }

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

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+import { WfoInlineEdit } from '../WfoInlineEdit';
+
+interface WfoMetadataDescriptionFieldProps {
+    onSave: (updatedNote: string) => void;
+    description: string;
+}
+
+export const WfoMetadataDescriptionField: FC<
+    WfoMetadataDescriptionFieldProps
+> = ({ onSave, description }) => {
+    return (
+        <div>
+            <WfoInlineEdit
+                value={description}
+                onlyShowOnHover={true}
+                onSave={onSave}
+            />
+        </div>
+    );
+};

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

@@ -27,3 +27,9 @@ export const IPAM_FREE_SUBNETS_ENDPOINT = `${IPAM_ENDPOINT}/free_subnets`;
 export const SUBSCRIPTION_ACTIONS_ENDPOINT = 'subscriptions/workflows';
 export const CUSTOMER_DESCRIPTION_ENDPOINT =
     '/subscription_customer_descriptions';
+
+//metadata
+export const METADATA_PRODUCT_ENDPOINT = 'products';
+export const METADATA_PRODUCT_BLOCK_ENDPOINT = 'product_blocks';
+export const METADATA_RESOURCE_TYPE_ENDPOINT = 'resource_types';
+export const METADATA_WORKFLOWS_ENDPOINT = 'workflows';

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

@@ -21,6 +21,7 @@ import {
     getPageSizeChangeHandler,
     getQueryStringHandler,
 } from '@/components';
+import { WfoMetadataDescriptionField } from '@/components/WfoMetadata/WfoMetadataDescriptionField';
 import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
 import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
 import { ColumnType, Pagination } from '@/components/WfoTable/WfoTable';
@@ -30,7 +31,11 @@ import {
     useShowToastMessage,
     useStoredTableConfig,
 } from '@/hooks';
-import { useGetProductBlocksQuery, useLazyGetProductBlocksQuery } from '@/rtk';
+import {
+    useGetProductBlocksQuery,
+    useLazyGetProductBlocksQuery,
+    useUpdateProductBlockMutation,
+} from '@/rtk';
 import type { ProductBlocksResponse } from '@/rtk';
 import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import {
@@ -72,6 +77,7 @@ export const WfoProductBlocksPage = () => {
     const getStoredTableConfig = useStoredTableConfig<ProductBlockDefinition>(
         METADATA_PRODUCT_BLOCKS_TABLE_LOCAL_STORAGE_KEY,
     );
+    const [updateProductBlock] = useUpdateProductBlockMutation();
 
     useEffect(() => {
         const storedConfig = getStoredTableConfig();
@@ -121,7 +127,18 @@ export const WfoProductBlocksPage = () => {
         description: {
             columnType: ColumnType.DATA,
             label: t('description'),
-            width: '400px',
+            width: '700px',
+            renderData: (value, row) => (
+                <WfoMetadataDescriptionField
+                    onSave={(updatedNote) =>
+                        updateProductBlock({
+                            id: row.productBlockId,
+                            description: updatedNote,
+                        })
+                    }
+                    description={value}
+                />
+            ),
         },
         status: {
             columnType: ColumnType.DATA,

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

@@ -19,6 +19,7 @@ import {
     getDataSortHandler,
     getQueryStringHandler,
 } from '@/components';
+import { WfoMetadataDescriptionField } from '@/components/WfoMetadata/WfoMetadataDescriptionField';
 import { WfoAdvancedTable } from '@/components/WfoTable/WfoAdvancedTable';
 import { WfoAdvancedTableColumnConfig } from '@/components/WfoTable/WfoAdvancedTable/types';
 import { WfoFirstPartUUID } from '@/components/WfoTable/WfoFirstPartUUID';
@@ -29,7 +30,11 @@ import {
     useShowToastMessage,
     useStoredTableConfig,
 } from '@/hooks';
-import { useGetProductsQuery, useLazyGetProductsQuery } from '@/rtk';
+import {
+    useGetProductsQuery,
+    useLazyGetProductsQuery,
+    useUpdateProductMutation,
+} from '@/rtk';
 import { ProductsResponse } from '@/rtk';
 import { mapRtkErrorToWfoError } from '@/rtk/utils';
 import type { GraphqlQueryVariables, ProductDefinition } from '@/types';
@@ -68,6 +73,7 @@ export const WfoProductsPage = () => {
     const getStoredTableConfig = useStoredTableConfig<ProductDefinition>(
         METADATA_PRODUCT_TABLE_LOCAL_STORAGE_KEY,
     );
+    const [updateProduct] = useUpdateProductMutation();
 
     useEffect(() => {
         const storedConfig = getStoredTableConfig();
@@ -122,8 +128,18 @@ export const WfoProductsPage = () => {
         description: {
             columnType: ColumnType.DATA,
             label: t('description'),
-            width: '400px',
-            renderTooltip: (value) => value,
+            width: '700px',
+            renderData: (value, row) => (
+                <WfoMetadataDescriptionField
+                    onSave={(updatedNote) =>
+                        updateProduct({
+                            id: row.productId,
+                            description: updatedNote,
+                        })
+                    }
+                    description={value}
+                />
+            ),
         },
         productType: {
             columnType: ColumnType.DATA,
@@ -188,6 +204,7 @@ export const WfoProductsPage = () => {
         createdAt: {
             columnType: ColumnType.DATA,
             label: t('createdAt'),
+            width: '90px',
             renderData: (date) => <WfoDateTime dateOrIsoString={date} />,
             renderDetails: parseIsoString(parseDateToLocaleDateTimeString),
             clipboardText: parseIsoString(parseDateToLocaleDateTimeString),