diff --git a/.changeset/nice-donkeys-stare.md b/.changeset/nice-donkeys-stare.md new file mode 100644 index 0000000..075a48a --- /dev/null +++ b/.changeset/nice-donkeys-stare.md @@ -0,0 +1,5 @@ +--- +"saleor-app-cms": patch +--- + +Provider configurations UI fixes diff --git a/apps/cms/package.json b/apps/cms/package.json index e33fa5e..41b6635 100644 --- a/apps/cms/package.json +++ b/apps/cms/package.json @@ -22,7 +22,7 @@ "@material-ui/lab": "4.0.0-alpha.61", "@saleor/app-sdk": "0.37.1", "@saleor/apps-shared": "workspace:*", - "@saleor/macaw-ui": "^0.6.7", + "@saleor/macaw-ui": "^0.7.2", "@sentry/nextjs": "^7.43.0", "@urql/exchange-auth": "^1.0.0", "clsx": "^1.2.1", diff --git a/apps/cms/src/modules/channels/ui/channel-configuration-form.tsx b/apps/cms/src/modules/channels/ui/channel-configuration-form.tsx index de838ef..69e8775 100644 --- a/apps/cms/src/modules/channels/ui/channel-configuration-form.tsx +++ b/apps/cms/src/modules/channels/ui/channel-configuration-form.tsx @@ -137,7 +137,7 @@ export const ChannelConfigurationForm = ({ ); return ( - + {providerInstance.name} diff --git a/apps/cms/src/modules/provider-instances/ui/provider-icon.tsx b/apps/cms/src/modules/provider-instances/ui/provider-icon.tsx index 0ecd1bf..b4949ca 100644 --- a/apps/cms/src/modules/provider-instances/ui/provider-icon.tsx +++ b/apps/cms/src/modules/provider-instances/ui/provider-icon.tsx @@ -1,12 +1,31 @@ +import { makeStyles } from "@saleor/macaw-ui"; import { getProviderByName } from "../../providers/config"; import Image from "next/image"; +import clsx from "clsx"; interface ProviderIconProps { providerName: string; + small?: boolean; } -export const ProviderIcon = ({ providerName }: ProviderIconProps) => { +const useStyles = makeStyles((theme) => ({ + small: { + width: theme.spacing(2.5), + }, +})); + +export const ProviderIcon = ({ providerName, small = false }: ProviderIconProps) => { + const styles = useStyles(); + const provider = getProviderByName(providerName); - return provider ? {`${provider.label} : null; + return provider ? ( + {`${provider.label} + ) : null; }; diff --git a/apps/cms/src/modules/provider-instances/ui/provider-instance-configuration-form.tsx b/apps/cms/src/modules/provider-instances/ui/provider-instance-configuration-form.tsx index 9a46eb3..09b2411 100644 --- a/apps/cms/src/modules/provider-instances/ui/provider-instance-configuration-form.tsx +++ b/apps/cms/src/modules/provider-instances/ui/provider-instance-configuration-form.tsx @@ -57,8 +57,6 @@ export const ProviderInstanceConfigurationForm = { resetField("providerName" as Path, { defaultValue: provider.name, @@ -89,11 +87,6 @@ export const ProviderInstanceConfigurationForm = )} - )} - value={providerInstance?.id} - /> )} @@ -147,6 +140,21 @@ export const ProviderInstanceConfigurationForm = ))} + {providerInstance ? ( + + )} + label="Configuration id" + type="text" + name="id" + fullWidth + helperText="Automatically generated unique identifier for the configuration instance." + disabled={true} + /> + + ) : ( + )} /> + )} {providerInstance && (