Merge pull request #11594 from strapi/typography-webhooks

[DS] Typography in webhooks

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FieldLabel } from '@strapi/design-system/Field';
 import { Stack } from '@strapi/design-system/Stack';
-import { P, TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { useFormikContext } from 'formik';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -121,14 +121,18 @@ const EventInput = ({ isDraftAndPublish }) => {
                         'This event only exists for contents with Draft/Publish system enabled',
                     })}
                   >
-                    <TableLabel textColor="neutral600">{formatMessage({ id: header })}</TableLabel>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage({ id: header, defaultMessage: header })}
+                    </Typography>
                   </td>
                 );
               }
 
               return (
                 <td key={header}>
-                  <TableLabel textColor="neutral600">{formatMessage({ id: header })}</TableLabel>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {formatMessage({ id: header, defaultMessage: header })}
+                  </Typography>
                 </td>
               );
             })}
@@ -151,12 +155,12 @@ const EventInput = ({ isDraftAndPublish }) => {
         </tbody>
       </StyledTable>
       {errors.events && (
-        <P small textColor="danger600" data-strapi-field-error>
+        <Typography variant="pi" textColor="danger600" data-strapi-field-error>
           {formatMessage({
             id: 'components.Input.error.validation.required',
             defaultMessage: 'This value is required',
           })}
-        </P>
+        </Typography>
       )}
     </Stack>
   );

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/HeadersInput/Combobox.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { ComboboxOption, CreatableCombobox } from '@strapi/design-system/Combobox';
 import keys from './keys';
 
-const Combobox = ({ name, onChange, ...props }) => {
-  const [options, setOptions] = useState(keys);
+const Combobox = ({ name, onChange, value, ...props }) => {
+  const [options, setOptions] = useState(value ? [...keys, value] : keys);
 
   const handleChange = value => {
     onChange({ target: { name, value } });
@@ -22,6 +22,7 @@ const Combobox = ({ name, onChange, ...props }) => {
       onChange={handleChange}
       onCreateOption={handleCreateOption}
       placeholder=""
+      value={value}
     >
       {options.map(key => (
         <ComboboxOption value={key} key={key}>
@@ -32,9 +33,14 @@ const Combobox = ({ name, onChange, ...props }) => {
   );
 };
 
+Combobox.defaultProps = {
+  value: undefined,
+};
+
 Combobox.propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
 };
 
 export default Combobox;

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/TriggerContainer/index.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import { pxToRem } from '@strapi/helper-plugin';
 import Check from '@strapi/icons/Check';
 import Cross from '@strapi/icons/Cross';
 import Loader from '@strapi/icons/Loader';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 
 // Being discussed in Notion: create a <Icon /> component in Parts
 const Icon = styled.svg(
@@ -30,9 +31,9 @@ const Status = ({ isPending, statusCode }) => {
     return (
       <Stack horizontal size={2} style={{ alignItems: 'center' }}>
         <Icon as={Loader} />
-        <Text>
+        <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.pending', defaultMessage: 'pending' })}
-        </Text>
+        </Typography>
       </Stack>
     );
   }
@@ -41,9 +42,9 @@ const Status = ({ isPending, statusCode }) => {
     return (
       <Stack horizontal size={2} style={{ alignItems: 'center' }}>
         <Icon as={Check} color="success700" />
-        <Text>
+        <Typography>
           {formatMessage({ id: 'Settings.webhooks.trigger.success', defaultMessage: 'success' })}
-        </Text>
+        </Typography>
       </Stack>
     );
   }
@@ -52,9 +53,9 @@ const Status = ({ isPending, statusCode }) => {
     return (
       <Stack horizontal size={2} style={{ alignItems: 'center' }}>
         <Icon as={Cross} color="danger700" />
-        <Text>
+        <Typography>
           {formatMessage({ id: 'Settings.error', defaultMessage: 'error' })} {statusCode}
-        </Text>
+        </Typography>
       </Stack>
     );
   }
@@ -75,29 +76,24 @@ const Message = ({ statusCode, message }) => {
   if (statusCode >= 200 && statusCode < 300) {
     return (
       <Flex justifyContent="flex-end">
-        <Text>
+        <Typography textColor="neutral600" ellipsis>
           {formatMessage({
             id: 'Settings.webhooks.trigger.success.label',
-            defaultMessage: 'success',
+            defaultMessage: 'Trigger succeeded',
           })}
-        </Text>
+        </Typography>
       </Flex>
     );
   }
 
   if (statusCode >= 300) {
     return (
-      <Flex justifyContent="flex-end" title={message}>
-        <Text
-          // ! REMOVE THIS WHEN DS IS UPDATED WITH ELLIPSIS PROP
-          style={{
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
-          }}
-        >
-          {message}
-        </Text>
+      <Flex justifyContent="flex-end">
+        <Flex maxWidth={pxToRem(250)} justifyContent="flex-end" title={message}>
+          <Typography ellipsis textColor="neutral600">
+            {message}
+          </Typography>
+        </Flex>
       </Flex>
     );
   }
@@ -120,9 +116,9 @@ const CancelButton = ({ onCancel }) => {
     <Flex justifyContent="flex-end">
       <button onClick={onCancel} type="button">
         <Stack horizontal size={2} style={{ alignItems: 'center' }}>
-          <Text textColor="neutral400">
+          <Typography textColor="neutral400">
             {formatMessage({ id: 'Settings.webhooks.trigger.cancel', defaultMessage: 'cancel' })}
-          </Text>
+          </Typography>
           <Icon as={Cross} color="neutral400" />
         </Stack>
       </button>
@@ -140,12 +136,12 @@ const TriggerContainer = ({ isPending, onCancel, response }) => {
     <Box background="neutral0" padding={5} shadow="filterShadow" hasRadius>
       <Grid gap={4} style={{ alignItems: 'center' }}>
         <GridItem col={3}>
-          <Text>
+          <Typography>
             {formatMessage({
               id: 'Settings.webhooks.trigger.test',
-              defaultMessage: 'test-trigger',
+              defaultMessage: 'Test-trigger',
             })}
-          </Text>
+          </Typography>
         </GridItem>
         <GridItem col={3}>
           <Status isPending={isPending} statusCode={statusCode} />

packages/core/admin/admin/src/pages/SettingsPage/pages/Webhooks/ListView/index.js

@@ -25,7 +25,7 @@ import { Stack } from '@strapi/design-system/Stack';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 import { Table, Thead, Tr, Th, Tbody, Td, TFooter } from '@strapi/design-system/Table';
-import { Text, TableLabel, Subtitle } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Button } from '@strapi/design-system/Button';
 import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 import { Switch } from '@strapi/design-system/Switch';
@@ -53,6 +53,7 @@ const ListView = () => {
     reducer,
     initialState
   );
+  console.log(webhooks);
   const { notifyStatus } = useNotifyAT();
 
   useFocusWhenNavigate();
@@ -243,236 +244,229 @@ const ListView = () => {
     <Layout>
       <SettingsPageTitle name="Webhooks" />
       <Main aria-busy={isLoading || loadingWebhooks}>
-        <>
-          <HeaderLayout
-            title={formatMessage({ id: 'Settings.webhooks.title', defaultMessage: 'Webhooks' })}
-            subtitle={formatMessage({
-              id: 'Settings.webhooks.list.description',
-              defaultMessage: 'Get POST changes notifications.',
-            })}
-            primaryAction={
-              canCreate &&
-              !loadingWebhooks && (
-                <LinkButton
-                  startIcon={<Plus />}
-                  variant="default"
-                  to={`${pathname}/create`}
+        <HeaderLayout
+          title={formatMessage({ id: 'Settings.webhooks.title', defaultMessage: 'Webhooks' })}
+          subtitle={formatMessage({
+            id: 'Settings.webhooks.list.description',
+            defaultMessage: 'Get POST changes notifications.',
+          })}
+          primaryAction={
+            canCreate &&
+            !loadingWebhooks && (
+              <LinkButton startIcon={<Plus />} variant="default" to={`${pathname}/create`} size="L">
+                {formatMessage({
+                  id: 'Settings.webhooks.list.button.add',
+                  defaultMessage: 'Add new webhook',
+                })}
+              </LinkButton>
+            )
+          }
+        />
+        {webhooksToDeleteLength > 0 && canDelete && (
+          <ActionLayout
+            startActions={
+              <>
+                <Typography variant="epsilon" textColor="neutral600">
+                  {formatMessage(
+                    {
+                      id: 'Settings.webhooks.to.delete',
+                      defaultMessage:
+                        '{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected',
+                    },
+                    { webhooksToDeleteLength }
+                  )}
+                </Typography>
+                <Button
+                  onClick={() => handleDeleteClick('all')}
+                  startIcon={<Trash />}
                   size="L"
+                  variant="danger-light"
                 >
-                  {formatMessage({
-                    id: 'Settings.webhooks.list.button.add',
-                    defaultMessage: 'Add new webhook',
-                  })}
-                </LinkButton>
-              )
+                  Delete
+                </Button>
+              </>
             }
           />
-          {webhooksToDeleteLength > 0 && canDelete && (
-            <ActionLayout
-              startActions={
-                <>
-                  <Subtitle textColor="neutral600">
-                    {formatMessage(
-                      {
-                        id: 'Settings.webhooks.to.delete',
-                        defaultMessage:
-                          '{webhooksToDeleteLength, plural, one {# asset} other {# assets}} selected',
-                      },
-                      { webhooksToDeleteLength }
-                    )}
-                  </Subtitle>
-                  <Button
-                    onClick={() => handleDeleteClick('all')}
-                    startIcon={<Trash />}
-                    size="L"
-                    variant="danger-light"
-                  >
-                    Delete
-                  </Button>
-                </>
-              }
-            />
-          )}
-          <ContentLayout>
-            {isLoading || loadingWebhooks ? (
-              <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
-                <LoadingIndicatorPage />
-              </Box>
-            ) : (
-              <>
-                {rowsCount > 0 ? (
-                  <Table
-                    colCount={5}
-                    rowCount={rowsCount + 1}
-                    footer={
-                      <TFooter
-                        onClick={() => (canCreate ? handleGoTo('create') : {})}
-                        icon={<Plus />}
-                      >
-                        {formatMessage({
-                          id: 'Settings.webhooks.list.button.add',
-                          defaultMessage: 'Add new webhook',
-                        })}
-                      </TFooter>
-                    }
-                  >
-                    <Thead>
-                      <Tr>
-                        <Th>
-                          <BaseCheckbox
-                            aria-label={formatMessage({
-                              id: 'Settings.webhooks.list.all-entries.select',
-                              defaultMessage: 'Select all entries',
-                            })}
-                            indeterminate={
-                              webhooksToDeleteLength > 0 && webhooksToDeleteLength < rowsCount
-                            }
-                            value={webhooksToDeleteLength === rowsCount}
-                            onValueChange={handleSelectAllCheckbox}
-                          />
-                        </Th>
-                        <Th width="20%">
-                          <TableLabel textColor="neutral600">
-                            {formatMessage({
-                              id: 'Settings.webhooks.form.name',
-                              defaultMessage: 'Name',
-                            })}
-                          </TableLabel>
-                        </Th>
-                        <Th width="60%">
-                          <TableLabel textColor="neutral600">
-                            {formatMessage({
-                              id: 'Settings.webhooks.form.url',
-                              defaultMessage: 'URL',
-                            })}
-                          </TableLabel>
-                        </Th>
-                        <Th width="20%">
-                          <TableLabel textColor="neutral600">
-                            {formatMessage({
-                              id: 'Settings.webhooks.list.th.status',
-                              defaultMessage: 'Status',
-                            })}
-                          </TableLabel>
-                        </Th>
-                        <Th>
-                          <VisuallyHidden>
-                            {formatMessage({
-                              id: 'Settings.webhooks.list.th.actions',
-                              defaultMessage: 'Actions',
-                            })}
-                          </VisuallyHidden>
-                        </Th>
-                      </Tr>
-                    </Thead>
-                    <Tbody>
-                      {webhooks.map(webhook => (
-                        <Tr
-                          key={webhook.id}
-                          {...onRowClick({
-                            fn: () => handleGoTo(webhook.id),
-                            condition: canUpdate,
+        )}
+        <ContentLayout>
+          {isLoading || loadingWebhooks ? (
+            <Box background="neutral0" padding={6} shadow="filterShadow" hasRadius>
+              <LoadingIndicatorPage />
+            </Box>
+          ) : (
+            <>
+              {rowsCount > 0 ? (
+                <Table
+                  colCount={5}
+                  rowCount={rowsCount + 1}
+                  footer={
+                    <TFooter
+                      onClick={() => (canCreate ? handleGoTo('create') : {})}
+                      icon={<Plus />}
+                    >
+                      {formatMessage({
+                        id: 'Settings.webhooks.list.button.add',
+                        defaultMessage: 'Add new webhook',
+                      })}
+                    </TFooter>
+                  }
+                >
+                  <Thead>
+                    <Tr>
+                      <Th>
+                        <BaseCheckbox
+                          aria-label={formatMessage({
+                            id: 'Settings.webhooks.list.all-entries.select',
+                            defaultMessage: 'Select all entries',
                           })}
-                        >
-                          <Td {...stopPropagation}>
-                            <BaseCheckbox
-                              aria-label={`${formatMessage({
-                                id: 'Settings.webhooks.list.select',
-                                defaultMessage: 'Select',
-                              })} ${webhook.name}`}
-                              value={webhooksToDelete?.includes(webhook.id)}
-                              onValueChange={value => handleSelectOneCheckbox(value, webhook.id)}
-                              id="select"
-                              name="select"
-                            />
-                          </Td>
-                          <Td>
-                            <Text bold textColor="neutral800">
-                              {webhook.name}
-                            </Text>
-                          </Td>
-                          <Td>
-                            <Text textColor="neutral800">{webhook.url}</Text>
-                          </Td>
-                          <Td>
-                            <Flex {...stopPropagation}>
-                              <Switch
-                                onLabel={formatMessage({
-                                  id: 'Settings.webhooks.enabled',
-                                  defaultMessage: 'Enabled',
-                                })}
-                                offLabel={formatMessage({
-                                  id: 'Settings.webhooks.disabled',
-                                  defaultMessage: 'Disabled',
-                                })}
-                                label={`${webhook.name} ${formatMessage({
-                                  id: 'Settings.webhooks.list.th.status',
-                                  defaultMessage: 'Status',
-                                })}`}
-                                selected={webhook.isEnabled}
-                                onChange={() => handleEnabledChange(!webhook.isEnabled, webhook.id)}
-                                visibleLabels
-                              />
-                            </Flex>
-                          </Td>
-                          <Td>
-                            <Stack horizontal size={1} {...stopPropagation}>
-                              {canUpdate && (
-                                <IconButton
-                                  onClick={() => {
-                                    handleGoTo(webhook.id);
-                                  }}
-                                  label={formatMessage({
-                                    id: 'Settings.webhooks.events.update',
-                                    defaultMessage: 'Update',
-                                  })}
-                                  icon={<Pencil />}
-                                  noBorder
-                                />
-                              )}
-                              {canDelete && (
-                                <IconButton
-                                  onClick={() => handleDeleteClick(webhook.id)}
-                                  label={formatMessage({
-                                    id: 'Settings.webhooks.events.delete',
-                                    defaultMessage: 'Delete',
-                                  })}
-                                  icon={<Trash />}
-                                  noBorder
-                                  id={`delete-${webhook.id}`}
-                                />
-                              )}
-                            </Stack>
-                          </Td>
-                        </Tr>
-                      ))}
-                    </Tbody>
-                  </Table>
-                ) : (
-                  <EmptyStateLayout
-                    icon={<EmptyDocuments width="160px" />}
-                    content={formatMessage({
-                      id: 'Settings.webhooks.list.empty.description',
-                      defaultMessage: 'Add your first webhook',
-                    })}
-                    action={
-                      <Button
-                        variant="secondary"
-                        startIcon={<Plus />}
-                        onClick={() => (canCreate ? handleGoTo('create') : {})}
-                      >
-                        {formatMessage({
-                          id: 'Settings.webhooks.list.button.add',
-                          defaultMessage: 'Add new webhook',
+                          indeterminate={
+                            webhooksToDeleteLength > 0 && webhooksToDeleteLength < rowsCount
+                          }
+                          value={webhooksToDeleteLength === rowsCount}
+                          onValueChange={handleSelectAllCheckbox}
+                        />
+                      </Th>
+                      <Th width="20%">
+                        <Typography variant="sigma" textColor="neutral600">
+                          {formatMessage({
+                            id: 'Settings.webhooks.form.name',
+                            defaultMessage: 'Name',
+                          })}
+                        </Typography>
+                      </Th>
+                      <Th width="60%">
+                        <Typography variant="sigma" textColor="neutral600">
+                          {formatMessage({
+                            id: 'Settings.webhooks.form.url',
+                            defaultMessage: 'URL',
+                          })}
+                        </Typography>
+                      </Th>
+                      <Th width="20%">
+                        <Typography variant="sigma" textColor="neutral600">
+                          {formatMessage({
+                            id: 'Settings.webhooks.list.th.status',
+                            defaultMessage: 'Status',
+                          })}
+                        </Typography>
+                      </Th>
+                      <Th>
+                        <VisuallyHidden>
+                          {formatMessage({
+                            id: 'Settings.webhooks.list.th.actions',
+                            defaultMessage: 'Actions',
+                          })}
+                        </VisuallyHidden>
+                      </Th>
+                    </Tr>
+                  </Thead>
+                  <Tbody>
+                    {webhooks.map(webhook => (
+                      <Tr
+                        key={webhook.id}
+                        {...onRowClick({
+                          fn: () => handleGoTo(webhook.id),
+                          condition: canUpdate,
                         })}
-                      </Button>
-                    }
-                  />
-                )}
-              </>
-            )}
-          </ContentLayout>
-        </>
+                      >
+                        <Td {...stopPropagation}>
+                          <BaseCheckbox
+                            aria-label={`${formatMessage({
+                              id: 'Settings.webhooks.list.select',
+                              defaultMessage: 'Select',
+                            })} ${webhook.name}`}
+                            value={webhooksToDelete?.includes(webhook.id)}
+                            onValueChange={value => handleSelectOneCheckbox(value, webhook.id)}
+                            id="select"
+                            name="select"
+                          />
+                        </Td>
+                        <Td>
+                          <Typography fontWeight="semiBold" textColor="neutral800">
+                            {webhook.name}
+                          </Typography>
+                        </Td>
+                        <Td>
+                          <Typography textColor="neutral800">{webhook.url}</Typography>
+                        </Td>
+                        <Td>
+                          <Flex {...stopPropagation}>
+                            <Switch
+                              onLabel={formatMessage({
+                                id: 'Settings.webhooks.enabled',
+                                defaultMessage: 'Enabled',
+                              })}
+                              offLabel={formatMessage({
+                                id: 'Settings.webhooks.disabled',
+                                defaultMessage: 'Disabled',
+                              })}
+                              label={`${webhook.name} ${formatMessage({
+                                id: 'Settings.webhooks.list.th.status',
+                                defaultMessage: 'Status',
+                              })}`}
+                              selected={webhook.isEnabled}
+                              onChange={() => handleEnabledChange(!webhook.isEnabled, webhook.id)}
+                              visibleLabels
+                            />
+                          </Flex>
+                        </Td>
+                        <Td>
+                          <Stack horizontal size={1} {...stopPropagation}>
+                            {canUpdate && (
+                              <IconButton
+                                onClick={() => {
+                                  handleGoTo(webhook.id);
+                                }}
+                                label={formatMessage({
+                                  id: 'Settings.webhooks.events.update',
+                                  defaultMessage: 'Update',
+                                })}
+                                icon={<Pencil />}
+                                noBorder
+                              />
+                            )}
+                            {canDelete && (
+                              <IconButton
+                                onClick={() => handleDeleteClick(webhook.id)}
+                                label={formatMessage({
+                                  id: 'Settings.webhooks.events.delete',
+                                  defaultMessage: 'Delete',
+                                })}
+                                icon={<Trash />}
+                                noBorder
+                                id={`delete-${webhook.id}`}
+                              />
+                            )}
+                          </Stack>
+                        </Td>
+                      </Tr>
+                    ))}
+                  </Tbody>
+                </Table>
+              ) : (
+                <EmptyStateLayout
+                  icon={<EmptyDocuments width="160px" />}
+                  content={formatMessage({
+                    id: 'Settings.webhooks.list.empty.description',
+                    defaultMessage: 'Add your first webhook',
+                  })}
+                  action={
+                    <Button
+                      variant="secondary"
+                      startIcon={<Plus />}
+                      onClick={() => (canCreate ? handleGoTo('create') : {})}
+                    >
+                      {formatMessage({
+                        id: 'Settings.webhooks.list.button.add',
+                        defaultMessage: 'Add new webhook',
+                      })}
+                    </Button>
+                  }
+                />
+              )}
+            </>
+          )}
+        </ContentLayout>
       </Main>
       <ConfirmDialog
         isOpen={showModal}