O2S Release 1.3.0

We're excited to announce Release 1.3.0 of Open Self Service! This release introduces Contentful CMS integration with Live Preview support, initial Zendesk integration for ticketing, performance improvements, enhanced developer experience features, and quality-of-life enhancements. Let's dive into what's new!

New features

Contentful CMS integration

We're thrilled to introduce the support for Contentful CMS, giving you another powerful option for managing your content alongside our existing Strapi integration. This new integration brings powerful content management capabilities to Open Self Service:

• Type-safe content fetching using GraphQL as the primary API
• Supports Pages, Templates, and Blocks - the same structure you're already familiar with
• Work with different Contentful environments (staging, production, etc.)
• Full internationalization support with locale fallback
• Automatic TypeScript type generation from your GraphQL schema
• Full caching support for optimized performance

Getting started with Contentful is straightforward:

npm install @o2s/integrations.contentful-cms --workspace=@o2s/configs.integrations --workspace=@o2s/frontend

After installing, configure your environment variables and import the content model from our resources repository. The integration automatically generates TypeScript types from your GraphQL schema, ensuring type safety throughout your application.

tip

For detailed setup instructions, content model documentation, and advanced features, see the Contentful CMS integration documentation in our docs.

Live Preview support

Contentful integration includes built-in Live Preview support, allowing content editors to see their changes in real-time as they edit content. This feature transforms the content editing experience by enabling instant visual feedback without manual page refreshes.

Live Preview works seamlessly with our composable architecture through a unique metadata pattern that bridges our normalized data model with Contentful's structure. This approach:

• Enables click-to-edit, allowing content editors can click directly on elements in the preview to edit them in Contentful
• Supports real-time updates - changes made in Contentful are immediately reflected in the preview
• Maintains CMS-agnostic design, where the metadata pattern allows for future CMS integrations while keeping the architecture flexible

The integration includes a LivePreviewProvider component that wraps your application and a useInspector hook for easy component integration:

import { LivePreview } from '@o2s/configs.integrations/live-preview';

function App() {
    return (
        <LivePreview.Provider
            locale="en"
            enableInspectorMode={true}
            enableLiveUpdates={true}
        >
            {/* Your app content */}
        </LivePreview.Provider>
    );
}

info

Live Preview requires a Contentful Preview API token. Check the Live Preview documentation for detailed setup instructions and best practices.

Zendesk integration

We're also excited to introduce initial support for Zendesk, bringing enterprise-grade ticketing capabilities to Open Self Service. This integration allows users to view their support tickets directly within O2S application, providing a seamless customer support experience.

The Zendesk integration offers:

• Viewing individual tickets with full details, comments, and conversation history
• Listing tickets with filtering options
• Data normalization that maps Zendesk structures to our standard ticket model
• User-specific ticket access - users can only see their own tickets
• Attachment handling for ticket-related files
• Automatic API client generation from Zendesk OpenAPI specification for type-safe access

The integration automatically generates TypeScript types and API client methods from the Zendesk OpenAPI specification, ensuring you always have up-to-date, strongly-typed access to the Zendesk API. This means you get the latest Zendesk features and endpoints as soon as they're available.

To get started with Zendesk, install the integration package:

npm install @o2s/integrations.zendesk --workspace=@o2s/configs.integrations

After installing, configure your environment variables with your Zendesk API URL and authentication token. The integration handles authentication automatically and ensures secure, user-scoped access to tickets.

tip

For detailed setup instructions, API configuration, and data mapping details, see the Zendesk integration documentation in our docs.

Enhanced filtering and search

We've introduced a new type of filter: free-text search. This addition allows users to search across content, making it much easier to find what they're looking for.

The free-text search filter can be included in any block that supports filtering, such as the invoice list block. When implemented, users can enter search terms to quickly filter through large datasets without needing to specify exact field values.

Performance optimizations

This release includes several performance improvements that make Open Self Service faster and more efficient:

• Added support for prioritizing image rendering to disable lazy loading for images above the fold, improving perceived performance
• Optimized JavaScript bundle size by avoiding unnecessary dynamic icon loading
• Enhanced code splitting strategies to reduce initial load times and improve overall application performance

Other changes

Page-Based themes via CMS config

You can now configure themes on a per-page basis directly through your CMS configuration. This gives content editors more control over the visual presentation of individual pages without requiring code changes. Whether you need different themes for marketing pages versus self-service portals, this feature provides the flexibility you need.

Storybook for UI components

Following up on our Storybook integration for blocks in 1.2.0, we've now added stories for UI Library components. This expansion makes it easier to:

• Browse and explore all UI components in one place
• See examples and variations of each component
• Test and develop components independently from the main application

Our public Storybook instance at https://storybook-o2s.openselfservice.com/ now includes both blocks and UI components, serving as comprehensive living documentation.

UI component enhancements

We've enhanced several UI components with better error handling and new functionality:

• Checkbox, Select, and Input components now include enhanced error support, making form validation feedback clearer and more user-friendly
• Added a new Carousel component for displaying content in a visually appealing, interactive way

Health Check endpoints

We've added health check endpoints to the API Harmonization server, making it easier to monitor the health and status of your deployment. These endpoints are essential for:

• Integration with monitoring tools and alerting systems
• Ensuring traffic is only routed to healthy instances
• Enabling proper lifecycle management in containerized environments

Bugfixing and security updates

As always, we're committed to maintaining a stable and secure platform. This release includes various bug fixes and security updates to ensure your Open Self Service implementation remains reliable and up-to-date.